Ui Design System
This skill guides you through building and maintaining modern UI design systems using TailwindCSS for styling, Radix UI for accessible primitives, and shadcn/ui for pre-built components. It covers component architecture, design tokens, responsive layouts, dark mode, and accessibility compliance to create consistent, reusable interfaces.
UI Design System helps you build production-ready component libraries with TailwindCSS, Radix UI, and shadcn/ui.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2025-12-09
UI Design System helps you build production-ready component libraries with TailwindCSS, Radix UI, and shadcn/ui. This skill guides you through building and maintaining modern UI design systems using TailwindCSS for styling, Radix UI for accessible primitives, and shadcn/ui for pre-built components. It covers component architecture, design tokens, responsive layouts, dark mode, and accessibility compliance to create consistent, reusable interfaces.
Use it when
- Ui Design System helps you establish a unified framework for consistent component design.
- Ui Design System provides comprehensive guidance on component guidelines and documentation practices.
Install
samhvw8/dot-claude/ui-design-system · repository language: Python
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is the Ui Design System skill about?
Ui Design System guides you through building and maintaining modern UI design systems using TailwindCSS for styling, Radix UI for accessible primitives, and shadcn/ui for pre-built components. It covers component architecture, design tokens, responsive layouts, dark mode, and accessibility compliance to create consistent, reusable interfaces.
How do I find or use a UI design system for consistent component design?
Ui Design System helps you establish a unified framework for consistent component design. It teaches you to leverage TailwindCSS for standardized styling, Radix UI for accessible base primitives, and shadcn/ui for ready-made components. This approach ensures all UI elements follow the same design language and patterns across your entire product.
Where can I access design system documentation and component guidelines?
Ui Design System provides comprehensive guidance on component guidelines and documentation practices. You'll learn how to structure design tokens, document component APIs, create usage examples, and maintain accessibility standards. The skill covers best practices for making your design system documentation clear and accessible to both designers and developers.
How do I build a design system from scratch?
Ui Design System walks you through the entire implementation process. Start by defining your design tokens and color palette using TailwindCSS, build accessible primitives with Radix UI, then compose pre-built components with shadcn/ui. The skill covers component architecture decisions, establishing naming conventions, managing responsive behavior, and implementing dark mode support.
What reusable UI components and patterns does Ui Design System cover?
Ui Design System teaches you to discover and implement reusable components including buttons, forms, modals, navigation, and layout patterns. You'll learn component composition strategies, how to create flexible variants, manage state effectively, and ensure accessibility compliance. The skill emphasizes building patterns that scale across your entire application.
What design system tools and best practices are included?
Ui Design System covers essential tools like TailwindCSS for utility-first styling, Radix UI for unstyled accessible components, and shadcn/ui for styled implementations. Best practices include maintaining design tokens, documenting component APIs, testing accessibility, implementing responsive design, supporting dark mode, and establishing clear governance for your design system.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Find or use a UI design system for consistent component design”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
UI Styling combines shadcn/ui's pre-built accessible components with Tailwind CSS utility-first styling to create responsive, type-safe interfaces. It covers component composition, theme customization, dark mode implementation, and design system patterns. Use it for rapid prototyping, design systems, and complex UI patterns with immediate visual feedback.
Master modern frontend architecture for production SaaS applications using Tailwind CSS v4, shadcn/ui components, and either Next.js 15+ or Vite SPAs. This skill covers server-first design patterns, WCAG 2.1 AA accessibility, responsive layouts, and performance optimization for dashboards, data tables, and complex enterprise interfaces.
UI Components provides 22 rules across 7 categories for constructing accessible component libraries with shadcn/ui and Radix Primitives. It covers CVA variants, OKLCH theming, form integration with React Hook Form and Zod, Radix composition patterns, and design system foundations including spacing scales and typography.
TailwindCSS teaches utility-first CSS framework expertise with mobile-first responsive design. Learn to apply Tailwind classes directly in templates, use responsive prefixes, and implement dark mode—all without @apply in production.
Frontend Design teaches production-grade web UI development through a tokens-first methodology that balances systematic consistency with creative aesthetics. It covers design token systems, component architecture, accessibility compliance, and responsive patterns across React, Vue, and vanilla frameworks.
Shadcn Ui is a code generation platform that lets you copy component source directly into your project, giving you full ownership and customization. It combines Radix UI or Base UI primitives with Tailwind CSS 4, oklch theming, and React 19 patterns for building accessible interfaces. Use it to add components via CLI, configure dark mode, validate forms with Zod, or create custom component registries.
More skills design-system-tokens (MIT) · ui-design-system (MIT) · heroui-native (Apache-2.0) · Tailwind Design System (unlicensed)