🎯

ui-design-system

🎯Skill

from samhvw8/dot-claude

What it does

React UI component system skill for building accessible, themeable interfaces with TailwindCSS, Radix UI, and shadcn/ui, covering design system architecture, responsive layouts, dark mode, and component composition

Overview

A comprehensive React UI component system skill for building accessible, themeable interfaces using TailwindCSS, Radix UI, and shadcn/ui. It covers the full spectrum from design system architecture and component review to building production-ready UI with dark mode, responsive layouts, and WCAG compliance.

Key Features

Three-Pillar Architecture — Structured guidance on TailwindCSS (styling foundation), Radix UI (accessible behavior primitives), and shadcn/ui (pre-built beautiful components), with clear understanding of how each layer enhances the one below
UI/UX Review & Audit — Systematic evaluation capabilities covering component architecture, WCAG 2.1/2.2 accessibility compliance, Core Web Vitals performance, responsive design, and design system consistency
Component Design & Building — Guides for creating production-ready components with design tokens, variant systems, dark mode theming via CSS variables, and React Hook Form + Zod validation integration

Who is this for?

Frontend developers and UI engineers building component-based interfaces with the modern React stack. Particularly useful for those adopting shadcn/ui, implementing design systems, or needing accessibility audits and responsive layout guidance for their existing component libraries.

📦

Same repository

samhvw8/dot-claude(36 items)

ui-design-system

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add samhvw8/dot-claude --skill ui-design-system

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add samhvw8/dot-claude --skill ui-design-system

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/ui-design-system/SKILL.md

SKILL.md

2,392Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

More from this repository10

🎯

ui-ux-design🎯Skill

Comprehensive UI/UX design reference database with 50+ styles, 21 color palettes, 50 font pairings, 20 chart types, and stack-specific best practices for React, Next.js, Vue, Svelte, SwiftUI, Flutter, and more.

🎯

claude-md-architect🎯Skill

Generates and optimizes CLAUDE.md project instruction files for Claude Code by analyzing codebase context, applying Anthropic best practices, and minimizing token consumption for maximum effectiveness.

🎯

project-planner🎯Skill

Skill

🎯

nextjs-turborepo🎯Skill

Comprehensive guide for full-stack web development with Next.js (App Router, Server Components, SSR/SSG/ISR) and Turborepo (monorepo management, build pipelines, remote caching) for modern applications.

🎯

google-adk-python🎯Skill

Skill

🎯

mobile-development🎯Skill

Cross-platform mobile development skill covering React Native, Flutter, Swift/SwiftUI, and Kotlin/Jetpack Compose with offline-first architecture, push notifications, and app store deployment.

🎯

3d-graphics🎯Skill

Skill for building 3D web graphics with Three.js, covering WebGL/WebGPU rendering, scenes, cameras, materials, lights, animations, model loading (GLTF/FBX), PBR materials, post-processing effects, and VR/XR experiences.

🎯

prompt-enhancer🎯Skill

A prompt engineering and optimization skill that transforms unclear prompts, reduces token usage, improves structure, adds constraints, and performs backward-compatible rewrites for better LLM outputs.

🎯

refactoring-expert🎯Skill

Skill

🎯

planning🎯Skill

A technical implementation planning and architecture design skill covering feature planning, system architecture, technical evaluation, requirement breakdown, and trade-off analysis.