skills.rest
justinlevinedotme
justinlevinedotmeCOMMUNITY
Explore all skills by this author →
GitHub

component-engineering

Automates creation and evaluation of accessible, composable React components.

7|2|Updated Jan 18, 2026
Search Tags:#architecture#accessibility#frontend#react#component#composition
One-click install
npx skills add https://github.com/justinlevinedotme/jalco-opencode --skill component-engineering-justinlevinedotme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-engineering
Source: https://github.com/justinlevinedotme/jalco-opencode/tree/main/opencode/.config/opencode/skills/component-engineering
Command: npx skills add https://github.com/justinlevinedotme/jalco-opencode --skill component-engineering-justinlevinedotme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Formal standards for building accessible, composable React components to improve maintainability and consistency across UI projects.

Core Features & Use Cases

  • Enforce accessibility, composition, and styling guidelines for React components.
  • Audit existing components for accessibility and composition and provide actionable improvements.
  • Create new components following an architecture-first workflow with references to architecture, accessibility, and styling guidelines to ensure consistency.

Quick Start

Describe the component you want to build, and have it generate an accessible, composable React implementation plan.

Frequently Asked Questions about component-engineering

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible React components that follow composition guidelines?▼

To build accessible React components, you can automate the creation and evaluation process using an architecture-first workflow that enforces data-slot values and keyboard interactions. This ensures formal standards for accessibility, composition, and styling are consistently applied to your UI projects.

Can I audit existing React components for accessibility and composition issues?▼

Yes, you can audit existing React components for accessibility and composition issues. The process evaluates your current code against formal standards and provides actionable improvements to enhance maintainability and consistency across your UI projects.

What is an architecture-first workflow for React component creation?▼

An architecture-first workflow for React component creation references architecture, accessibility, and styling guidelines before writing code. It enforces data-slot values and keyboard interactions during generation to ensure the resulting component is composable and accessible.

How do I enforce keyboard interactions and data-slot values in my React code reviews?▼

You can enforce keyboard interactions and data-slot values during React code reviews by applying automated evaluation standards. This ensures your components adhere to formal accessibility and composition guidelines, improving overall UI maintainability.

Does this approach to component engineering work for design audits in React projects?▼

Yes, this component engineering approach supports design audits within React projects. It evaluates your UI architecture against accessibility and composition guidelines, providing actionable improvements to maintain consistency across your interfaces.

Related Skills

Explore More Software Engineering Skills→
mokbhaimokbhai
1

astro-developer

Initialize and deploy Astro projects with Tailwind and islands architecture.

Community
Advanced
Yoriichi-DangYoriichi-Dang

web-component-design

Guide design of reusable UI components across React, Vue, and Svelte.

Community
Basic
samjhechtsamjhecht
4

frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

Community
Advanced
Dzakiamriz22Dzakiamriz22
1

shadcn

Standardize shadcn/ui component implementation with TailwindCSS and CSS variables.

Community
Intermediate