Find agent skills by outcome

- [ ] Layout shifts correctly (no overlap

no orphaned elements)

- [ ] Navigation transforms correctly (hamburger

drawer

- [ ] Typography: correct font

weight

At each breakpoint

check:

Creative

- [ ] Colors match design tokens exactly (check with color picker

not by eye)

- Target browsers: [e.g.

Chrome

For each page/section

verify:

- Target breakpoints: [e.g.

375px

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.

every visual discrepancy

interaction bug

Creative

Visual QA & Cross-Browser Audit

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

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

Coding & Debugging

If no CLAUDE.md exists yet: Tell the prompt to generate a minimal token section at the top of the ha...

but it prevents hardcoded values.

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]

7. When encountering ambiguity

prefer the more explicit interpretation.

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