# Walkthrough Brief (for AI coding agents)

## Source
- Video: `my-recording-cleanshot-x-compressed.mp4`
- Duration: ~4m 33s | 2536×1744 @ 60fps | HEVC (H.265) + AAC
- Transcript: **not included** (provide transcript/audio if you want word-perfect alignment)

## Step-by-step (time-coded)

### 1. Start: Layerpath + macOS file picker (00:00)
- What happens: You’re in a browser on the Layerpath app (dark UI). A macOS Open dialog is in front, showing QuickTime Player / iCloud context.
- Why it matters: You’re preparing an asset (likely a screen recording or screenshot) to open/share.
- Suggested narration: We start in Layerpath. I’m about to select a file from the macOS picker so I can open or share it.

### 2. CleanShot X editor opens on a screenshot of Layerpath 'Latest demos' (00:30)
- What happens: You’re in CleanShot X’s annotate/editor window. The canvas shows a screenshot of Layerpath → Latest demos.
- Why it matters: This is the base screenshot you’ll turn into a shareable, guided brief.
- Suggested narration: Next, I open CleanShot’s editor on a screenshot of the Layerpath dashboard so I can annotate it.

### 3. Add callout marker 1 near workspace dropdown (02:00)
- What happens: You place a red numbered marker '1' near the workspace dropdown area (top-left).
- Why it matters: You’re identifying the first point of attention: workspace context / tier label.
- Suggested narration: I add the first marker to call out the workspace selector and the current tier/context.

### 4. Add marker 2 near left nav 'Dashboard' (02:05)
- What happens: You add marker '2' near the left navigation, next to Dashboard.
- Why it matters: This anchors navigation for the viewer: where they are in the product.
- Suggested narration: I add a second marker on the left nav so it’s obvious where we are: Dashboard.

### 5. Add markers 3, 4, 5 across the demos grid and nav (02:30)
- What happens: You add marker '3' near the top area of the first demo card, marker '4' by 'My demos' in the left nav, and marker '5' on/near a lower demo tile.
- Why it matters: You’re mapping the key UI targets the viewer should understand: demo card, My demos entry, and a specific tile.
- Suggested narration: Now I mark the demo card, the My demos nav item, and a specific tile—these are the core touch points.

### 6. Switch to background styling panel (gradients/wallpapers/blur) (03:30)
- What happens: You open the background/styling controls (Gradients, Wallpapers, Blurred, Plain color). The screenshot is framed with padding and a gradient background.
- Why it matters: You’re transforming a raw screenshot into a polished, shareable brief artifact.
- Suggested narration: Next I switch to styling: I add a gradient background and spacing so this looks presentable when shared.

### 7. Add a large red arrow pointing toward marker 5 (03:35)
- What happens: You draw a big diagonal red arrow from the upper-right area toward marker '5' near the lower-middle/left region.
- Why it matters: This creates a strong guided focus—viewers won’t miss the intended target.
- Suggested narration: I add a big arrow to force attention to marker five—this is the main focus of this step.

### 8. Tweak presentation settings (Corners control visible) (04:00)
- What happens: You hover and adjust presentation controls; the Corners setting is visible and you appear to fine-tune roundness.
- Why it matters: Small polish choices make the brief feel intentional and easier to consume.
- Suggested narration: Finally, I tweak the finishing touches like corner rounding so the final asset feels clean.

### 9. Exit editor back to browser (04:30)
- What happens: CleanShot editor disappears and you’re back in the browser on the Layerpath page.
- Why it matters: Annotation + styling phase is done; you’re ready to share or reuse the artifact.
- Suggested narration: I’m done with the edits and I return back to the app—ready to share the result.

## Desired output formats
- Human-facing: interactive HTML walkthrough (editable steps + screenshot per step + spotlight/annotations)
- AI-facing: Markdown + JSON export with the same step structure and screenshot references