Files
OpenCode Agent 2698a1d765 feat: comprehensive repository overhaul and standardization
- Implement internal maintenance suite: repo-maintainer agent and automated audit/sync scripts.
- Add "Opencode Configurator" suite: agent-architect, command-creator, and skill-creator.
- Refactor core commands (/improve, /refactor, /rmslop) to RFC 2119 + XML standards.
- Standardize all agent metadata and structural tagging across the repository.
- Introduce utility commands: /npm for package management and /create-pack for bundling.
- Overhaul README.md and documentation to reflect new workflow patterns.
2026-01-12 18:16:06 +00:00

2.3 KiB

name, description
name description
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

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.