Find agent skills by outcome

Data requirements: [what data this page needs

from where]

│ ├── Component: CTA Button (primary

lg)

opacity

transform

visible: only on keyboard navigation (use focus-visible

not focus)

applies-to: every interactive element (buttons

links

RULE: Transitions apply to: background-color

color

spring: duration-500 cubic-bezier(0.34

1.56

For each breakpoint

state:

6. **Every visual property is stated

never inherited by assumption.**

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

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

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

Body

Data

RIGHT: if data fetch takes >300ms

show skeleton. If fetch fails

4. **Conditionals use explicit if/else

never as needed.**

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

`text-base` (16px) below

If Tailwind: use Tailwind classes as primary

px as annotation

Before writing any specs

follow these formatting rules exactly:

If CSS: use rem as primary

px as annotation

must have a rule. No as appropriate

no roughly

Coding & Debugging

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

Cursor)

**If the reader has to guess

infer

Creative

- Tertiary: You (the designer)

when checking if implementation matches intent

Creative

Relationship to CLAUDE.md: This document assumes a CLAUDE.md design system file already exists in the project root. Handoff Notes reference tokens from CLAUDE.md but don't redefine them. If no CLAUDE.md exists

run the Design System Extraction prompts first.

Coding & Debugging

- Primary: AI coding agents (Claude Code

Cursor

Creative

Description: Generates a design handoff document that serves as direct implementation instructions for AI coding agents. Unlike traditional handoff notes that describe how a design should feel

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