component-engineering - SKILL.md Agent Skill

name: component-engineering description: |- Apply the formal standard for React component engineering focusing on accessibility, composition, and styling. Use for building professional, composable React artifacts. Use proactively when creating or reviewing React components. Examples: - user: "/component-create Button trigger" → build accessible button with asChild and keyboard map - user: "/component-review src/components/Input.tsx" → audit for accessibility and composition compliance - user: "Build a responsive slider" → select taxonomy type and implement with data attributes - user: "Review my layout component" → check for monolithic patterns vs composition

Formal standard for building professional, accessible, and composable React artifacts. You MUST read these reference files to perform your duties:

Strictly audit the file against the specification pillars.

You MUST read all reference files in the references/ directory before proceeding
Classify the artifact using taxonomy.md
Evaluate Accessibility: You MUST check keyboard support and semantic HTML against accessibility.md
Evaluate Architecture: You MUST check for monolithic patterns vs composition against composition.md
Evaluate Styling: Look for data-slot usage and prop spreading against styling.md

Build a new artifact following the "Architecture First" workflow.

You MUST read the relevant references/*.md files to select the correct patterns
Choose the Taxonomy type
Select the base Semantic Element or Headless Primitive
You MUST implement the Keyboard Map
You MUST apply asChild support if the component is an activator/trigger
You MUST expose Data Attributes (data-state, data-slot)
Use the cn utility for class merging