skills.rest
xeon826
xeon826COMMUNITY
Explore all skills by this author →
GitHub

component-engineering

Enforce React component standards for accessibility, composition, and styling.

Updated Feb 9, 2025
Search Tags:#accessibility#react#styling#component#composition#engineering
One-click install
npx skills add https://github.com/xeon826/dotfiles --skill component-engineering-xeon826
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-engineering
Source: https://github.com/xeon826/dotfiles/tree/main/opencode/skill/component-engineering
Command: npx skills add https://github.com/xeon826/dotfiles --skill component-engineering-xeon826

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a formal standard for building professional, accessible, and composable React artifacts, ensuring consistency and quality in component development.

Core Features & Use Cases

  • Accessibility: Enforces keyboard navigation, ARIA patterns, and focus management.
  • Composition: Promotes breaking down complex UIs into smaller, manageable sub-components using patterns like asChild.
  • Styling: Integrates with Tailwind CSS, design tokens, and attribute-driven styling for maintainable and themeable UIs.
  • Use Case: When creating a new Button component, ensure it's keyboard navigable, uses semantic HTML, and supports the asChild prop for flexible integration.

Quick Start

Use the component-engineering skill to create a new accessible Button component.

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 with proper keyboard navigation?▼

To build accessible React components, you must enforce formal standards for keyboard navigation, ARIA patterns, and focus management. This ensures semantic HTML usage and compliance with architecture and accessibility best practices.

What is the best way to create composable React UI components?▼

Creating composable React UI components involves breaking down complex interfaces into smaller, manageable sub-components using patterns like `asChild`. This approach ensures flexible integration and maintains professional component architecture.

Does this component engineering standard work with Tailwind CSS and design tokens?▼

Yes, this component engineering standard works with Tailwind CSS and design tokens. It integrates attribute-driven styling to ensure your React artifacts remain maintainable and themeable across different application contexts.

How do I apply attribute-driven styling to React components?▼

Applying attribute-driven styling to React components requires integrating design tokens and Tailwind CSS. This method enforces a formal styling standard, ensuring maintainable and themeable user interfaces without hardcoded values.

Why does my React component fail accessibility compliance checks?▼

Your React component may fail accessibility compliance if it lacks proper ARIA patterns, keyboard maps, or focus management. Enforcing a formal taxonomy and semantic HTML structure resolves these standard compliance failures.

Related Skills

Explore More Software Engineering Skills→
JhabbigJhabbig

design-system-patterns

Design scalable design system foundations with tokens, theming, and component architecture.

Community
Advanced
misty-stepmisty-step
2

a11y

Audit, remediate, and critique Volume's UI for WCAG 2.2 AA compliance.

Official
Advanced
rattamnoonrattamnoon

tailwind-css-patterns

Applies Tailwind CSS utility patterns to React, Vue, and Svelte components.

Community
Intermediate
Mohamedghaly140Mohamedghaly140

modern-accessible-html-jsx

Improve semantic HTML and accessible JSX in web UI components.

Community
Intermediate