Component Engineering
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
igorwarzocha Component Engineering by igorwarzocha · c184d14
npx skillmds@latest add igorwarzocha/component-engineering File contents
---name: component-engineeringdescription: 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---
# Component Engineering Specification
<overview>
This skill embodies the formal standard for building professional, accessible, and composable React artifacts.
</overview>
<context name="Knowledge Deep-Dives">
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.
</context>
<workflow>
<phase name="review">
### /component-review [file]
Strictly audit the file against the specification pillars.
1. You MUST read all reference files in the `references/` directory before proceeding.
2. Classify the artifact using `taxonomy.md`.
3. Evaluate **Accessibility**: You MUST check keyboard support and semantic HTML against `accessibility.md`.
4. Evaluate **Architecture**: You MUST check for monolithic patterns vs composition against `composition.md`.
5. Evaluate **Styling**: Look for `data-slot` usage and prop spreading against `styling.md`.
</phase>
<phase name="create">
### /component-create [name] [intent]
Build a new artifact following the "Architecture First" workflow.
1. You MUST read the relevant `references/*.md` files to select the correct patterns.
2. Choose the **Taxonomy** type.
3. Select the base **Semantic Element** or **Headless Primitive**.
4. You MUST implement the **Keyboard Map**.
5. You MUST apply **asChild** support if the component is an activator/trigger.
6. You MUST expose **Data Attributes** (`data-state`, `data-slot`).
7. Use the `cn` utility for class merging.
</phase>
</workflow>
igorwarzocha/opencode-workflows/tree/main/agents/component-engineer/.opencode/skill/component-engineering commit c184d141f1
Frequently asked questions
Run npx skillmds@latest add igorwarzocha/component-engineering in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
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 It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
igorwarzocha (@igorwarzocha) published this skill. Their other Agent Skills are listed on their SkillMD profile.