skills.rest
Shaarav4795
Shaarav4795COMMUNITY
Explore all skills by this author →
GitHub

design-system-patterns

Create design tokens, theming infrastructure, and component architecture patterns for web and mobile.

Updated Mar 25, 2026
Search Tags:#theming#cross-platform#tokens#design-system#component-patterns#ui-architecture
One-click install
npx skills add https://github.com/Shaarav4795/ScholarFlow --skill design-system-patterns-shaarav4795
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/Shaarav4795/ScholarFlow/tree/main/.agents/skills/design-system-patterns
Command: npx skills add https://github.com/Shaarav4795/ScholarFlow --skill design-system-patterns-shaarav4795

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Master design system architecture to create consistent, maintainable, and scalable UI foundations across web and mobile applications.

Core Features & Use Cases

  • Design Tokens: Primitive, semantic, and component tokens; token naming conventions; multi-platform token generation.
  • Theming Infrastructure: CSS custom properties, React theme providers, dynamic theme switching, system-pref detection, persistent storage, reduced motion and high contrast modes.
  • Component Architecture: Compound components, polymorphic components, variants and sizes, slot-based composition, headless patterns, style props and responsive variants.
  • Token Pipeline: Figma-to-code synchronization, Style Dictionary configuration, token transformation, and CI/CD integration for token updates.

Quick Start

Generate a scalable design system blueprint using tokens, theming, and component patterns.

Frequently Asked Questions about design-system-patterns

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

FAQPage Schema
How do I structure design tokens for cross-platform UI architecture?▼

Implement theming infrastructure using CSS custom properties and React theme providers to enable dynamic theme switching. Include system-preference detection, persistent storage, and reduced motion or high contrast modes for accessible, scalable UI development.

What is the best way to synchronize Figma design tokens with code?▼

The best way to synchronize Figma design tokens with code is configuring a token pipeline using Style Dictionary. This enables token transformation and CI/CD integration to automate updates and maintain consistent component APIs across platforms.

How does headless component architecture work with design systems?▼

Headless component architecture separates logic from styling using polymorphic components and slot-based composition. This pattern enforces consistent component APIs, allowing scalable variant and size configurations without coupling structure to specific visual implementations.

Can I use design system patterns for both web and mobile applications?▼

Yes, design system patterns support both web and mobile applications through multi-platform token generation. Enforcing token pipelines and theming infrastructure ensures maintainable, consistent component architecture across different platforms.

When do I need component-level tokens instead of semantic tokens?▼

You need component-level tokens when a specific UI element requires localized styling overrides beyond global semantic tokens. This architecture pattern maintains scalable design system boundaries by preventing style leakage while keeping component APIs consistent across platforms.

Related Skills

Explore More Design & Creative Skills→
Harmeet10000Harmeet10000
7

design-system-patterns

Standardizes tokens, theming, and component APIs for scalable UI foundations across web and mobile.

Community
Advanced
kyamsSRLkyamsSRL

design-system-patterns

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

Community
Advanced
Shaarav4795Shaarav4795

tailwind-design-system

Build Tailwind v4 design systems with tokens, CVA variants, and component libraries.

Community
Advanced
docaohieu2808docaohieu2808

design-system

Generate CSS variables from JSON token definitions for brand compliance.

Community
Advanced