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>
1.6 KiB
1.6 KiB
description
| 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
-
Ensure Storybook is running at
localhost:6006 -
Navigate to the story Construct URL:
http://localhost:6006/?path=/story/{tier}-{componentname}--defaultIf the component is a page:pages-{pagename}--default -
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
-
Screenshot each breakpoint Capture and present to user for review.
-
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