AI_template/.claude/skills/component/SKILL.md

name, description, disable-model-invocation, argument-hint, context, agent

name	description	disable-model-invocation	argument-hint	context	agent
component	Scaffold a new React component with TypeScript, accessibility, all states (loading, error, empty, success), and variant support via cva.	true	[ComponentName]	fork	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.