Agent skill · design visual · samhvw8
ui-design-system
React UI component systems with TailwindCSS + Radix + shadcn/ui. Stack: TailwindCSS (styling), Radix UI (primitives), shadcn/ui (components), React/Next.js. Capabilities: design system architecture, accessible components, responsive layouts, theming, dark mode, component composition. Actions: review, design, build, improve, refactor UI components. Keywords: TailwindCSS, Radix UI, shadcn/ui, design system, component library, accessibility, ARIA, responsive, dark mode, theming, CSS variables, component architecture, atomic design, design tokens, variant, slot, composition. Use when: building component libraries, implementing shadcn/ui, creating accessible UIs, setting up design systems, adding dark mode/theming, reviewing UI component architecture.
Why this skill is useful
Provides domain-specific knowledge on building accessible and responsive UI component systems using TailwindCSS, Radix UI, and shadcn/ui that the AI wouldn't reliably generate on its own.
What it needs
Requires radix-ui, shadcn-ui, tailwindcss installed locally. About 10k tokens when loaded. Last updated 2025-12-09. 10 stars on the source repository.
What this skill does
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 Key Principle: Each layer enhances the one below. Start with Tailwind for styling, add Radix for accessible behavior, use shadcn/ui for complete components. Core Capabilities UI/UX Review & Audit Systematic evaluation of existing interfaces: Component Architecture Review: Analyze component composition, reusability, and single responsibility Accessibility Audit: WCAG 2.1/2.2 AA/AAA compliance, keyboard navigation, screen reader support Performance Analysis: Core Web Vitals (LCP, FID, CLS), bundle size, render performance Responsive Design Review: Mobile-first implementation, breakpoint usage, container queries Design System Consistency: Token usage, spacing scale adherence, color palette compliance Code Quality: React best practices, hooks usage, state management patterns Visual Hierarchy: Typography scale, spacing rhythm, color contrast, focus indicators UI/UX Design Creating production-ready interface designs: Component Design: Atomic design principles, composition patterns, variant systems Layout Architecture: Grid systems, f …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills samhvw8/ui-design-system