ui-components

Generate UI components with Radix UI, CVA, and TanStack Form conventions.

2|Updated Aug 20, 2025

Search Tags:#accessibility #React #design system #Tailwind CSS #UI components #TanStack Form #Radix UI

One-click install

npx skills add https://github.com/JasonPaff/head-shakers --skill ui-components

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: ui-components
Source: https://github.com/JasonPaff/head-shakers/tree/main/.claude/skills/ui-components
Command: npx skills add https://github.com/JasonPaff/head-shakers --skill ui-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill standardizes UI component development, ensuring consistency in design, accessibility, and integration with Radix UI and TanStack Form, reducing boilerplate and improving developer experience.

Core Features & Use Cases

Consistent Component Structure: Enforces named exports, ComponentProps typing, data-slot and data-testid attributes, and is prefix for boolean props.
Radix UI & CVA Integration: Guides the use of Radix UI primitives for accessible components and CVA for managing component variants.
TanStack Form Integration: Ensures forms are built with useAppForm, form.AppField, and form.SubmitButton for consistent validation and submission handling.
Use Case: When creating a new Button component, this Skill ensures it uses cva for variants, Slot for asChild prop, includes data-slot and data-testid attributes, and adheres to accessibility best practices.

Quick Start

Generate a new UI button component using Radix UI primitives and CVA for variants, ensuring it includes data-slot and data-testid attributes for testing.