How do I install the Component Engineering skill?

Run npx skillmds@latest add jal-co/component-engineering-2 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.

Is Component Engineering safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Component Engineering?

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.

Is Component Engineering free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Component Engineering?

jal-co (@jal-co) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Component Engineering by jal-co — Agent Skill

Name: Component Engineering
Author: jal-co

Component Engineering

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

jal-co Updated Sep 22, 2026

File contents

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

---name: component-engineering-2description: 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---<overview>Formal standard for building professional, accessible, and composable React artifacts.</overview><constraints>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</constraints><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 proceeding2. 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 patterns2. Choose the **Taxonomy** type3. 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/trigger6. You MUST expose **Data Attributes** (`data-state`, `data-slot`)7. Use the `cn` utility for class merging</phase></workflow>

Frequently asked questions