From citadel
Takes screenshots of modified components mid-build to catch visual regressions before they compound. Requires Playwright or similar screenshot tool.
How this skill is triggered — by the user, by Claude, or both
Slash command
/citadel:live-previewThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill requires a screenshot tool. Supported:
This skill requires a screenshot tool. Supported:
npx playwright screenshot [url] [output.png]If no screenshot tool is available, this skill will tell you what to install and exit.
Determine what needs visual verification:
For each route/URL that needs verification:
npx playwright screenshot http://localhost:{port}/{route} .planning/screenshots/{route-slug}.png --full-page
# 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"
For each screenshot:
For each FAIL or BLANK:
Save verification artifacts:
.planning/screenshots/{campaign-slug}/ (if in a campaign)
or .planning/screenshots/ (if standalone)node scripts/codex-app-artifacts.js record --workflow live-preview --kind screenshot --path ".planning/screenshots/{route-slug}.png" --status pass
node scripts/codex-app-artifacts.js verify --require-artifacts
## Visual Verification: {date}
| Route | File Modified | Result | Notes |
|-------|--------------|--------|-------|
| /dashboard | Dashboard.tsx | PASS | Renders correctly |
| /settings | SettingsPanel.tsx | FAIL → PASS | Fixed missing import, re-verified |
| /profile | ProfileCard.tsx | BLANK → PASS | Component wasn't mounted, fixed export |
When Archon delegates a build phase that modifies view files:
npm run dev or equivalent, then re-run /live-preview." Do not attempt screenshots against a dead server.package.json scripts for a --port flag or PORT env variable.npm i -D playwright. Exit gracefully without crashing..planning/screenshots/ does not exist: Create the directory before writing artifacts. Never error on a missing output directory.Disclosure: "Taking screenshots for visual verification. Images saved to .planning/screenshots/."
Reversibility: green — screenshots only; saves to .planning/screenshots/. No source files modified.
Trust gates:
---HANDOFF---
- Live Preview: {N} routes verified
- Results: {pass}/{total} passed
- Failures: {list of routes that failed and what was wrong}
- Screenshots: .planning/screenshots/{path}
- Reversibility: green — delete .planning/screenshots/ to remove artifacts; no source files modified
---
npx claudepluginhub sethgammon/citadel --plugin citadelAudits UI visual regressions post-development: starts dev server, screenshots changed routes (.tsx/.vue/.svelte), compares via Haiku vision AI against aesthetic-direction.md/ux-brief.md, flags issues before browser tests.
Detects UI visual regressions via screenshot comparisons using Playwright, Cypress, Percy. Generates diffs, handles responsive breakpoints, and integrates with CI.
Adds visual regression testing to UI projects via screenshot comparison, diff detection, and baseline management. Catches CSS regressions and layout shifts.