Establish a scalable design system with three-layer token hierarchy and theming.
npx skills add https://github.com/oakoss/agent-skills --skill design-system-oakoss
Please help me install this Agent Skill. Skill: design-system Source: https://github.com/oakoss/agent-skills/tree/main/skills/design-system Command: npx skills add https://github.com/oakoss/agent-skills --skill design-system-oakoss
This Skill provides a comprehensive framework for building and maintaining scalable design systems, ensuring visual consistency and efficient development across projects.
Use the design-system skill to generate a new component based on CVA variants and semantic tokens.
High-intent search queries and answers about installing and using this skill.
Structure design tokens using a three-layer hierarchy of primitive, semantic, and component tokens. This architecture establishes clear theming capabilities and visual consistency by mapping raw values to contextual meaning before applying them to specific UI elements.
Implement multi-brand theming and dark mode using CSS custom properties for design tokens. This approach enables dynamic theme switching and includes SSR flash prevention techniques to ensure visual consistency during server-side rendering and initial page load.
CVA integrates with headless UI patterns by defining variant properties separately from structural logic. This component architecture allows you to apply semantic tokens and visual variants to accessible, unstyled headless components, ensuring maintainability and consistent styling.
Yes, you can use this framework to ensure accessibility compliance. The component architecture patterns integrate headless UI functionalities, which provide accessible interactions by default while design tokens manage the visual contrast needed for compliance.
You need a three-layer token hierarchy when starting a new project or refactoring an existing one for multi-brand support. Separating primitive, semantic, and component tokens allows efficient development workflows and prevents visual inconsistencies across different themes.
No specific frontend dependencies are required to establish the design system tokens. The framework relies on standard CSS custom properties and architectural patterns like CVA variants, allowing integration with your existing headless UI components and workflows.
Dev-Dennis-040Define a CSS design system and layout framework for frontend projects.
M-Abdullah07Standardize UI design with Tailwind tokens and CVA components.
The-Vibe-CompanyAlign UI features to design system tokens, typography, color, and spacing.
DrLuggelsApply typography, color, spacing, and iconography principles to create accessible visual designs.
