Skills
.Work. You
Rest

design-system-patterns

Community

Scale UI with token-driven design patterns.

Design & Creative#theming#tokens#design-system#design-tokens#pattern-library#component-patterns
AuthorYoriichi-Dang
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Establish scalable UI foundations across teams by standardizing tokens, theming, and component APIs to ensure consistency and maintainability.

Core Features & Use Cases

  • Design Tokens: primitive, semantic, and component tokens with multi-platform generation.
  • Theming Infrastructure: CSS custom properties, theme context, and system-preference support.
  • Component Architecture: compound components, polymorphic APIs, variants, slots, and headless patterns.
  • Token Pipeline & Governance: Figma-to-code synchronization, token transformation, and CI/CD for updates.
  • Use Cases: multi-brand apps, design-system libraries, and rapid UI scaffolding for new projects.

Quick Start

Initialize a token-driven design system by defining primitive, semantic, and component tokens, then implement a theming layer with CSS variables and a ThemeProvider, and start building components that consume the tokens.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-system-patterns
Download link: https://github.com/Yoriichi-Dang/dashboard_web_template/archive/main.zip#design-system-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.