Skills
.Work. You
Rest

ui-components

Community

Build beautiful, accessible UIs, faster.

Software Engineering#accessibility#React#design system#Tailwind CSS#UI components#TanStack Form#Radix UI
AuthorJasonPaff
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ui-components
Download link: https://github.com/JasonPaff/head-shakers/archive/main.zip#ui-components

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.