Find agent skills by outcome

6. After implementing each component

run through its state matrix

a component

that is a gap in the spec — flag it

is not in CLAUDE.md

flag it and use the fallback value provided.

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

not `gap-5`.

Coding & Debugging

After implementation

the AI agent (or human developer) should verify:

□ Focus-visible ring appears on keyboard nav

not on mouse click

□ Every state (hover

active

date other year: show Mar 13

2025

date this year: show Mar 13 not Mar 13

2026

list with 500 items: paginate at 20

show Load more button

Form validation: inline per-field (see flow specs)

never alert()

username 50 characters: truncate at 20 in nav

full in profile

price $999

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

- initials: first letter of first + last name

uppercase

(rectangle for text

circle for avatars

Coding & Debugging

- icon: ImageOff from lucide-react

text-gray-400

body text: allow natural wrapping

no truncation

nav items: single line

truncate if >16 characters on mobile

button labels: single line only

max 30 characters

grid items: sizes=(max-width: 768px) 100vw

(max-width: 1024px) 50vw

hero: sizes=(max-width: 1024px) 100vw

50vw

headings: max 2 lines

then truncate with text-ellipsis (add title attr for full text)

if visual size < 44px

use invisible padding to reach 44px

<768px: section-padding: py-10

container-padding: px-4