Richie
4af684ec8f
- Create AGENTS.md (90 lines) as shared foundation for Claude Code + Antigravity - Slim CLAUDE.md from 113 to 45 lines (Claude-specific only, references AGENTS.md) - Slim GEMINI.md from 58 to 26 lines (Antigravity-specific only, references AGENTS.md) - Add 6 Antigravity workflows in .agent/workflows/ (session-start, preflight, token-sync, visual-qa, build-component, page-review) - Add docs/reference/cross-tool-workflow.md with task routing, quality gates, file ownership, error mitigation - Zero content overlap between CLAUDE.md and GEMINI.md (was ~80%) - File ownership boundaries defined for current phase and future backend work Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
92 lines
2.9 KiB
Markdown
92 lines
2.9 KiB
Markdown
---
|
|
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")
|