Use when a design is ready for engineering — produce an implementation-ready spec covering layout, tokens, states, responsive behavior, edge cases, motion, and accessibility.
SkillScore77Maintained
Automatic
◆Design & UX Review pack
Last verified 8/23/2026
What it changes
Passed 17 of 22 test cases with the skill, and 13 of 22 without it.
Without skill59%
With skill77%
Checks it passed that the model alone missed
Replaces hex color code #2563eb with design system color token
Replaces raw pixel dimensions with design system spacing tokens
Lists unresolved items in a dedicated open questions section at the end
and 6 more in the full report
6 fixed11 passed either way3 still failing2 broke
Pass-rate lift
+18 pp
Tokens
+39%
Agent turns
0%
Response time
+25%
Model gemini-3.6-flashMeasured 8/23/2026v117 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 6
Prompt
Prepare a design spec for a user profile settings page where API endpoints for avatar uploading and password resets are still under discussion.
What was checked, without and with the skill
Checked
Without skill
With skill
Lists unresolved items in a dedicated open questions section at the end
Missed
Passed
Tags each open question with the specific role responsible for answering it
Missed
Passed
case-08 · gemini-3.6-flash · 8/23/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md35 linessingle file
Design Handoff
Produce a spec that lets the Coding Agent build the design without guessing. If it isn't specified, they'll have to invent — and they'll invent inconsistently.
Principles
Tokens, not values. Reference --space-4 or color-primary-600, not 16px or #2563eb. If a value isn't in the system, flag that as a token gap, not a one-off.
Show every state. Default, hover, active, focus, disabled, loading, error, empty, success. A state you skip becomes a bug.
Explain the why. "This collapses to a sheet on mobile because the action is one-handed" helps the engineer make sensible judgment calls when reality diverges from the spec.
Specify edges, not just the happy path. Long text, no text, slow connection, partial data — pin the behavior.
Sections the spec must cover
Overview. What this screen or component does, who uses it, and the user state when they encounter it.
Layout. Grid, breakpoints, responsive behavior at each breakpoint. Where things move, hide, or change order.
Tokens used. Color, typography, spacing, radius, shadow — listed with their token names and where they apply.
Components. Each component named, with variants, props that matter for behavior, and any composition rules.
States and interactions. Per element, the full state list with the visual change and trigger.
Responsive behavior. What changes at each breakpoint. Not just "stacks on mobile" — what gets prioritized, what gets cut.
Edge cases. Long copy, empty data, zero results, max items, slow connection, error states. The expected behavior for each.
Motion. Per animated element: trigger, what moves, duration, easing. Honor prefers-reduced-motion.
What happens when content overflows (truncate? wrap? scroll?).
Empty state for collections that start empty.
Behavior under slow or failed network.
Keyboard shortcuts and tab order through complex layouts.
Animation choreography across linked elements.
Output
A single document with the sections above. Each section uses tables or short bullets, not prose paragraphs. Tokens and component names cited verbatim. Open questions called out at the bottom, tagged with who needs to answer (engineering, product, content).