skills.rest
portalshq
portalshqOFFICIAL
Explore all skills by this author →
GitHub

design-system-patterns

Build design systems with tokens, theming infrastructure, and component architecture patterns.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building consistent, maintainable UI foundations across web and mobile applications is difficult when colors, spacing, and component styles are hardcoded and scattered. This Skill provides proven patterns for design tokens, theme switching, and component architecture so teams can establish scalable design system foundations. ## Core Features & Use Cases - Design Token Hierarchies: Structure primitive, semantic, and component tokens with CSS custom properties and Style Dictionary pipelines for multi-platform output (CSS, SCSS, iOS Swift, Android XML). - Theming Infrastructure: Implement light/dark theme switching with React context providers, system preference detection, localStorage persistence, and multi-brand theming. - Component Architecture: Apply compound components, polymorphic components, slot patterns, headless hooks, and CVA-based variant systems for flexible component APIs. - Use Case: When building a component library that must support light and dark modes across web and mobile, use this Skill to define a token hierarchy, wire up a ThemeProvider, and generate platform-specific token outputs via Style Dictionary. ## Quick Start Ask the AI to create a design token system with light and dark theme support using CSS custom properties and a React ThemeProvider.

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 structured 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 transform with Style Dictionary.

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 prefers-color-scheme media query, and applies a data-theme attribute or class to the document root. CSS custom properties then resolve per theme.

What is the difference between primitive and semantic design tokens?▼

Primitive tokens hold raw values like #3b82f6 with no contextual meaning, while semantic tokens reference primitives to express purpose, such as interactive-primary or surface-elevated. Semantic tokens enable theme switching by remapping references.

Can Style Dictionary generate tokens for iOS and Android?▼

Yes, Style Dictionary supports multiple platforms from a single token source. Configure platforms for CSS custom properties, SCSS variables, iOS Swift classes, and Android XML resources using built-in transform groups.

Why do design tokens cause inconsistent theming across components?▼

Inconsistency usually comes from hardcoded values bypassing tokens, missing dark theme overrides, or mixed naming conventions. Enforce token usage through linting, maintain the primitive-semantic-component hierarchy, and test all theme combinations.

When should I use CVA for component variants?▼

Use class-variance-authority when components need type-safe variant and size combinations with Tailwind CSS. It provides defaultVariants, compoundVariants, and TypeScript inference, making it ideal for button, badge, and card variant systems.

Related Skills

Explore More Design & Creative Skills→
RLufRLuf

reversa-design-system

Extract design tokens, color palettes, and typography from CSS, theme files, and screenshots.

Community
Intermediate
alfadocsalfadocs

alfadocs-design-review

Audit AlfaDocs app screens for @alfadocs/ui-kit design-system compliance.

Official
Advanced
kiurakkukiurakku
15

ui-accessibility

Audits web UI against WCAG 2.2 for keyboard, ARIA, contrast, motion, and form accessibility.

Community
Intermediate
imbue-aiimbue-ai
213

frontend-design-tokens

Guide CSS/SCSS design token adoption with Radix UI tokens and custom overrides.

Official
Intermediate