Find agent skills by outcome

PromptBeginner5 minmarkdownQuality: 26

If you're not using Tailwind: Replace all Tailwind class references in the prompt with your system's...

px values as annotations.

If still ambiguous

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

PromptBeginner5 minmarkdownQuality: 30

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.

Coding & Debugging

After implementation

the AI agent (or human developer) should verify:

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

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

never alert()

(rectangle for text

circle for avatars

- initials: first letter of first + last name

uppercase

nav items: single line

truncate if >16 characters on mobile

Coding & Debugging

- icon: ImageOff from lucide-react

text-gray-400

body text: allow natural wrapping

no truncation

headings: max 2 lines

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

button labels: single line only

max 30 characters