skills.rest
truongnat
truongnatCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-patterns

Implement design tokens, theme switching, and component architecture patterns for design systems.

Updated Jul 28, 2026
Search Tags:#theming#react#component library#design tokens#dark mode#style dictionary#css custom properties
One-click install
npx skills add https://github.com/truongnat/Restly --skill design-system-patterns-truongnat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/truongnat/Restly/tree/main/.agents/skills/design-system-patterns
Command: npx skills add https://github.com/truongnat/Restly --skill design-system-patterns-truongnat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent, maintainable UI foundations across web and mobile applications requires structured design tokens, theming infrastructure, and reusable component patterns, which are difficult to architect from scratch without established conventions. ## Core Features & Use Cases - Design Token Architecture: Define primitive, semantic, and component token hierarchies with naming conventions, CSS custom property output, and multi-platform generation via Style Dictionary. - Theming Infrastructure: Implement light/dark theme switching with React context providers, system preference detection, localStorage persistence, and accessibility modes like reduced motion and high contrast. - Component Patterns: Build compound components, polymorphic components, slot-based composition, headless hooks, and CVA-based variant systems. - Use Case: When adding dark mode to a React application, use this Skill to set up a semantic token layer, a ThemeProvider with system preference detection, and FOUC-prevention scripts for server-side rendering. ## Quick Start Ask the AI to create a design token hierarchy with light and dark theme support using CSS custom properties and a React theme provider.

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?▼

Define three token layers: primitive tokens holding raw values like hex colors and rem sizes, semantic tokens mapping meaning like text-primary, and component tokens for specific usage like button-bg. Output them as CSS custom properties and override semantic values per theme.

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

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

Primitive tokens hold raw values like gray-900 or blue-500 with no contextual meaning. Semantic tokens reference primitives and express purpose, such as text-primary or surface-elevated, allowing themes to swap underlying values without changing component code.

Does Style Dictionary support iOS and Android token output?▼

Yes, Style Dictionary transforms token JSON into platform-specific formats including CSS variables, SCSS, Swift classes for iOS, and XML resources for Android. Configure separate platforms in the config file with appropriate transform groups and formats.

Why does my theme flash the wrong colors on page load?▼

This flash of unstyled content happens when the theme is applied only after React hydrates. Fix it by running a small inline script in the document head that reads localStorage and sets the data-theme attribute before first paint.

When should I use compound components versus render props?▼

Use compound components with shared context when building related UI parts like accordions or tabs that need implicit state sharing and flexible composition. Use render props or children-as-function when exposing internal state for fully custom rendering logic.

Related Skills

Explore More Design & Creative Skills→
aemdemosaemdemos

Get General Styling — Design System Extraction Skill

Extract site-wide styling and design tokens from a live website.

Official
Advanced
Samuelca6399Samuelca6399

design-systems

Guide teams in building scalable design systems with semantic tokens, CSS variable theming, and Storybook documentation.

Community
Advanced
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate
Eng-susoEng-suso

radix-ui-design-system

Build accessible React component libraries using Radix UI headless primitives.

Community
Intermediate