← All skills
live-preview
80 / 100 · Low risk
Fine to try. Some of what it can do is expected: a coding skill usually runs build and test commands.
By SethGammon/Citadel (GitHub) · coding · 929 stars · scanned at commit 3c317a0
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.
Works with any agent that supports SKILL.md skills.
What this skill can do
Downloads and installs other software
The author does not mention this.
Found in 4 places.
Show 1 more
Runs commands on your computer
The author does not mention this. Expected for a coding skill.
Found in 90 places.
Show 17 more
- skills/live-preview/SKILL.md, line 104
node scripts/codex-app-artifacts.js verify --require-artifacts - .claude-plugin/.mcp.json, line 4
"command": "node", - .claude-plugin/.mcp.json, line 20
"command": "node", - core/memory/repository-store.js, line 7
const { spawnSync } = require('child_process'); - core/runtime/detect-runtime.js, line 7
const { execFileSync: defaultExecFileSync } = require('child_process'); - core/runtime/detect-runtime.js, line 83
parentInfo = execFileSync( - core/runtime/detect-runtime.js, line 89
parentInfo = execFileSync( - core/runtime/detect-runtime.js, line 96
parentInfo = execFileSync( - core/runtime/install-contract.js, line 265
"const { spawnSync } = require('child_process');", - core/runtime/install-contract.js, line 270
"const result = spawnSync(process.execPath, [real, ...process.argv.slice(2)], { stdio: 'inherit', env: process.env });", - core/worktree/create.js, line 14
const { execFileSync } = require('child_process'); - core/worktree/create.js, line 19
return execFileSync('git', args, { - hooks_src/harness-health-util.js, line 407
require('child_process').execFileSync('mypy', ['--version'], { stdio: 'pipe' }); - hooks_src/harness-health-util.js, line 411
require('child_process').execFileSync('pyright', ['--version'], { stdio: 'pipe' }); - hooks_src/init-project.js, line 179
"const { spawnSync } = require('child_process');\n" + - hooks_src/init-project.js, line 184
"const r = spawnSync(process.execPath, [real, ...process.argv.slice(2)], { stdio: 'inherit', env: process.env });\n" + - hooks_src/init-project.js, line 219
require('child_process').spawnSync('node', [script, 'sweep'], {
and 70 more places
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'live-preview' ] || [ -L ~/.agents/skills/'live-preview' ]; then echo 'A skill folder named live-preview already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/SethGammon/Citadel' "$d" && git -C "$d" checkout --quiet '3c317a0bf13f147efaa695db7c24117349119d07' -- 'skills/live-preview' && mkdir -p ~/.agents/skills && cp -R "$d"/'skills/live-preview' ~/.agents/skills/'live-preview' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'live-preview' ~/.claude/skills/'live-preview' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for SethGammon/Citadel shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/SethGammon/Citadel/)
Score history
| Date | Version | Score |
|---|
| 2026-11-08 | 3c317a0 | 80 |
| 2026-11-07 | 3c317a0 | 75 |