Parsons/.claude/skills/review-component/SKILL.md at 87249b6d9b629cdb7d321e745de42e09b1e83309

Files

Richie aa7cdeecf0 Add workflow infrastructure — ESLint, Prettier, Husky, Vitest, 7 new skills

Phase 1: Session log archived (1096→91 lines), D031 token access convention
Phase 2: ESLint v9 + Prettier + jsx-a11y, initial config and lint fixes
Phase 3: 7 new skills (polish, harden, normalize, clarify, typeset, quieter, adapt)
         + Vercel reference docs, updated audit/review-component refs
Phase 4: Husky + lint-staged pre-commit hooks, preflight updated to 8 checks
Phase 5: Vitest + Testing Library + /write-tests skill

- Badge.tsx colour maps unified to CSS variables (D031)
- 5 empty interface→type alias fixes (Switch, Radio, Divider, IconButton, Link)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-27 16:41:57 +11:00

2.9 KiB

Raw Blame History

name, description, argument-hint

name	description	argument-hint
review-component	Review a component against design system conventions	[ComponentName]

Review a component against FA Design System conventions and report pass/fail for each check.

Component to review: $ARGUMENTS

Instructions:

Read docs/conventions/component-conventions.md for the rules
Read docs/conventions/token-conventions.md for token usage rules
Read the component source file in src/components/
Read the component's Storybook stories
Reference docs/reference/vercel/react-best-practices.md for React performance patterns (optional, for deeper code quality review)

Check each of these and report pass/fail:

Code quality

Component uses TypeScript with proper types
Props interface exported with JSDoc on every prop
Uses React.forwardRef for interactive elements
Accepts and forwards sx prop
Uses shouldForwardProp for custom props on styled components

Theme compliance

NO hardcoded colours — all from theme.palette.*
NO hardcoded spacing — all from theme.spacing()
NO hardcoded typography — all from theme.typography.*
NO hardcoded shadows — all from theme.shadows
NO hardcoded border radius — all from theme.shape.*

Accessibility

Minimum 44px touch target on mobile
Visible focus indicator (focus-visible)
Appropriate ARIA attributes
Disabled state uses aria-disabled
Colour contrast meets WCAG 2.1 AA

Storybook coverage

Default story
All variants story
All sizes story (if applicable)
Disabled state
Loading state (if applicable)
Long content / overflow
autodocs tag present

Interactive states (ref: docs/reference/impeccable/interaction-design.md)

Default (resting) state is styled
Hover state provides visual feedback (not just cursor change)
Focus-visible state is distinct from hover (keyboard users never see hover)
Active/pressed state feels responsive
Disabled state is visually diminished but still distinguishable
Transitions use 150ms ease-in-out (FA convention)

Design anti-patterns (ref: docs/reference/impeccable/frontend-design-skill.md)

No grey text on coloured backgrounds (use a shade of the background colour instead)
No cards nested inside cards (flatten hierarchy with spacing/typography)
No identical card grids with zero variation (vary content, size, or emphasis)
No bounce/elastic easing (use ease-out-quart or ease-in-out)
Not every button is primary (use variant hierarchy: contained > soft > outlined > text)
No redundant copy (headings don't restate content below them)
No glassmorphism/blur used purely as decoration
Whitespace is intentional, not leftover

Report format: List each check with pass/fail and specific issues found. End with a summary and recommended fixes.

2.9 KiB Raw Blame History