skills.rest
codjeremias-cell
codjeremias-cellCOMMUNITY
Explore all skills by this author →
GitHub

web-component

Generates accessible React UI components using headless primitives, design tokens, and CVA variants.

1|Updated Jul 7, 2026
Search Tags:#accessibility#react#design tokens#tailwind#cva#component generator#radix
One-click install
npx skills add https://github.com/codjeremias-cell/Orquestrador-fable --skill web-component-codjeremias-cell
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-component
Source: https://github.com/codjeremias-cell/Orquestrador-fable/tree/main/skills/web-component
Command: npx skills add https://github.com/codjeremias-cell/Orquestrador-fable --skill web-component-codjeremias-cell

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building accessible UI components by hand often leads to broken keyboard navigation, missing ARIA attributes, and hardcoded colors that drift from the design system. This Skill generates React components where accessibility behavior comes from proven headless primitives and styling comes only from design tokens. ## Core Features & Use Cases - Headless primitive integration: Keyboard, focus, and ARIA logic come from Radix, Base UI, or React Aria instead of hand-written code. - Token-only styling with CVA variants: All colors and sizes use Tailwind v4 design tokens, with variants declared via CVA (e.g., default/destructive/ghost, sm/md/lg). - Invariant accessibility boundary: Enforces semantic elements, prop spreading, ref forwarding, visible focus, contrast ratios, and WCAG 2.2 target sizes. - Use Case: Ask for an accessible Button or Dialog component and receive a <Component>.tsx file built on a Radix primitive with CVA variants, verified against keyboard navigation, axe, and contrast checks. ## Quick Start Create an accessible Button component with default, destructive, and ghost variants in small, medium, and large sizes using Radix and design tokens.

Frequently Asked Questions about web-component

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

FAQPage Schema
How do I create an accessible React component with Radix and CVA?▼

Combine a Radix headless primitive for keyboard, focus, and ARIA behavior with CVA for variant definitions and Tailwind utility classes from design tokens for styling. Always spread props and forward the ref so aria attributes and event handlers reach the real DOM node.

What is the difference between Radix, Base UI, and React Aria for components?▼

Radix covers overlays, menus, and selects with strong defaults; React Aria handles richer interaction cases; Base UI is an alternative headless library. All three provide keyboard, focus, and ARIA logic so you never hand-write that behavior.

Does this approach work with React 19 and forwardRef?▼

Yes. In React 19, ref is passed as a regular prop and forwardRef is no longer necessary, since React.ComponentProps already includes it. For React 18, continue using forwardRef to ensure the ref reaches the underlying DOM node.

Can I style shadcn components with custom hex colors?▼

No. Styling must come exclusively from design tokens mapped to Tailwind v4 utilities, such as bg-primary or text-primary-foreground. Hardcoded hex or rgb values break the token contract and are rejected by the skill's guardrails.

When should I not use this component generator?▼

Do not use it to define design tokens themselves, which belongs to a token generation step, or to handle data fetching and server state, which belongs to a data layer. It only produces the visual shell plus accessibility behavior.

Related Skills

Explore More Software Engineering Skills→
raudyagdelraudyagdel

tailwind-patterns

Configure Tailwind v4 CSS-first workflows with @theme directives and container queries.

Community
Intermediate
exceptionlessexceptionless
2.5k

tanstack-query

Manage server state and data fetching in Svelte with TanStack Query.

Official
Intermediate
Community-AccessCommunity-Access
387

Playwright Accessibility Testing

Automate web accessibility testing with Playwright and Axe-Core to report WCAG violations.

Official
Advanced
tranhieutttranhieutt
70

radix-ui-design-system

Build accessible Radix UI design systems with headless primitives.

Community
Advanced