add SKILL

.claude/skills/component/SKILL.md

@@ -0,0 +1,38 @@
+---
+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.