ui-styling

design

ui-styling is a Claude Code skill that builds beautiful, accessible user interfaces by combining shadcn/ui components (built on Radix UI and Tailwind CSS), utility-first Tailwind styling, and canvas-based visual design. The skill covers three layers: a shadcn/ui component layer with a copy-paste distribution model and TypeScript-first type safety; a Tailwind CSS layer for mobile-first responsive layouts and consistent design tokens; and a canvas layer for sophisticated visual compositions. It handles dialogs, forms, data tables, dropdowns, command palettes, dark mode via next-themes, and full design systems using CSS variables. Six reference files are included covering components, theming, accessibility (Radix UI ARIA patterns, keyboard navigation), utilities, responsive design, and customization. Works with Next.js, Vite, Remix, and Astro projects that require consistent styling and rapid prototyping.