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

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

**Component to review:** $ARGUMENTS

**Instructions:**
1. Read `docs/conventions/component-conventions.md` for the rules
2. Read `docs/conventions/token-conventions.md` for token usage rules
3. Read the component source file in `src/components/`
4. Read the component's Storybook stories

**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

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