メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/VictorAurelius/claude-starter-kit --skill ui-reviewコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Dùng khi user nói 'api audit', 'contract check', 'kiểm tra API', 'endpoint match docs?', 'breaking change?', hoặc trước release. Verify API endpoints match api-contract.md /100.
Dùng khi user nói 'audit', 'quality check', 'kiểm tra chất lượng', 'điểm chất lượng', 'ready to merge?', 'persona coverage', hoặc trước khi merge một wave/feature lớn vào main. Chấm điểm 11 categories /110 điểm (10 tech + 1 persona coverage).
Dùng khi user nói 'business audit', 'logic check', 'kiểm tra business logic', 'code đúng rules chưa', hoặc trước GA release. Verify code implement đúng rules.md + use-cases.md. 5 categories /100.
SOC 職業分類に基づく
SKILL.md を表示中
| 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