skills.rest
fmbp1981-hash
fmbp1981-hashCOMMUNITY
Explore all skills by this author →
GitHub

design-system-patterns

Define design tokens and theming infrastructure for web and mobile applications.

Updated Dec 13, 2025
Search Tags:#design system#UI patterns#component libraries#theme switching#Figma tokens
One-click install
npx skills add https://github.com/fmbp1981-hash/cavendish-gig --skill design-system-patterns-fmbp1981-hash
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/fmbp1981-hash/cavendish-gig/tree/main/.gemini/skills/design-system-patterns
Command: npx skills add https://github.com/fmbp1981-hash/cavendish-gig --skill design-system-patterns-fmbp1981-hash

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps you create consistent, maintainable, and scalable UI foundations across web and mobile applications by providing patterns and best practices for design systems.

Core Features & Use Cases

  • Design Tokens: Define and manage color, typography, spacing, and other UI elements.
  • Theming Infrastructure: Implement light/dark theme switching and multi-brand theming systems.
  • Component Architecture: Architect component libraries with consistent APIs and composition patterns.
  • Token Pipeline: Integrate Figma tokens with code, enabling design-to-code workflows.
  • Use Case: You are developing a new design system for a large web application with complex UI requirements.

Quick Start

Use the design-system-patterns skill to start defining your design tokens in the Figma file 'design-system.figma'.

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 a scalable UI component library?▼

Manage design tokens by defining a strict hierarchy for color, typography, and spacing to maintain a scalable UI component library. This approach ensures consistent APIs and composition patterns across web and mobile applications.

What is the best way to implement light and dark theme switching in a design system?▼

Implement light and dark theme switching by setting up a dedicated theming infrastructure within your design system. This involves structuring your design tokens to support multi-brand themes and seamless mode transitions.

How do I sync Figma tokens with code for design-to-code workflows?▼

Sync Figma tokens with code by establishing a token pipeline that bridges design and development environments. This workflow translates visual design properties into code-ready variables for consistent UI implementation.

Do I need software engineering knowledge to build a design system with these patterns?▼

Yes, you need software engineering and UI/UX design knowledge to apply these design system patterns effectively. The guidelines cover complex component architecture and token management that require technical development background.

Can I use these component architecture patterns for large web applications with complex UI requirements?▼

Yes, these component architecture patterns are specifically designed for large web applications with complex UI requirements. They provide consistent APIs and composition patterns to maintain scalable UI foundations across extensive projects.

Related Skills

Explore More Design & Creative Skills→
n0rvynn0rvyn
1

understand-design

Analyze design prototypes and map UI/UX intent to implementable requirements.

Community
Advanced
Harmeet10000Harmeet10000
7

design-system-patterns

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

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
kyamsSRLkyamsSRL

design-system-patterns

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

Community
Advanced