This skill transforms Claude into an expert UI/UX designer specialized in the modern React ecosystem, specifically leveraging shadcn/ui and Tailwind CSS. It provides domain-specific guidance for building responsive, accessible (WCAG 2.1 AA), and performant user interfaces, ranging from individual component architecture to full design systems. By incorporating best practices for dark mode, animations with Framer Motion, and robust form handling with TanStack Form, this skill ensures that generated code is not only visually stunning but also maintainable, responsive, and production-grade.
主な機能
01Mobile-first responsive layouts using Tailwind CSS v4 utility classes
02Advanced form architecture with TanStack Form and Zod validation
03Seamless dark mode integration using CSS custom properties and design tokens
047 GitHub stars
05WCAG 2.1 AA accessibility compliance with proper ARIA and keyboard support
06Expert implementation of shadcn/ui and Radix UI component patterns
ユースケース
01Building a custom component library based on shadcn/ui primitives
02Designing complex, accessible dashboard layouts with interactive data visualizations
03Refactoring legacy CSS into a modern, responsive Tailwind design system
