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>
41 lines
1.6 KiB
Markdown
41 lines
1.6 KiB
Markdown
---
|
|
description: Browser-based visual QA of a component or page in Storybook. Checks spacing, alignment, states, responsive behaviour.
|
|
---
|
|
|
|
# Visual QA
|
|
|
|
Open a component or page story in Storybook and perform a visual quality check
|
|
at multiple breakpoints.
|
|
|
|
## Arguments
|
|
|
|
Provide the component name or story path (e.g., `ProvidersStep`, `Button`, `Pages/HomePage`).
|
|
|
|
## Steps
|
|
|
|
1. **Ensure Storybook is running** at `localhost:6006`
|
|
|
|
2. **Navigate to the story**
|
|
Construct URL: `http://localhost:6006/?path=/story/{tier}-{componentname}--default`
|
|
If the component is a page: `pages-{pagename}--default`
|
|
|
|
3. **Check at three breakpoints**
|
|
For each of mobile (375px), tablet (768px), desktop (1280px):
|
|
|
|
- **Spacing:** consistent use of the spacing scale, no visual crowding or excessive gaps
|
|
- **Alignment:** elements aligned to grid, no off-by-one shifts
|
|
- **Typography:** hierarchy readable, line lengths between 45-75 characters, weights distinct
|
|
- **Colour:** all values appear to come from the design system (warm golds, neutral greys, copper accents)
|
|
- **Interactive states** (if applicable): hover, focus, disabled look correct
|
|
- **Overflow:** no content clipping, horizontal scroll, or text truncation issues
|
|
- **Touch targets:** buttons and interactive elements appear at least 44px at mobile
|
|
|
|
4. **Screenshot each breakpoint**
|
|
Capture and present to user for review.
|
|
|
|
5. **Report findings**
|
|
List issues found with severity:
|
|
- **P0:** Broken layout, missing content, inaccessible controls
|
|
- **P1:** Spacing inconsistency, contrast failure, overflow at one breakpoint
|
|
- **P2:** Minor alignment, typography weight, polish items
|