# Live Preview

Mid-build visual verification loop.

- Repository: https://github.com/SethGammon/Citadel (927 stars)
- Category: Testing
- License: MIT
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add SethGammon/Citadel --skill live-preview -g -a claude-code -y`
Codex: `npx skills add SethGammon/Citadel --skill live-preview -g -a codex -y`
Cursor: `npx skills add SethGammon/Citadel --skill live-preview -g -a cursor -y`
Gemini CLI: `npx skills add SethGammon/Citadel --skill live-preview -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add SethGammon/Citadel`

## Description

Mid-build visual verification loop. Takes screenshots of components during construction, not just after. Catches visual regressions and invisible features before they compound. Requires Playwright or similar screenshot tool.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# /live-preview, Build-Verify-Fix Loop

## 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 route manifest or sitemap, use it
   - If the project has a dev server, identify which routes render the modified components
   - If you can't determine the route, ask the user

### Step 2: CAPTURE

For each route/URL that needs verification:

1. Ensure the dev server is running (start it if not)
2. Take a screenshot:
   ```bash
   npx playwright screenshot http://localhost:{port}/{route} .planning/screenshots/{route-slug}.png --full-page
   ```
3. If Playwright isn't available, try:
   ```bash
   # Check for playwright
   npx playwright --version 2>/dev/null
   # If not found, inform the user:
   # "live-preview needs Playwright for screenshots. Install with: npm i -D playwright"
   ```

### Step 3: VERIFY

For each screenshot:

The rest: https://github.com/SethGammon/Citadel/blob/HEAD/skills/live-preview/SKILL.md