Find agent skills by outcome

For each metric

explain:

- Current known issues: [optional — slow on mobile

images are huge]

- Medium: Noticeable on close inspection

doesn't block usage

Lighthouse & Performance Optimization

You are a web performance specialist. Analyze this site and provide

- Low: Minor polish issue

nice-to-have fix,FALSE,TEXT,gokbeyinac

- [ ] Images load progressively (blur-up or skeleton

not pop-in)

- [ ] Special characters in user input (accents

emojis

- [ ] Color contrast ≥ 4.5:1 for body text

≥ 3:1 for large text

- [ ] Very long text in headlines

buttons

- [ ] Animations are smooth (no jank

no layout shift)

- [ ] Layout shifts correctly (no overlap

no orphaned elements)

- [ ] Navigation transforms correctly (hamburger

drawer

At each breakpoint

check:

For each page/section

verify:

- [ ] Typography: correct font

weight

- Target browsers: [e.g.

Chrome

- Target breakpoints: [e.g.

375px

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.

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 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 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 still ambiguous

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

6. After implementing each component

run through its state matrix