skills.rest
TechCorp25
TechCorp25COMMUNITY
Explore all skills by this author →
GitHub

design-system-patterns

Build design systems with design tokens, theming infrastructure, and component architecture patterns.

Updated May 20, 2026
Search Tags:#theming#design system#component library#design tokens#dark mode#style dictionary#css custom properties
One-click install
npx skills add https://github.com/TechCorp25/kingdom --skill design-system-patterns-techcorp25
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/TechCorp25/kingdom/tree/main/.claude/skills/ui-design/skills/design-system-patterns
Command: npx skills add https://github.com/TechCorp25/kingdom --skill design-system-patterns-techcorp25

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent, maintainable UI foundations across web and mobile applications is hard when colors, spacing, and component styles are hardcoded and scattered. This Skill provides proven patterns for design tokens, theme switching, and component architecture so teams can establish a single source of truth for visual design. ## Core Features & Use Cases - Design Token Hierarchies: Define primitive, semantic, and component-level tokens for colors, typography, spacing, shadows, and radii, with multi-platform output via Style Dictionary (CSS, SCSS, iOS Swift, Android XML). - Theming Infrastructure: Implement light/dark theme switching with CSS custom properties, React theme providers, system preference detection, persistent storage, and multi-brand theming. - Component Architecture: Apply compound components, polymorphic components, slot patterns, headless UI hooks, and CVA-based variant systems for scalable component libraries. - Use Case: When building a component library that must support light and dark modes across web and mobile, use this Skill to define a token pipeline from Figma to code and wire up a theme provider with SSR-safe flash prevention. ## Quick Start Ask the AI to create a design token hierarchy with light and dark semantic themes and a CVA-based button variant system for your React project.

Frequently Asked Questions about design-system-patterns

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

FAQPage Schema
How do I create design tokens for a design system?▼

Define design tokens in three layers: primitive tokens holding raw values like hex colors and rem sizes, semantic tokens mapping meaning like text-primary, and component tokens for specific usage like button-bg. Export them as CSS custom properties or transform them with Style Dictionary.

How to implement dark mode theme switching in React?▼

Implement dark mode with a ThemeProvider that stores the preference in localStorage, detects the system preference via prefers-color-scheme, and applies a data-theme attribute or class on the document root. CSS custom properties then swap values per theme.

What is the difference between primitive and semantic design tokens?▼

Primitive tokens hold raw values like gray-900 or blue-500 with no contextual meaning. Semantic tokens reference primitives and express purpose, such as text-primary or surface-elevated, allowing themes to remap meaning without changing components.

Can design tokens be exported to iOS and Android?▼

Yes, Style Dictionary transforms token JSON into platform-specific outputs including Swift classes for iOS and XML color and dimen resources for Android, alongside CSS and SCSS for web. Each platform gets its own transform group and build path.

Why does my theme flash the wrong colors on page load?▼

The flash occurs because server-rendered HTML loads before client-side theme detection runs. Fix it with a small inline script in the document head that reads localStorage and sets the data-theme attribute before first paint.

When should I use CVA for component variants?▼

Use class-variance-authority when components need type-safe variant and size combinations with base styles, compound variants, and defaults. It suits design system components like buttons and badges; simpler one-off components do not need it.

Related Skills

Explore More Design & Creative Skills→
RLufRLuf

reversa-design-system

Extract design tokens, color palettes, and typography from CSS, theme files, and screenshots.

Community
Intermediate
launchapp-devlaunchapp-dev
38

naming-convention

Define naming conventions for design components, tokens, and assets.

Official
Intermediate
adityaarsharmaadityaarsharma
2

orbit-designer-dark-mode

Automate dark mode audits for WordPress plugins with CSS and WCAG AA checks.

Community
Intermediate
Eng-susoEng-suso

radix-ui-design-system

Build accessible React component libraries using Radix UI headless primitives.

Community
Intermediate