Find agent skills by outcome

Data requirements: [what data this page needs

from where]

│ ├── Component: CTA Button (primary

lg)

applies-to: every interactive element (buttons

links

opacity

transform

visible: only on keyboard navigation (use focus-visible

not focus)

For each breakpoint

state:

RULE: Transitions apply to: background-color

color

spring: duration-500 cubic-bezier(0.34

1.56

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

Body

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 |

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 CSS: use rem as primary

px as annotation

Before writing any specs

follow these formatting rules exactly:

If Tailwind: use Tailwind classes as primary

px as annotation

**If the reader has to guess

infer

must have a rule. No as appropriate

no roughly

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.

- Tertiary: You (the designer)

when checking if implementation matches intent

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

the document has failed.

When to use: After design is finalized

before implementation begins. This replaces Figma handoff

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