live-preview

# /live-preview — Build-Verify-Fix Loop ## Identity /live-preview catches the gap between "compiles" and "works visually." It takes screenshots during construction so you don't ship invisible features or broken layouts. This exists because of a real failure: an agent completed a multi-phase campaign, passed every typecheck, and shipped a feature where 37 of 38 entities were invisible. Exit code 0 is not quality. ## Prerequisites This skill requires a screenshot tool. Supported: - **Playwright** (recommended): `npx playwright screenshot [url] [output.png]` - **Puppeteer**: via a small script - **Any tool that takes a URL and produces a screenshot** If no screenshot tool is available, this skill will tell you what to install and exit. ## When to Use - Any time .tsx, .jsx, .vue, .svelte, or .html files are modified - After component creation or replacement - During visual redesign campaigns - When Archon or Marshal delegate UI work ## Protocol ### Step 1: DETECT Determine what needs visual verification: 1. Check which files were modified in the current session/phase 2. Filter to view-layer files (.tsx, .jsx, .vue, .svelte, .html, .css) 3. **If no view-layer files found**: exit early with message "No view-layer files modified. Nothing to preview." Skip Steps 2-5. This is expected for non-UI repos (CLI tools, libraries, agent harnesses). 4. Map each modified file to a route or URL where it renders: - If the project has a ...