ui-design-system
UI Design System guides you through building production-ready design systems from the ground up. It covers the complete workflow: establishing primitive, semantic, and component token layers; architecting atomic to organism-level components; and implementing light/dark theming with responsive patterns. Built for Tailwind CSS v4 and CSS custom properties.
UI Design System helps you build scalable design systems using token-first architecture and component libraries.
AI-generated summary based on this skill's SKILL.md
Install
Pixel-Process-UG/superkit-agents/ui-design-system · repository language: TypeScript
git clone https://github.com/Pixel-Process-UG/superkit-agents
cp -r superkit-agents/templates/skills/ui-design-system ~/.claude/skills/ui-design-systemnpx skillfed install Pixel-Process-UG/superkit-agents/ui-design-systemFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I build a design system from scratch with ui-design-system?
UI Design System guides you through establishing a complete token-first architecture starting with primitive tokens (colors, spacing, typography), progressing to semantic tokens (interactive states, feedback colors), and finally component tokens. The approach emphasizes scalability by organizing tokens in hierarchical layers, then building atomic components upward to complex organisms, all configured within Tailwind CSS v4 and CSS custom properties for production-ready systems.
What design tokens does ui-design-system help me create?
UI Design System covers three token layers: primitive tokens (base values like hex colors and rem spacing), semantic tokens (meaningful names like "interactive-primary" for interactive states), and component tokens (specific to UI patterns). This hierarchy enables consistent theming across light and dark modes while maintaining flexibility. The system integrates with Tailwind CSS v4 configuration to make tokens accessible throughout your component library.
How can I set up dark mode with ui-design-system?
UI Design System provides a complete dark mode implementation workflow using CSS custom properties and Tailwind CSS v4 theming. You define semantic tokens that swap values between light and dark contexts, then configure Tailwind's theme to reference these tokens. The approach ensures WCAG-compliant color contrast in both modes and supports responsive design patterns, allowing dark mode to work seamlessly across mobile-first layouts and container queries.
Does ui-design-system include accessible color systems?
Yes. UI Design System emphasizes implementing accessible color systems with WCAG-compliant theming throughout. The token architecture includes guidance on color contrast ratios, semantic color naming for interactive and feedback states, and verification practices. Dark mode theming is built with accessibility as a core requirement, ensuring your design system meets accessibility standards from the token layer through component implementation.
How do I configure Tailwind CSS v4 with ui-design-system?
UI Design System provides step-by-step Tailwind CSS v4 configuration using design tokens as the foundation. You map primitive and semantic tokens into Tailwind's theme configuration, leverage CSS custom properties for dynamic theming, and apply responsive design patterns through Tailwind's utility classes. The system supports container queries and mobile-first responsive patterns, enabling you to build scalable component libraries that adapt to any screen size.
What component patterns does ui-design-system teach?
UI Design System covers atomic component architecture from atoms through organisms, with emphasis on component variants and composition patterns. You'll learn to build reusable UI components using semantic tokens, implement responsive behavior through mobile-first patterns, and structure components for composition. The system includes guidance on naming conventions, token hierarchy within components, and verification checklists to ensure consistency across your entire library.
SKILL.md
rendered from the published skill — quoted content, verbatim
UI Design System
Overview
Build and maintain scalable design systems with a token-first architecture. This skill covers the full pipeline from primitive design tokens through semantic mapping to themed component libraries, with deep expertise in Tailwind CSS v4, CSS custom properties, and responsive design patterns.
Phase 1: Token Foundation
- Audit existing design assets (colors, fonts, spacing, shadows)
- Define primitive tokens (raw values with no semantic meaning)
- Create semantic token layer (map primitives to intentions)
- Build component token layer (map semantics to component parts)
STOP — Present the token hierarchy to user for review before building components.
Token Layer Decision Table
| Layer | Purpose | Naming Convention | Example |
|---|---|---|---|
| Primitive |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
templates/skills/ui-design-system/SKILL.md