---
name: component
description: Scaffold a new React component with TypeScript, accessibility, all states (loading, error, empty, success), and variant support via cva.
disable-model-invocation: true
argument-hint: "[ComponentName]"
context: fork
agent: frontend-architect
---

# Scaffold Component

Create a production-ready React component named `$ARGUMENTS`.

## Requirements

1. **Read project context first:**
   - Check `docs/frontend/architecture.md` for component conventions
   - Check `RECOMMENDATIONS.md` for locked stack decisions (styling, state management)
   - Look at existing components in `apps/web/` for patterns to follow

2. **Component structure:**
   - TypeScript with explicit props interface extending native HTML attributes
   - Variants via `class-variance-authority` (cva) if multiple visual variants needed
   - All states: loading (`aria-busy`), error, empty, success
   - Forward ref if wrapping native elements

3. **Accessibility (WCAG 2.2 AA):**
   - Semantic HTML elements (not div soup)
   - ARIA attributes where needed (`aria-label`, `aria-describedby`, `aria-live`)
   - Keyboard navigation support
   - Focus management for interactive elements
   - Color contrast compliance

4. **Files to create:**
   - `ComponentName.tsx` — component implementation
   - `ComponentName.test.tsx` — unit tests (Vitest + Testing Library, accessible queries)

5. **Output:** working code, not explanations. Include a brief usage example at the end.