ui-component-workflow

What problem does it solve?

This Skill streamlines the creation of high-quality, accessible, and animated React UI components, eliminating the time-consuming and error-prone process of building them from scratch. It ensures consistency with the design system and compliance with accessibility standards.

Core Features & Use Cases

• Automated Component Generation: Creates production-ready React components with TypeScript, TailwindCSS, Framer Motion, and Radix UI.
• Accessibility Compliance: Ensures WCAG 2.1 AA standards, including keyboard navigation, focus indicators, and ARIA labels.
• Responsive & Dark Mode: Built-in support for adaptive layouts across devices and seamless dark mode switching.
• Use Case: When you need a new dialog component, Claude generates the boilerplate with Radix UI for accessibility, TailwindCSS for styling, and Framer Motion for smooth animations, saving you hours of setup and ensuring compliance.

Quick Start

Example: Basic Card component with animation

import { motion } from 'framer-motion'; import { cn } from '@/lib/utils';

export const Card = ({ children, className, ...props }) => { return ( <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} className={cn('rounded-lg p-6 bg-card', className)} {...props} > {children} </motion.div> ); };