live-preview

1# /live-preview — Build-Verify-Fix Loop
2 
3## Prerequisites
4 
5This skill requires a screenshot tool. Supported:
6- **Playwright** (recommended): `npx playwright screenshot [url] [output.png]`
7- **Puppeteer**: via a small script
8- **Any tool that takes a URL and produces a screenshot**
9 
10If no screenshot tool is available, this skill will tell you what to install and exit.
11 
12## When to Use
13 
14- Any time .tsx, .jsx, .vue, .svelte, or .html files are modified
15- After component creation or replacement
16- During visual redesign campaigns
17- When Archon or Marshal delegate UI work
18 
19## Protocol
20 
21### Step 1: DETECT
22 
23Determine what needs visual verification:
24 
251. Check which files were modified in the current session/phase
262. Filter to view-layer files (.tsx, .jsx, .vue, .svelte, .html, .css)
273. **If no view-layer files found**: exit early with message
28   "No view-layer files modified. Nothing to preview." Skip Steps 2-5.
29   This is expected for non-UI repos (CLI tools, libraries, agent harnesses).
304. Map each modified file to a route or URL where it renders:
31   - If the project has a route manifest or sitemap, use it
32   - If the project has a dev server, identify which routes render the modified components
33   - If you can't determine the route, ask the user
34 
35### Step 2: CAPTURE
36 
37For each route/URL that needs verification:
38 
391. Ensure the dev server is running (start it if not)
402. Take a screenshot:
41   ```bash
42…