design-system

Establish a scalable design system with three-layer token hierarchy and theming.

14|5|Updated Jan 29, 2026

Search Tags:#theming #accessibility #frontend #design system #tokens #component architecture

Ready to run

npx skills add https://github.com/oakoss/agent-skills --skill design-system-oakoss

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive framework for building and maintaining scalable design systems, ensuring visual consistency and efficient development across projects.

Core Features & Use Cases

Token Architecture: Establishes a clear hierarchy for design tokens (primitive, semantic, component).
Theming: Enables dark mode, multi-brand theming, and SSR flash prevention.
Component Patterns: Implements CVA variants, compound components, and headless UI patterns.
Use Case: When starting a new project or refactoring an existing one to ensure brand consistency, accessibility, and maintainability, leverage this Skill to establish a robust design system foundation.

Quick Start

Use the design-system skill to generate a new component based on CVA variants and semantic tokens.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure design tokens for a scalable frontend architecture?▼

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.

What is the best way to implement multi-brand theming and dark mode without SSR flash?▼

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.

How does CVA integrate with headless UI patterns in a component architecture?▼

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.

Can I use this design system framework to ensure accessibility compliance?▼

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.

When do I need a three-layer token hierarchy for my design system?▼

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.

Does establishing design system tokens require specific frontend dependencies?▼

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.