---
description: Review and tweak an existing page — visual QA, spacing adjustments, copy refinement, responsive check. Current phase focus.
---

# Page Review

Review an existing page component for visual quality, consistency, and polish.
This is the primary workflow for the current project phase (tweaking and
finalising pages rather than building from scratch).

## Arguments

Provide the page name (e.g., `ProvidersStep`, `HomePage`, `CoffinsStep`).

## Steps

### 1. Gather context

- Read the page source: `src/components/pages/{PageName}/{PageName}.tsx`
- Read its stories: `src/components/pages/{PageName}/{PageName}.stories.tsx`
- Check `docs/memory/session-log.md` for recent changes to this page
- Check `docs/memory/decisions-log.md` for relevant design decisions

### 2. Open in Storybook

Navigate to `localhost:6006` and open the page's default story.

### 3. Review checklist

At each breakpoint (375px mobile, 768px tablet, 1280px desktop):

**Visual hierarchy**
- Heading sizes follow a clear progression (display → h1 → h2 → body)
- Primary action is visually prominent
- Whitespace groups related content, separates unrelated

**Spacing**
- All spacing uses `theme.spacing()` — no magic numbers
- Consistent gaps between sections (typically spacing(4) or spacing(6))
- No visual crowding; no excessive empty space

**Typography**
- Body text line length between 45-75 characters
- Line heights readable (1.5 for body, tighter for headings)
- Font weights create clear distinction between labels and content

**Colour**
- All colours from theme/tokens — no raw hex in source
- Contrast meets WCAG AA (4.5:1 normal text, 3:1 large text)
- Error states use copper (#B0610F), not red

**Responsive**
- Content reflows cleanly between breakpoints
- No horizontal overflow or content clipping
- Touch targets at least 44px on mobile
- Images and cards scale proportionally

**Copy**
- Warm but not gushy — understated empathy
- Labels are clear, unambiguous, sentence case
- CTAs use action verbs ("Continue", "Select", "Save")
- No jargon or funeral-industry terms without context

**Interactive states**
- Hover, focus, disabled visible on all controls
- Focus indicators: 2px solid, 2px offset, visible on `:focus-visible`
- Disabled: reduced opacity, no pointer events

**Edge cases**
- Long content handled (truncation, scroll, or wrap)
- Empty/minimal content doesn't break layout
- Loading states present where data is async

### 4. Make targeted fixes

For issues found:
- Make small, focused changes (spacing, copy, alignment)
- Do NOT restructure the page — this is polish, not redesign
- Reference design decisions from decisions-log.md when relevant

### 5. Before/after comparison

- Screenshot the page at each breakpoint BEFORE and AFTER changes
- Present both to the user for approval

### 6. Report

Summarise:
- Changes made (with file and line references)
- Remaining issues (with severity P0/P1/P2)
- Suggested next steps (e.g., "run fa-preflight before committing")
