mcpField
C
component-engineering

component-engineering

github.com/igorwarzochaDevelopment12298 installsUpdated 38w ago
Repository

About component-engineering

component-engineering is a skill for building and reviewing accessible, composable React components. It guides architecture, semantics, keyboard behavior, and styling through reference specifications and dedicated create and review workflows.

Key features

  1. 01React component creation workflow
  2. 02Component review workflow
  3. 03Taxonomy and semantic element selection
  4. 04Keyboard and accessibility checks
  5. 05Composition and asChild guidance
  6. 06Styling with data attributes and cn

Use cases

  1. 01Creating a reusable React component
  2. 02Auditing a component for accessibility
  3. 03Reviewing component composition and styling

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/igorwarzocha/opencode-workflows --skill component-engineering

After installing, type/component-engineeringin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
accessibility.md
composition.md
distribution.md
patterns.md
styling.md
taxonomy.md

Details

From the project README

Component Engineering Specification

This skill embodies the 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. 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`. ### /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.

Comments

Markdown supported