39 lines
1.4 KiB
Markdown
39 lines
1.4 KiB
Markdown
---
|
|
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.
|