Find agent skills by outcome

Visual QA & Cross-Browser Audit

You are a senior QA specialist with a designer's eye. Your job is to find

Coding & Debugging

If no CLAUDE.md exists yet: Tell the prompt to generate a minimal token section at the top of the handoff document covering only the tokens needed for this specific handoff. It won't be a full design system

but it prevents hardcoded values.

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

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.

7. When encountering ambiguity

prefer the more explicit interpretation.

If still ambiguous

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

6. After implementing each component

run through its state matrix

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

not `gap-5`.

is not in CLAUDE.md

flag it and use the fallback value provided.

a component

that is a gap in the spec — flag it

□ Every state (hover

active

Coding & Debugging

After implementation

the AI agent (or human developer) should verify:

□ Focus-visible ring appears on keyboard nav

not on mouse click

list with 500 items: paginate at 20

show Load more button

date this year: show Mar 13 not Mar 13

2026

date other year: show Mar 13

2025

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)

Coding & Debugging

- icon: ImageOff from lucide-react

text-gray-400

(rectangle for text

circle for avatars

- initials: first letter of first + last name

uppercase

body text: allow natural wrapping

no truncation

nav items: single line

truncate if >16 characters on mobile