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>
2.9 KiB
2.9 KiB
description
| 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.mdfor recent changes to this page - Check
docs/memory/decisions-log.mdfor 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")