Multi-lens Review Pack (4 Skills)

What this is

Four specialized review skills that run in parallel. Each has one narrow focus so it can go deep in its lane.

• /review-a11y: accessibility (WCAG 2.2 AA)
• /review-first-user: first-time user clarity
• /review-copy: voice, microcopy, labels
• /review-edges: loading, empty, error, edge states

Dispatch all four in one turn, each as a subagent, on the same screen. Each returns its own top-5 report. The parent agent merges, deduplicates, and ranks the combined findings for you.

This is the companion template to the Parallel Review System guide.

---

How to install all four

mkdir -p ~/.claude/skills/review-a11y
mkdir -p ~/.claude/skills/review-first-user
mkdir -p ~/.claude/skills/review-copy
mkdir -p ~/.claude/skills/review-edges

touch ~/.claude/skills/review-a11y/SKILL.md
touch ~/.claude/skills/review-first-user/SKILL.md
touch ~/.claude/skills/review-copy/SKILL.md
touch ~/.claude/skills/review-edges/SKILL.md

Then paste each of the four SKILL.md files below into the matching folder and save.

---

How to invoke them in parallel

In Claude Code, paste:

Review [URL or screenshot path] in parallel using four subagents:

1. Subagent A: run /review-a11y
2. Subagent B: run /review-first-user
3. Subagent C: run /review-copy
4. Subagent D: run /review-edges

Each subagent returns its own report. After all four return, produce a
combined report grouped by severity, deduplicating any overlap. Do not drop
any Blocking or High issues from any lane.

Claude dispatches four parallel subtasks. Total time is usually 1–3 minutes.

---

Skill 1: review-a11y

Save as ~/.claude/skills/review-a11y/SKILL.md.

---
name: review-a11y
description: Accessibility review of a screen against WCAG 2.2 AA. Returns the
  top 5 blocking or high-severity accessibility issues with specific fixes and
  the WCAG reference. Use before shipping any customer-facing page.
---

## What to do

I will give you a screen (URL, screenshot, or Figma link). Review it for
accessibility only. Do not flag taste, copy, or polish issues.

## Rubric (WCAG 2.2 AA floor)

### Contrast
- Text: 4.5:1 minimum. Large text (>=18.66px regular or >=14px bold): 3:1.
- UI components and graphical elements: 3:1 minimum against adjacent colors.
- Focus indicators: visible against both the element and its surroundings.

### Keyboard and focus
- Every interactive element reachable with Tab in a logical order.
- Focus indicator visible and meets 3:1 contrast.
- No keyboard traps.
- Skip-link present on long pages.

### Target size
- 44x44 CSS pixels minimum for touch. Smaller allowed only if spaced >=24px.
- Clickable text links exempt from size requirement but must be clearly distinct.

### Semantic HTML and ARIA
- Buttons are <button>. Links are <a>. Do not substitute.
- Headings in document order (no h1 > h3 skip).
- Form inputs have programmatic <label>.
- Landmarks used (header, nav, main, footer).
- ARIA only where HTML is insufficient.

### Labels and alt
- All images: meaningful alt or alt="" for decorative.
- All icons that carry meaning: aria-label or visible text.
- All form inputs: visible label or aria-label.
- All buttons without text: aria-label describing the action.

## Output format

### Issue 1: [Short name]
- **What**: [One sentence]
- **Why it matters**: [Which users are affected and how]
- **Fix**: [Specific change, including suggested color, value, or markup]
- **Severity**: [Blocking / High / Medium]
- **WCAG**: [Reference, e.g. 1.4.3 Contrast Minimum]

Repeat for Issues 2–5.

## Never

- Do not surface visual taste issues. Accessibility only.
- Do not skip this review because the screen "looks fine". Half of accessibility
  is invisible until tested.
- Do not use the phrase "consider making". Prescribe the fix.

## Hard cap

Top 5 issues. Only Blocking or High severity. If fewer than 5 exist, return fewer.

---

Skill 2: review-first-user

Save as ~/.claude/skills/review-first-user/SKILL.md.

---
name: review-first-user
description: First-time user clarity review. Audits the screen from the
  perspective of someone who has never heard of the product. Returns the top 5
  comprehension, navigation, and CTA issues. Use before ship and whenever
  onboarding changes.
---

## What to do

I will give you a screen. Review it as if you have never heard of this product
before. You are a smart adult, but not an insider. No context. No goodwill.

## Rubric

### 3-second test
- Can you tell what this product does in 3 seconds?
- Is the value proposition specific or vague?
- Is the first visual element helpful or decorative?

### Primary action
- What is the single most important action on this screen?
- Is it visually obvious without reading closely?
- Is it competing with anything else?

### Navigation and next step
- If you are lost, is there a clear way back or forward?
- Is the navigation legible? Are the labels specific?
- Is "Home" or a product logo clickable?

### Vocabulary
- Are there any insider words that would confuse an outsider?
- Are product feature names doing too much work?
- Does the copy assume knowledge the first-time user will not have?

### Competing CTAs
- How many CTAs are above the fold?
- Do any of them dilute the primary action?
- Is it obvious which is primary (visual weight, position, color)?

## Output format

### Issue 1: [Short name]
- **What**: [One sentence]
- **Why it matters**: [The first-time user's experience]
- **Fix**: [Specific change]
- **Severity**: [Blocking / High / Medium]

Repeat for Issues 2–5.

## Never

- Do not assume the user has any prior context.
- Do not defend existing choices. Be honest.
- Do not conflate first-time user issues with accessibility. Stay in this lane.

## Hard cap

Top 5 issues. Ruthless ranking.

---

Skill 3: review-copy

Save as ~/.claude/skills/review-copy/SKILL.md.

---
name: review-copy
description: Copy and voice review. Audits buttons, headlines, microcopy, error
  messages, empty states, and labels for specificity, voice consistency, and
  buzzword use. Returns the top 5 copy fixes. Use before ship on anything
  customer-facing.
---

## What to do

I will give you a screen. Review its written content only. Headlines, body
copy, button labels, form labels, error messages, empty-state messages, tooltip
text, and any visible microcopy.

If the project has a brand voice doc (check ./docs/brand-voice.md or
./CLAUDE.md for a voice section), reference it. Otherwise use the general
rubric below.

## Rubric

### Headlines
- Is the headline a specific statement or a vague tease?
- Does it tell the reader what they get, not how it feels?
- Is it under 10 words when possible?

### Buttons
- Do buttons name the action (for example "Save changes", "Create invoice",
  "Delete draft")?
- Do any use empty verbs ("Submit", "Continue", "OK", "Get started", "Learn more")?
- Primary CTA should be specific and verb-led.

### Error messages
- Does the error tell the user what went wrong and what to do next?
- Are errors blaming the user ("Invalid input") or helpful ("Enter an email
  address with an @ symbol")?

### Empty states
- Does the empty state explain what belongs here and how to get started?
- Or is it a shrug ("Nothing to show" with no guidance)?

### Buzzwords
- Flag any of: revolutionize, seamless, unlock, empower, leverage, synergize,
  harness, transformational, game-changing, next-gen, cutting-edge, frictionless,
  disrupt.
- Flag stacked adjectives (e.g. "powerful, simple, intelligent").

### Voice consistency
- Is the voice consistent across the screen?
- Is any section casual while another is formal (without reason)?
- Do product UI and marketing UI speak the same language?

## Output format

### Issue 1: [Short name]
- **What**: [The specific copy line, quoted]
- **Why it matters**: [What the reader is likely to do or feel]
- **Fix**: [A rewrite, in quotes]
- **Severity**: [Blocking / High / Medium]

Repeat for Issues 2–5.

## Never

- Do not flag stylistic preferences as issues. Stay with clarity and
  specificity.
- Do not rewrite more than is necessary. Preserve the writer's voice where
  possible.
- Do not score copy that is outside the screen (meta descriptions, page title
  in browser tab, hidden text).

## Hard cap

Top 5 copy issues. Blocking or High priority. Include the exact rewrite.

---

Skill 4: review-edges

Save as ~/.claude/skills/review-edges/SKILL.md.

---
name: review-edges
description: Edge-state and resilience review. Audits loading, empty, error,
  partial-data, and overflow behavior. Returns the top 5 missing or broken
  states. Use before ship, especially on screens that depend on API data.
---

## What to do

I will give you a screen. Review the non-default states. Most designers ship
the happy path. You are looking at what happens when things go wrong.

If you cannot directly observe the edge states (for example, the URL only shows
the happy path), infer which states should exist and ask whether each is
handled.

## Rubric

### Loading state
- Is there a skeleton or placeholder while data loads?
- Is the loading state indistinguishable from "nothing is happening"?
- Does the layout jump when data arrives?

### Empty state
- Is there explicit copy and a next action when there is no data?
- Is the empty state shown as "nothing to display" with no help?
- Can the user seed the empty state from here?

### Error state
- Is there an explicit error state for failed API calls, missing data, or
  permission errors?
- Does the error tell the user what happened and what to do?
- Is there a retry mechanism?

### Partial data
- What happens when some data loads and some fails?
- Is the screen still usable with half the expected content?

### Long content and overflow
- Does text truncate gracefully with an ellipsis or wrap cleanly?
- Do tables scroll horizontally on mobile?
- Do modals scroll if content exceeds viewport?

### Slow network
- Does the screen degrade gracefully on 3G or weaker?
- Is there any content users can interact with before JS fully loads?

## Output format

### Issue 1: [Short name]
- **What**: [The missing or broken state]
- **Why it matters**: [Customer trust and perception]
- **Fix**: [Specific state to add, with copy and behavior description]
- **Severity**: [Blocking / High / Medium]

Repeat for Issues 2–5.

## Never

- Do not flag happy-path issues. This lane is for states that go wrong only.
- Do not assume every state exists just because it is not visible. If you
  cannot verify, list it as a likely gap and flag accordingly.
- Do not suggest "add loading spinners everywhere". Be specific about where
  and what kind.

## Hard cap

Top 5 issues. Include specific copy or UI for each missing state.

---

How the merge works

After dispatching the four lanes, the parent agent produces a combined report that looks like this:

# Combined review: [screen name]

## Blocking
1. [Issue] — from review-a11y — [fix]
2. [Issue] — from review-edges — [fix]

## High
3. [Issue] — from review-first-user — [fix]
4. [Issue] — from review-copy — [fix]
...

## Medium
[...]

Attributed to the lane that caught each issue. Grouped by severity. Deduplicated. Actionable.

---

Adding more lanes

The pattern extends. For project-specific review needs, add lanes like:

• /review-density (for data-heavy dashboards)
• /review-thumb-zone (for mobile)
• /review-motion (see the Motion Audit Skill)
• /review-brand (for brand compliance)

Three to five lanes is the sweet spot. Beyond that, review time compounds and signal drops.

---

What this pairs with

• Parallel Review System (the guide that explains why and how to dispatch in parallel)
• Your First UX Review Agent (start here if you have not built a review skill before)
• UX Review Agent Starter (the single-skill version, good as a warm-up)
• Motion Audit Skill (a fifth lane for sites with interaction and animation)