{"enrichment":{"faq":[{"a":"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.","q":"How do I build a design system from scratch with ui-design-system?"},{"a":"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.","q":"What design tokens does ui-design-system help me create?"},{"a":"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.","q":"How can I set up dark mode with ui-design-system?"},{"a":"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.","q":"Does ui-design-system include accessible color systems?"},{"a":"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.","q":"How do I configure Tailwind CSS v4 with ui-design-system?"},{"a":"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.","q":"What component patterns does ui-design-system teach?"}],"shadow_tags":["token-architecture","component-variants","theme-switching","responsive-patterns","accessibility-wcag","css-variables","atomic-design","design-tokens","tailwind-integration","color-systems"],"summary_rewrite":"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."},"files":[{"bytes":10994,"path":"templates/skills/ui-design-system/SKILL.md","sha256":"4b98ba23cde1cf235c3a216972b617c7ef0ae6697d530c4a8541579d0cf83ee0","url":"https://skillfed.io/files/Pixel-Process-UG/superkit-agents/ui-design-system/82ec7a8c/SKILL.md"}],"id":"Pixel-Process-UG/superkit-agents/ui-design-system","links":{"html":"https://skillfed.io/Pixel-Process-UG/superkit-agents/ui-design-system","md":"https://skillfed.io/Pixel-Process-UG/superkit-agents/ui-design-system.md","repo":"https://github.com/Pixel-Process-UG/superkit-agents"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":0,"language":"TypeScript","last_updated":"2026-03-16","license":"MIT","name":"ui-design-system","publisher":"Pixel-Process-UG","stars":1},"relations":{"similar":[{"id":"martinholovsky/claude-skills-generator/design-systems"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems"},{"id":"wshobson/agents/design-system-patterns"},{"id":"NickCrew/Claude-Cortex/design-system-architecture"},{"id":"doccker/cc-use-exp/ui-ux-pro-max"},{"id":"daffy0208/ai-dev-standards/visual-designer"},{"id":"giuseppe-trisciuoglio/developer-kit/tailwind-design-system"},{"id":"daffy0208/ai-dev-standards/design-system-architect"},{"id":"wshobson/agents/visual-design-foundations"},{"id":"curiositech/some_claude_skills/design-system-creator"}]},"slug":{"owner":"Pixel-Process-UG","repo":"superkit-agents","skill":"ui-design-system"},"version":"82ec7a8c"}