From Toge Design Agent
Use when reviewing a design for quality assurance, auditing visual consistency, checking accessibility, validating design token usage, or evaluating a screen before handoff. Trigger phrases: "design QA", "review this design", "audit the UI", "check the design", "design review", "QA this screen", "is this design ready", "before handoff", "design audit".
How this skill is triggered — by the user, by Claude, or both
Slash command
/toge:design-qaThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill produces a structured **Design QA report** that evaluates a screen or component against four pillars: **Visual Consistency**, **Design Token Compliance**, **Accessibility**, and **Interaction Readiness**. The output is a prioritized list of findings with severity ratings and actionable fixes — not a vague critique.
This skill produces a structured Design QA report that evaluates a screen or component against four pillars: Visual Consistency, Design Token Compliance, Accessibility, and Interaction Readiness. The output is a prioritized list of findings with severity ratings and actionable fixes — not a vague critique.
REQUIRED: Before running the Token Compliance pillar, invoke the toge:design-tokens skill and read the token tables directly. Do not rely on memory — token names change between versions. Validate every finding against the actual token source (guide/toge-design-system/tokens/style.css).
| Pillar | What It Checks |
|---|---|
| Visual Consistency | Alignment, spacing rhythm, typography hierarchy, color usage |
| Token Compliance | Correct use of design tokens (colors, type, spacing, surfaces) |
| Accessibility | Contrast ratios, touch targets, label presence, focus order |
| Interaction Readiness | All states defined, edge cases covered, responsive behavior described |
| Level | Label | Meaning |
|---|---|---|
| 🔴 | Critical | Blocks handoff — must be fixed before development |
| 🟡 | Major | Significant issue that degrades UX or violates standards |
| 🔵 | Minor | Polish or consistency improvement; low risk if deferred |
| ⚪ | Note | Observation or suggestion; no action required |
AskUserQuestion:
"Here are the QA findings. Which issues do you want me to fix? (all / just criticals / pick by number)" Fix the selected issues in the same session. After fixing, confirm what was changed with a brief list. Critical issues block handoff — if the user defers a Critical, note it explicitly in the summary.
skills/learnings/SKILL.md. Pass the Findings Table. The skill extracts qa-recurring and anti-pattern entries from Critical and Major findings and appends or reinforces them in the team-wide learnings file. Report what was captured inline — no separate message needed.Cross-check every item below against
toge:design-tokens— use the actual token tables, not assumptions.
bg-surface-adaptive, bg-brand, etc.) — never a raw hex or primitive (bg-mushroom-100)text-strong, text-base, text-weak, text-{family}-text) — never a raw color or primitiveborder border-base, border-weak, border-strong) — never a raw colorbody, heading-md, label-sm, etc.) — never raw text-{size} utilitiesbrand, success, danger, caution, pending, information, accent) with the right modifier (-subtle, -text, etc.).dark on <html>, no hardcoded light/dark overridesbg-kangkong-500, text-mushroom-600) — exception: ubas palette for charts only[dark only] or [light only] in the Findings Table. Critical and Major findings block handoff regardless of which mode they appear in — a Critical finding in dark mode only still blocks handoff.Produce the QA report in this order:
Screen / Component: [name or URL]
Reviewed by: [reviewer or "Design QA Agent"]
Date: [date]
Findings: X Critical · X Major · X Minor · X Notes
Handoff Status: Ready / Conditionally Ready / Not Ready
Conditionally Ready = only Minor findings remain. Not Ready = one or more Critical or Major findings.
| # | Severity | Pillar | Location | Issue | Fix |
|---|---|---|---|---|---|
| 1 | 🔴 Critical | Accessibility | Login button | Contrast ratio 2.8:1 fails WCAG AA | Change button text to --color-text-on-primary |
| 2 | 🟡 Major | Token Compliance | Card background | Raw hex #F5F5F5 used instead of --surface-secondary | Replace with --surface-secondary token |
| 3 | 🔵 Minor | Visual Consistency | Section headers | Spacing above H2 varies between 16px and 24px | Standardize to spacing-6 (24px) |
After the findings table, list the top 3 highest-impact fixes — the ones that, if addressed, most improve the design's quality or unblock handoff. Keep each recommendation to one sentence with a clear action.
| Issue | Pillar | Likely Fix |
|---|---|---|
| Raw hex colors | Token Compliance | Map to nearest token via toge:design-tokens (surface, semantic family, or text token) |
| Missing hover/focus states | Interaction Readiness | Define all interactive states per component |
| Placeholder-only labels | Accessibility | Add visible <label> element above input |
| Inconsistent spacing | Visual Consistency | Align to 4pt/8pt grid using spacing tokens |
| Low contrast text | Accessibility | Use text-base or text-strong — check contrast via toge:design-tokens bridge values |
| No empty state | Interaction Readiness | Design an empty state with message + CTA |
| Mixed icon sizes | Visual Consistency | Pick one size per context and standardize |
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub micserr/sprout-design-agent --plugin toge