| 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. Explicit invocation only (/component-create, /component-review, or naming this skill). Generic component builds and reviews route to design-engineer-bible (dxb) instead.
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:
- Architecture:
composition.md - asChild, Taxonomy, Composition
- Accessibility:
accessibility.md - Keyboard maps, ARIA, Focus management
- Styling:
styling.md - cn utility, Data attributes, CVA, Design tokens
/component-review [file]
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
/component-create [name] [intent]
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
