メニュー
Use when user says 'review UI', 'check design', 'audit screenshots', or after any UI/UX code change. Auto-runs after every frontend PR. Captures before/after screenshots, scores per-screen on /128 scale.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use khi user nói 'làm khóa luận', 'thesis V1', 'audit thesis', 'thesis ready to defense?', 'render thesis docx', hoặc trước khi ship academic deliverable. Workflow: planning → draft chapters → 3-agent outside-in audit → fix → assemble DOCX. Backed by thesis-content-standard.md rubric /100.
Dùng khi user nói 'extract citations', 'trích dẫn luận văn', 'audit thesis cite', 'verify bibliography', 'orphan citation check', 'kiểm tra cite luận văn', hoặc khi review thesis chapter trước defense. Parse `[N]` cite keys từ thesis chapters + verify chéo với `documents/<thesis-dir>/references/bibliography.md` → báo 3 bucket: matched / orphan-body (cite không có entry) / orphan-bib (entry không cite).
Dùng khi user nói 'figure curation', 'thesis figures', 'caption', 'đánh số hình', 'INDEX figure', 'curate figure cho Chapter N', 'add figure to thesis', 'kiểm tra caption hình', 'audit figure thesis'. Codifies selection criteria (figure vs table vs prose), per-chapter numbering N.M, Vietnamese caption format, per-chapter INDEX generation. Pair với thesis-docx pipeline.
Dùng khi user nói 'extract citations', 'trích dẫn luận văn', 'audit thesis cite', 'verify bibliography', 'orphan citation check', 'kiểm tra cite luận văn', hoặc khi review thesis chapter trước defense. Parse `[N]` cite keys từ thesis chapters + verify chéo với `documents/<thesis-dir>/references/bibliography.md` → báo 3 bucket: matched / orphan-body (cite không có entry) / orphan-bib (entry không cite).
Dùng khi user nói 'figure curation', 'thesis figures', 'caption', 'đánh số hình', 'INDEX figure', 'curate figure cho Chapter N', 'add figure to thesis', 'kiểm tra caption hình', 'audit figure thesis'. Codifies selection criteria (figure vs table vs prose), per-chapter numbering N.M, Vietnamese caption format, per-chapter INDEX generation. Pair với thesis-docx pipeline.
"Use when user says '{trigger phrase 1}', '{trigger phrase 2}', or {situation when skill applies}. {What the skill does in one sentence}."
| name | ui-review |
| description | Use when user says 'review UI', 'check design', 'audit screenshots', or after any UI/UX code change. Auto-runs after every frontend PR. Captures before/after screenshots, scores per-screen on /128 scale. |
| user-invocable | true |
Per-screen scoring + before/after screenshots. Adapt {project} placeholders.
.claude/skills/ui-review/scripts/capture-screenshots.ts to your project's scripts dirCheck each previously reported issue → FIXED/STILL OPEN/PARTIAL table at top of report.
BEFORE any UI fix (MANDATORY):
npx tsx scripts/capture-screenshots.ts --label before-pr-XXX
AFTER fix merged (auto-run, don't wait for user):
npx tsx scripts/capture-screenshots.ts --label after-pr-XXX
Script auto-detects dev server, starts if needed. Auto-updates latest/ when using --label.
Output: {project-docs}/screenshots/{label}/{page}/{theme}-{viewport}.png
5 dimensions, each screen scored independently:
Report the LOWEST screen separately — this is the real quality bar.
| Screen | Before | After | What changed |
|--------|--------|-------|-------------|
| {page} | before-pr-XXX/{page}/dark-mobile.png | after-pr-XXX/{page}/dark-mobile.png | {description} |
Save to {project-docs}/ui-review-latest.md
"Has feature" = 2/4, NOT 3/4. Before giving 3: "Would external auditor agree this is good?"
latest/ folder so user sees current state