skills.rest
mrodrigues1
mrodrigues1COMMUNITY
Explore all skills by this author →
GitHub

design-system-patterns

Generate design tokens and platform outputs with Style Dictionary pipelines.

Updated Apr 4, 2026
Search Tags:#theming#design-tokens#design-systems#component-architecture#style-dictionary#token-pipeline
One-click install
npx skills add https://github.com/mrodrigues1/akachan --skill design-system-patterns-mrodrigues1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/mrodrigues1/akachan/tree/main/.junie/skills/design-system-patterns
Command: npx skills add https://github.com/mrodrigues1/akachan --skill design-system-patterns-mrodrigues1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design system patterns reduce UI drift, duplicated styling, and fragile theme implementations by providing a single source of truth for tokens, consistent theming infrastructure, and reusable component architecture across web and mobile platforms.

Core Features & Use Cases

  • Design tokens: Guidance for primitive, semantic, and component tokens, naming conventions, and cross-platform generation.
  • Theming infrastructure: CSS custom properties, theme providers for React, system preference detection, reduced-motion and high-contrast support, and SSR considerations to prevent FOUC.
  • Component architecture: Compound, polymorphic, slot-based, headless, and variant-driven component patterns with TypeScript examples and CVA integration.
  • Token pipeline & governance: Figma syncing, Style Dictionary configuration, platform outputs (CSS, iOS, Android), transforms, CI/CD integration, testing, and deprecation patterns.
  • Use Case: Create a token pipeline that generates CSS variables, iOS Swift enums, and Android resource files while enabling light/dark themes, brand variants, and a ThemeProvider for a React app.

Quick Start

Generate primitive, semantic, and component tokens for a new product and produce CSS custom properties plus iOS and Android token files along with a ThemeProvider example and Style Dictionary configuration.

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 design token pipeline that outputs CSS variables, iOS Swift, and Android XML?▼

To build a design token pipeline, use Style Dictionary to transform primitive, semantic, and component tokens into platform-specific outputs including CSS custom properties, iOS Swift enums, and Android resource files.

What is the best way to implement theme switching and prevent FOUC in a React application?▼

Implement theme switching using a React ThemeProvider with CSS custom properties and system preference detection. Server-side rendering (SSR) considerations must be addressed to prevent Flash of Unstyled Content (FOUC).

How do I structure component architecture for a scalable design system using TypeScript?▼

Structure scalable component architecture using compound, polymorphic, slot-based, headless, and variant-driven patterns. Integrate TypeScript and Class Variance Authority (CVA) to manage component variants.

Can I sync design tokens from Figma and automate distribution using CI/CD?▼

Yes, you can sync design tokens from Figma and automate distribution. Configure CI-driven token distribution using Style Dictionary pipelines to handle transforms, testing, and deprecation patterns automatically.

Does this approach support accessibility features like reduced-motion and high-contrast themes?▼

Yes, design system theming infrastructure supports accessibility by providing specific tokens and logic for reduced-motion and high-contrast preferences across web and mobile platforms.

When should I use semantic tokens instead of primitive tokens in a design system?▼

Use semantic tokens to define context-specific meaning like background or border colors, while primitive tokens hold raw values. This separation reduces UI drift and maintains consistent theming across platforms.

Related Skills

Explore More Design & Creative Skills→
kaikunnnnkaikunnnn

design

Map Figma design nodes to Tailwind CSS tokens and component structures.

Community
Advanced
mustafazeydanimustafazeydani

tailwind-v4-shadcn

Configure React apps with Tailwind CSS v4, shadcn/ui, and Vite.

Community
Intermediate
djnsty23djnsty23
2

deploy

Deploy and configure CI/CD workflows for Vercel, Supabase, and GitHub Actions.

Community
Advanced
RodrigoTomeESRodrigoTomeES
12

tailwind-design-system

Standardize Tailwind CSS v4 design systems with CSS-first semantic tokens and reusable variants.

Community
Advanced