skills.rest
kiprotichgidii
kiprotichgidiiCOMMUNITY
Explore all skills by this author →
GitHub

design-system-patterns

Build design tokens, theming infrastructure, and component architecture for scalable design systems.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires class-variance-authority, @radix-ui/react-slot, style-dictionary, and includes references (resource) components.

What problem does it solve? Building consistent, maintainable UI foundations across web and mobile applications requires solving recurring challenges: managing design tokens across platforms, implementing light/dark theme switching, and architecting reusable component libraries. This Skill provides proven patterns and production-ready code for these design system fundamentals. ## Core Features & Use Cases - Design Token Architecture: Establish three-layer token hierarchies (primitive, semantic, component) with naming conventions, CSS custom properties output, and multi-platform generation via Style Dictionary for CSS, SCSS, iOS Swift, and Android XML. - Theming Infrastructure: Implement React theme providers with system preference detection, localStorage persistence, multi-brand theming, and accessibility support for reduced motion and high contrast modes. - Component Architecture Patterns: Apply compound components, polymorphic components with the as prop, slot-based composition, headless UI hooks, and type-safe variant systems using Class Variance Authority. - Use Case: When building a component library that must support light and dark modes across web and mobile, use this Skill to set up the token pipeline, theme provider, and variant-based component APIs in one coherent architecture. ## Quick Start Ask the AI to create a design token system with light and dark theme support using CSS custom properties and a React theme provider.

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?▼

Design tokens are organized in three layers: primitive tokens holding raw values like hex colors, semantic tokens assigning contextual meaning like text-primary, and component tokens for specific usage like button-bg. Define them in JSON and use Style Dictionary to generate platform outputs.

How to implement dark mode theme switching in React?▼

Create a ThemeProvider using React context that stores the theme in localStorage, detects system preference via the prefers-color-scheme media query, and applies a data-theme attribute or class to the document root. CSS custom properties then resolve to the active theme values.

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 swap underlying values without changing component code.

Can design tokens be exported to iOS and Android?▼

Yes, Style Dictionary transforms token JSON into platform-specific formats including Swift classes for iOS and XML color and dimen resources for Android. Configure separate platforms in the Style Dictionary config with appropriate transform groups.

How do I prevent flash of unstyled content with theme switching?▼

Add a small inline script in the document head that reads the stored theme from localStorage and sets the data-theme attribute before React hydrates. This runs synchronously before first paint, preventing a flash of the wrong theme.

What is Class Variance Authority used for in component libraries?▼

Class Variance Authority (CVA) defines type-safe component variants with base styles, variant options, sizes, and compound variants. It generates the correct class strings from props, giving TypeScript autocomplete and validation for variant combinations.

Related Skills

Explore More Design & Creative Skills→
aemdemosaemdemos

Get General Styling — Design System Extraction Skill

Extract site-wide styling and design tokens from a live website.

Official
Advanced
cosmicstack-labscosmicstack-labs
364

component-design-systems

Standardize scalable, accessible UI component libraries with design tokens and reusable patterns.

Official
Intermediate
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate
richardadonnellrichardadonnell
45

radix-ui-design-system

Build accessible React design systems with Radix UI primitives.

Community
Advanced