Overview
The Design Review workflow automates UI quality checks that designers and frontend engineers otherwise do by hand. Two review agents: quality and patterns: scan your code and report findings with confidence scores.
When to Run
Run a design review when your PR touches:
- Component libraries or shared UI components
- Layout, spacing, or typography changes
- Accessibility-sensitive elements (forms, modals, navigation)
- Design system tokens or theme values
How It Works
1. Install the workflow
npx skills add mclaude95/eq-foundry -s eq-review-quality -s eq-review-patterns2. Run the review
From your feature branch:
/eq-review-qualityThis scans for accessibility violations, test quality gaps, performance patterns, and defensive data handling. Findings below 70% confidence are excluded.
3. Check patterns separately
/eq-review-patternsThis checks design system conventions, prop field coverage, and route segment file coverage. The convention scanner runs first (fast, deterministic), then the LLM-based review follows.
4. Add Storybook coverage (optional)
If your component has interactive states:
/eq-storybook-test src/components/YourComponent.tsxThis determines whether a story is needed and what belongs in play() vs .test.tsx.
What Gets Checked
| Area | What It Catches |
|---|---|
| Accessibility | Missing ARIA labels, insufficient contrast, keyboard traps |
| Test quality | Shallow assertions, missing edge cases, untested states |
| Performance | Unnecessary re-renders, large bundle imports, missing lazy loading |
| Pattern compliance | Design system drift, inconsistent spacing, prop mismatches |
| Visual regression | Interactive state coverage via Storybook play functions |
Tips
- Run quality and patterns separately for faster feedback during development
- Use the full
/eq-reviewfor a combined pass before opening a PR - Both skills flag issues but never auto-fix