skills.rest
kyamsSRL
kyamsSRLCOMMUNITY
Explore all skills by this author →
GitHub

design-system-patterns

Build scalable design systems with Style Dictionary token pipelines and React theme providers.

Updated Mar 18, 2026
Search Tags:#theming#accessibility#react#design-tokens#component-architecture#style-dictionary#token-pipeline
One-click install
npx skills add https://github.com/kyamsSRL/TinyCopro --skill design-system-patterns-kyamssrl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/kyamsSRL/TinyCopro/tree/main/.claude/skills/design-system-patterns
Command: npx skills add https://github.com/kyamsSRL/TinyCopro --skill design-system-patterns-kyamssrl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design systems often become fragmented, inconsistent, and hard to maintain across platforms; this skill centralizes tokens, theming, and component architecture so teams can deliver consistent UI quickly and safely.

Core Features & Use Cases

  • Design Tokens: Establish primitive, semantic, and component tokens with naming conventions and multi-platform outputs.
  • Theming Infrastructure: Implement CSS custom properties, React theme providers, system preference detection, and persistent theme storage for light/dark and multi-brand themes.
  • Component Architecture: Apply compound, polymorphic, slot-based, and headless patterns with variant systems and responsive props for scalable component libraries.
  • Token Pipeline & Tooling: Configure Style Dictionary transforms and platform formats to generate CSS variables, iOS Swift, and Android XML, and integrate tokens into CI/CD and Figma workflows.
  • Accessibility & SSR: Include reduced-motion, high-contrast handling, and strategies to prevent flash-of-unstyled-content in server-rendered apps.

Quick Start

Create a token source that defines primitives and semantics, run a Style Dictionary build to produce CSS variables and platform outputs, and wire the generated tokens into your React ThemeProvider to enable theme switching.

Frequently Asked Questions about design-system-patterns

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

FAQPage Schema
How do I build a scalable design system with multi-platform design tokens?▼

Build a scalable design system by establishing primitive, semantic, and component tokens, then using a token pipeline to generate multi-platform outputs for CSS variables, iOS Swift, and Android XML.

How does Style Dictionary transform design tokens for different platforms?▼

Style Dictionary transforms design tokens by applying configured format and transform rules to generate platform-specific outputs, producing CSS variables, iOS Swift, and Android XML files from a centralized token source.

Can I use React theme providers with dynamic CSS custom properties for multi-brand theming?▼

React theme providers support dynamic multi-brand theming by wiring generated CSS custom properties into the component architecture, enabling persistent theme storage and system preference detection for light and dark modes.

What is the best way to structure component architecture for a scalable design system?▼

Structure scalable component architecture using compound, polymorphic, slot-based, and headless patterns, applying variant systems and responsive props to ensure consistent UI delivery and maintainability.

How do I prevent flash of unstyled content during server-side rendering with dynamic theming?▼

Prevent flash of unstyled content during server-side rendering by implementing accessibility strategies that detect system preferences and apply theme properties before hydration occurs.

Does this design token pipeline support accessibility modes like reduced-motion and high-contrast?▼

The design token pipeline supports accessibility by including specific handling for reduced-motion and high-contrast modes, ensuring these preferences are integrated into the theming infrastructure.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

design-system-patterns

Define token hierarchies and theming patterns for design systems.

Community
Advanced
phazurlabsphazurlabs
35

figma-design-tool-workflows

Translate Figma workflows into implementation guidance for React, SwiftUI, CSS, and Storybook.

Community
Advanced
JhabbigJhabbig

design-system-patterns

Design scalable design system foundations with tokens, theming, and component architecture.

Community
Advanced
Yoriichi-DangYoriichi-Dang

design-system-patterns

Codify design tokens, theming, and component APIs for scalable design systems.

Community
Advanced