Ui Design System
This is a comprehensive reference for building React UIs with the modern TailwindCSS, Radix UI, and shadcn/ui stack. It covers all three layers: Tailwind for utility-first styling, Radix for accessible primitives, and shadcn/ui for pre-built components you copy into your codebase. The skill includes detailed guidance on when to use each layer, accessibility-first patterns, design token systems with CSS variables, and mobile-first responsive strategies. What stands out is the clear architecture hierarchy and practical decision framework. If you're building component libraries or implementing shadcn/ui components, this gives you the opinionated structure and best practices to avoid common pitfalls with dark mode, theming, and accessible component composition.
- skills.sh installs
- 3.2K
- GitHub stars
- 11
- last updated
- Aug 21, 2026
Install
$ npx -y skills add samhvw8/dot-claude --skill ui-design-system --agent claude-codeInstalls into .claude/skills of the current project.
Files
UI/UX Design & Development Expert
Comprehensive UI/UX design, review, and improvement for modern web applications.
Production-ready implementations with TailwindCSS + Radix UI + shadcn/ui and modern React patterns.
Stack Architecture
The Three Pillars
Layer 1: TailwindCSS (Styling Foundation)
- Utility-first CSS framework with build-time generation
- Zero runtime overhead, minimal production bundles
- Design tokens: colors, spacing, typography, breakpoints
- Responsive utilities and dark mode support
Layer 2: Radix UI (Behavior & Accessibility)
- Unstyled, accessible component primitives
- WAI-ARIA compliant with keyboard navigation
- Focus management and screen reader support
- Unopinionated - full styling control
Layer 3: shadcn/ui (Beautiful Components)
- Pre-built components = Radix primitives + Tailwind styling
- Copy-paste distribution (you own the code)
- Built-in React Hook Form + Zod validation
- Customizable variants with type safety
Architecture Hierarchy
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
More from samhvw8/dot-claude
All 4Recommended
More Frontend Development
ui-testbrowserbase/skillsAI-powered adversarial UI testing via the browse CLI. Analyzes git diffs to test only what changed, or explores the full app to find bugs. Tests functional corr3.1Kskills.sh installs
animated-component-librariesfreshtechbro/claudedesignskillsPre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated c3.1Kskills.sh installs
chakra-ui-refactorchakra-ui/chakra-uiReview, convert, and improve UI code using Chakra UI v3. Use this skill whenever a user wants to review Chakra UI code for issues, convert plain HTML/CSS, Tailw2.9Kskills.sh installs
react-corecopilotkit/copilotkit@copilotkit/react-core — mount the CopilotKit provider (from @copilotkit/react-core/v2) in a Next.js App Router / React Router v7 / TanStack Start / SPA app, dr2.8Kskills.sh installs
react-devtoolscallstackincubator/agent-react-devtoolsReact DevTools CLI for AI agents. Use when the user asks you to debug a React or React Native app at runtime, inspect component props/state/hooks, diagnose rend2.7Kskills.sh installs
customware-support-widgetcustomware-ai/skillsUse this skill when adding, placing, configuring, or fixing the Customware support chat widget in the Customware React Router client-only SPA template. It cover2.6Kskills.sh installs