메뉴
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