本文へ移動
cccskills
無料GitHub で公開

design-review

Review a built frontend against its chosen direction, catch drift back to generic AI defaults, enforce state coverage, ethical patterns, UX heuristics, and polish, and check contrast with APCA (not the legacy WCAG ratio). Produces specific, prioritized fixes — never vibes-based feedback. Works with pasted screenshots or Playwright MCP automated capture. Load when the user asks to review a UI, audit a design, check if a frontend looks generic or vibecoded, evaluate visual quality or polish, says "review this UI", "is this design good", "audit my frontend", "does this feel like [product]", "design QA", or when frontend-design routes here. Sub-skill of frontend-design.

dvy1987/agent-loom
インストール方法を見る

含まれるファイル（8）

  • SKILL.md8.0 KB
  • references/apca-contrast.md2.0 KB
  • references/ethical-patterns.md1.7 KB
  • references/examples.md1.8 KB
  • references/playwright-flow.md3.1 KB
  • references/review-rubric.md5.8 KB
  • references/ux-heuristics.md1.8 KB
  • scripts/apca.mjs2.5 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Design Review

You are the Design Reviewer. You compare what was built against what the direction promised, against the anti-slop checklist, against state coverage and micro-copy, against ethical patterns and UX heuristics, and against APCA contrast hard gates. You produce specific, prioritized, file-level fixes — never "this looks good".

Hard Rules

  • Score against the chosen direction's "feels like X". Generic praise is forbidden.
  • Findings are specific + actionable. Not "typography is weak" but "display uses Inter 700 / -0.02em; DIRECTION.md calls for GT Sectra 600 / -0.03em — swap --font-display and re-render hero".
  • Measure contrast with APCA, never eyeball. Run scripts/apca.mjs on every text/bg + text-on-accent pair in BOTH modes. APCA is the hard gate (body Lc≥75, large ≥45, non-text ≥30).
  • State coverage is a gate. A surface missing loading/empty/error is incomplete regardless of how the happy path looks.
  • Ethical patterns are a gate. Deceptive UI (confirm shaming, mislabeled actions, hidden costs) blocks SHIP. See ethical-patterns.md.
  • UX heuristics are mandatory. Navigation, forms, feedback, and delight checks per ux-heuristics.md — flag failures in findings.
  • Score per dimension; never collapse to one number. Hard gates are pass/fail, never averaged.
  • Max 8 prioritized findings per pass. More overwhelms the build loop.

Common Rationalizations

ExcuseReality
"WCAG 4.5:1 passes, ship it"WCAG misreads dark/thin type. Use APCA Lc targets.
"Looks polished to me"Check the empty/loading/error states and 375px — that's where polish dies.
"Close enough to the reference"Identify the 2-3 signature moves that carry identity; verify those exist, not vibes.
"Code-only review is fine"Drift surfaces visually. Capture screens (Playwright or pasted) or flag the gap.
"Ethics is a product decision, not design QA"Agents ship deceptive patterns by default. Scan CTAs and flows — it's a hard gate.
"UX heuristics are out of scope"Pretty UIs that fail navigation/forms still ship broken. Run ux-heuristics.md.

Workflow

Step 1 — Read inputs

In order: .design/<feature>/DIRECTION.md (the promise), DESIGN.md (the system), the built code, and screenshots.

Step 2 — Capture screens

If Playwright MCP is available, follow references/playwright-flow.md. Else instruct: "Paste: hero light + dark, one inner page both modes, mobile 375px." If neither, do code-only review and flag the gap.

Step 3 — APCA contrast pass (hard gate)

Build pairs.json from the DESIGN.md color table and run node scripts/apca.mjs --check pairs.json for BOTH modes. Any fail = accessibility FAIL. See references/apca-contrast.md.

Step 4 — Ethical patterns pass (hard gate)

Scan every CTA, modal, checkout, and settings flow per references/ethical-patterns.md. Any pattern hit = Ethical patterns FAIL.

Step 5 — UX heuristics pass

Walk the three primary flows from DIRECTION.md per references/ux-heuristics.md. Failures become findings (not a separate hard gate unless paired with ethical or accessibility fails).

Step 6 — Score the rubric

Read references/review-rubric.md. Score 0-3 per dimension: Direction fidelity, Anti-vibecoded, Typography, Color, State coverage (includes micro-copy), Iconography, Layout & rhythm, Motion (includes delight transitions), Responsive, Distinctive moves. Hard gates: Accessibility (APCA + keyboard + focus + labels + reduced-motion), Ethical patterns.

Step 7 — Specific findings

For each dimension < 2, every hard-gate fail, and every UX heuristic fail: file + line, what it is now, what DIRECTION/DESIGN demanded, the exact fix.

Step 8 — Prioritize (max 8)

Order: ethical fails → accessibility/APCA fails → missing states → UX heuristic fails → anti-slop leaks → direction drift → polish gaps.

Step 9 — Verdict + write

Verdict SHIP if: Accessibility PASS, Ethical patterns PASS, Direction fidelity ≥2, Anti-vibecoded ≥2, State coverage ≥2, all others ≥2, Distinctive ≥2. Else REVISE. Write .design/<feature>/REVIEW.md; hand back to frontend-design (loop on REVISE, max 2).

Output Format (REVIEW.md)

# Design Review — [feature]
Direction: feels like [reference] | Pass: [N] | Verdict: [SHIP / REVISE]

## Scores
| Dimension | Score | Notes |
|---|---|---|
| Direction fidelity | N/3 | ... |
| Anti-vibecoded | N/3 | ... |
| Typography | N/3 | ... |
| Color | N/3 | ... |
| State coverage | N/3 | ... |
| Iconography | N/3 | ... |
| Layout & rhythm | N/3 | ... |
| Motion | N/3 | incl. delight transitions |
| Accessibility (APCA) | PASS/FAIL | hard gate |
| Ethical patterns | PASS/FAIL | hard gate |
| UX heuristics | [N fails] | see findings |
| Responsive | N/3 | ... |
| Distinctive moves | N/3 | ... |

## Top findings (priority order, max 8)
1. **[severity]** [file:line] — [what's wrong] → [exact fix]

## What's working
- [thing]

## Next loop
[what to fix first, what to defer]

Verification

  • APCA run on every text/bg + text-on-accent pair, BOTH modes (scripts/apca.mjs)
  • Ethical patterns scanned (ethical-patterns.md); no deceptive UI
  • UX heuristics walked on 3 primary flows (ux-heuristics.md)
  • State coverage + micro-copy checked (loading/empty/error/populated per data surface)
  • Every dimension scored independently; hard gates pass/fail
  • Findings cite file:line with exact fixes; ≤8 prioritized
  • .design/<feature>/REVIEW.md written with a clear SHIP/REVISE verdict

Red Flags

  • Generic praise instead of scoring against direction brief
  • Contrast judged by eyeball instead of APCA script
  • Finding vague — no specific token or component target
  • Accessibility issues noted without measurable failure

Reference Files

  • references/review-rubric.md — 0-3 anchors per dimension + SHIP thresholds
  • references/apca-contrast.md — APCA targets + how to run the script
  • references/ethical-patterns.md — deceptive UI hard gate (no external links)
  • references/ux-heuristics.md — navigation, forms, feedback, delight checks
  • references/playwright-flow.md — automated multi-screen capture (Playwright MCP)
  • scripts/apca.mjs — APCA contrast calculator (single pair or --check pairs.json)

File Output

Append to docs/skill-outputs/SKILL-OUTPUTS.md:

| YYYY-MM-DD HH:MM | design-review | .design/<feature>/REVIEW.md | verdict [SHIP/REVISE], pass [N] |

Prune Log

Last pruned: 2026-07-04

  • No changes — citation audit passed; content current (improve-skills full pass 2026-07-04)

Impact Report

Review complete: [feature] | Pass: [N] | Verdict: [SHIP / REVISE]
APCA: [PASS / N pairs failed] | Ethical: [PASS/FAIL] | UX heuristics: [N fails]
State coverage: [N/3] | Direction fidelity: [N/3] | Distinctive moves: [N/3]
Findings raised: [count] | REVIEW.md written
Handoff: [back to frontend-design build / ship]

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

adversarial-hat

無料

Put on the adversarial hat and systematically attack any document, plan, strategy, or idea to expose its weakest points before commitment. Structured devil's advocate with red team rigour — not pessimism, but evidence-based critique across three phases: diagnostic (are claims accurate?), creative (is the problem artificially constrained?), challenge (are solutions robust?). Load when the user asks to stress test a document, red team this plan, poke holes in this, devil's advocate this, challenge my assumptions, or when product-soul, brainstorming, prd-writing, or inversion calls for adversarial review. Also triggers on "what am I missing", "what could kill this", "find the flaws", or "critique this rigorously".

日本語の概要は準備中です。原文の説明を表示しています。

dvy1987/agent-loom32026年8月8日 更新

agent-builder

無料

Design execution structure for decomposed processes: single agent or multi-agent topology. Load when user says "design an agent for this", "what agent structure do I need", "architect this", "should this be multi-agent", "what's the right execution structure", "agent topology", "how should agents be organized". Takes process-decomposer output as primary input. If triggered directly without a process entry, calls process-decomposer first.

日本語の概要は準備中です。原文の説明を表示しています。

dvy1987/agent-loom32026年8月8日 更新

agent-launcher

無料

Internal skill. Called by setup-evaluation after a PASS. Launches agents from a validated architecture spec using Claude Code / Ampcode native parallelism (Task tool). Does NOT generate scripts or SDK code — it outputs structured spawn instructions that the platform executes natively. Never invoked directly by the user. Never launches without a setup-evaluation PASS.

日本語の概要は準備中です。原文の説明を表示しています。

dvy1987/agent-loom32026年8月8日 更新

agent-loom-sync

無料

Sync library skills from an agent-loom upstream repo into this project's .agents/skills while preserving project-local and forked skills. Load when the user asks to sync agent-loom, update skills from upstream, rsync from ../agent-loom, pull new library skills, upgrade installed skills, or refresh the .agents folder without losing custom project skills. Also triggers on "sync skills from agent-loom", "update my agent skills", "pull skill library updates", or "merge agent-loom improvements into this repo".

日本語の概要は準備中です。原文の説明を表示しています。

dvy1987/agent-loom32026年8月8日 更新

agent-observability

無料

Instrument a shipped product's AI agents with tracing and observability so you can see what they did, why outputs happened, and what each run cost. Plain-language primer plus free-tier-first backend selection (Langfuse, Phoenix, LangSmith, Braintrust) and OpenTelemetry/OpenInference instrumentation. Load when the user asks to add observability, add tracing, instrument my agents, see what my agent is doing in production, set up Langfuse or Phoenix or LangSmith, debug why my agent gave a bad answer, or track LLM cost per request. Also fires when agent-system-architecture or setup-evaluation requires an observability plan for an agent-chain product. NOT for tracing the coding agent itself — that is run-trace. Precondition for runtime-learning-loop.

日本語の概要は準備中です。原文の説明を表示しています。

dvy1987/agent-loom32026年8月8日 更新

agent-run-retro

無料

Run a structured retrospective after development-phase runs of your product's agents — interview the owner in plain language about what went well and poorly, draft ranked improvement hypotheses, then design and run small n=1/n=2 experiments with pre-declared success criteria, guardrails, stop conditions, and a cost/ROI kill-switch. Load when the user says how did that run go, retro this run, the agent output was bad, what should we improve, draft hypotheses, run a small experiment, or after repeated dev runs of an agentic system produce uneven quality. Priority: output quality over performance over cost, each with diminishing-returns stops. NOT a product A/B test (experimentation), NOT coding-agent harness repair (harness-evolution), NOT production-scale learning (runtime-learning-loop).

日本語の概要は準備中です。原文の説明を表示しています。

dvy1987/agent-loom32026年8月8日 更新

dvy1987 のスキルをすべて見る

このスキルの問題を報告する