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
- Installs
- 98
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/igorwarzocha/opencode-workflows --skill component-engineering- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads component-engineering automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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>FAQ
What does the component-engineering skill do?
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
How do I install component-engineering?
Run npx skills add https://github.com/igorwarzocha/opencode-workflows --skill component-engineering in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/component-engineering/ (personal) or .claude/skills/component-engineering/ (project).
Which AI agents can use component-engineering?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is component-engineering safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains component-engineering?
It is published by igorwarzocha in igorwarzocha/opencode-workflows. It has 98 recorded installs.
More from igorwarzocha/opencode-workflows
powerpoint
igorwarzocha/opencode-workflows
Handle PowerPoint (.pptx) creation, design, and analysis. Use for pitch decks, status updates, and visual storytelling. Use proactively when precise layout positioning and design principles are needed. Examples: - user: "Create a 10-slide deck for the board meeting" - use design principles + html2pptx - user: "Convert this report into a presentation" - extract text and map to template - user: "Audit this deck for layout issues" - generate thumbnail grid for inspection
word
igorwarzocha/opencode-workflows
Handle Word document (.docx) creation, editing, and analysis with high-fidelity visual review. Use for professional reports, legal documents, and tracked changes. Use proactively when quality and precise formatting are critical. Examples: - user: "Create a professional report in Word" - use python-docx with render loops - user: "Draft a legal contract with redlines" - use ooxml redlining workflow - user: "Extract text from this DOCX while preserving structure" - use pandoc markdown conversion
security-nextjs
igorwarzocha/opencode-workflows
Review Next.js security audit patterns for App Router and Server Actions. Use for auditing NEXTPUBLIC exposure, Server Action auth, and middleware matchers. Use proactively when reviewing Next.js apps. Examples: - user: "Scan Next.js env vars" → find leaked secrets with NEXTPUBLIC prefix - user: "Audit Server Actions" → check for missing auth and input validation - user: "Review Next.js middleware" → verify matcher coverage for protected routes - user: "Check Next.js API routes" → verify auth in app/api and pages/api - user: "Secure Next.js headers" → audit next.config.js for security headers
create-opencode-plugin
igorwarzocha/opencode-workflows
Create OpenCode plugins using the @opencode-ai/plugin SDK. Use for building custom tools, event hooks, auth providers, or tool execution interception. Use proactively when developing new plugins in .opencode/plugin/ or /.config/opencode/plugin/. Examples: - user: "Create a plugin to block dangerous commands" → implement tool execution before hook with blocking logic - user: "Add a custom tool for jira" → design tool schema and implementation using SDK context - user: "Show toast on file edit" → react to file edit events and display status message - user: "Build a custom auth provider" → implement auth flow for new model provider - user: "Intercept git commits" → add hook to validate commit messages before execution
agent-architect
igorwarzocha/opencode-workflows
Open the skill to read its SKILL.md instructions.
opencode-config
igorwarzocha/opencode-workflows
Edit opencode.json, AGENTS.md, and config files. Use proactively for provider setup, permission changes, model config, formatter rules, or environment variables. Examples: - user: "Add Anthropic as a provider" → edit opencode.json providers, add API key baseEnv var, verify with opencode run test - user: "Restrict this agent's permissions" → add permission block to agent config, set deny/allow for tools/fileAccess - user: "Set GPT-5 as default model" → edit global or agent-level model preference, verify model name format - user: "Disable gofmt formatter" → edit formatters section, set languages.gofmt.enabled = false
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.