mirror of https://github.com/IgorWarzocha/Opencode-Workflows.git synced 2026-09-14 16:22:53 +08:00

Files

T

Howaboua c4961fa329 Add image to Component Engineer README

Added an image to the README for better visualization.

2026-01-11 14:45:45 +00:00

1.9 KiB

Raw Permalink Blame History

Component Engineer Package

A comprehensive Opencode package based on the formal specification for modern React components. It provides agents, commands, and skills for building and reviewing high-quality UI artifacts.

Architecture

1. Agent: `component-engineer`

A rigorous architect strictly limited to the component-engineering skill. It handles complex refactoring, a11y audits, and spec-compliant creation.

2. Commands

/component-review [file]: Detailed audit against a11y, composition, and styling pillars.
/component-create [name] [intent]: Spec-driven generation of new components/blocks.

3. Skill: `component-engineering`

A deep knowledge base divided into specialized references:

accessibility.md: Semantic HTML, focus management, ARIA.
composition.md: Slot patterns, polymorphism, compound components.
styling.md: Data attributes, design tokens, Tailwind.
taxonomy.md: Artifact classification (Primitive, Component, Block, etc.).
distribution.md: Registry vs NPM and source ownership.

Installation

Copy to your global ~/.config/opencode/ directory or your working folder.

Key Principles

Semantic HTML First: Never use a div when a button is needed.
asChild (Slot Pattern): Composable APIs that eliminate wrapper hell.
Data-Driven Styling: Use data-state and data-slot for clean, stable CSS hooks.
Artifact Taxonomy: Clear classification flow for every UI element.

1.9 KiB Raw Permalink Blame History