Find agent skills by outcome

At each breakpoint

check:

- [ ] Navigation transforms correctly (hamburger

drawer

- [ ] Layout shifts correctly (no overlap

no orphaned elements)

- [ ] Typography: correct font

weight

For each page/section

verify:

- Target breakpoints: [e.g.

375px

- Target browsers: [e.g.

Chrome

every visual discrepancy

interaction bug

For multi-page projects: Run the prompt once per page

but include Section 1 (Implementation Map) and Section 2 (Global Specs) only in the first run. Subsequent pages reference the same globals.

If you're not using Tailwind: Replace all Tailwind class references in the prompt with your system's equivalents. The structure stays the same — only the value format changes. Tell Claude: Use CSS custom properties as primary

px values as annotations.

If still ambiguous

add a TODO comment: // HANDOFF-AMBIGUITY: [description]

If you're handing off to a specific AI tool: Add tool-specific notes. For example

for Cursor: Generate implementation as step-by-step edits to existing files

a component

that is a gap in the spec — flag it

7. When encountering ambiguity

prefer the more explicit interpretation.

6. After implementing each component

run through its state matrix

is not in CLAUDE.md

flag it and use the fallback value provided.

□ Focus-visible ring appears on keyboard nav

not on mouse click

with close enough values. `gap-6` means `gap-6`

not `gap-5`.

date other year: show Mar 13

2025

□ Every state (hover

active

price $999

999.99: ensure layout doesn't break (test with formatted number)

date this year: show Mar 13 not Mar 13

2026

list with 500 items: paginate at 20

show Load more button

username 50 characters: truncate at 20 in nav

full in profile