Find agent skills by outcome

For each page

provide a complete implementation spec.

visible: only on keyboard navigation (use focus-visible

not focus)

spring: duration-500 cubic-bezier(0.34

1.56

opacity

transform

RULE: Transitions apply to: background-color

color

For each breakpoint

state:

PromptBeginner5 minmarkdownQuality: 31

| 3 | Button | src/components/ui/Button.tsx | Tokens

Typography | Medium | 3 variants × 3 sizes × 6 states |

PromptBeginner5 minmarkdownQuality: 27

| 2 | Typography components | src/components/ui/Text.tsx | Tokens | Low | Heading

Body

6. Every visual property is stated

never inherited by assumption.

4. Conditionals use explicit if/else

never as needed.

Data

RIGHT: if data fetch takes >300ms

show skeleton. If fetch fails

If Tailwind: use Tailwind classes as primary

px as annotation

If CSS: use rem as primary

px as annotation

RIGHT: text-lg (18px) at ≥768px

text-base (16px) below

If the reader has to guess

infer

must have a rule. No as appropriate

no roughly

Before writing any specs

follow these formatting rules exactly:

- Tertiary: You (the designer)

when checking if implementation matches intent

Coding & Debugging

Your output will be read primarily by AI coding agents (Claude Code

Cursor)

Relationship to CLAUDE.md: This document assumes a CLAUDE.md design system file already exists in th...

run the Design System Extraction prompts first.

When to use: After design is finalized

before implementation begins. This replaces Figma handoff

The core philosophy: If an AI reads this document and has to guess anything

the document has failed.

Coding & Debugging

- Primary: AI coding agents (Claude Code

Cursor

Description: Generates a design handoff document that serves as direct implementation instructions f...

this document provides machine-parseable specifications with zero ambiguity. Every value is explicit