design-system-patterns

Build design system foundations with tokens, theming, and component architecture.

Updated May 16, 2026

Search Tags:#theming #react #design system #design tokens #component architecture #css custom properties

Ready to run

npx skills add https://github.com/p-o-ke-nae/pokemondamagecalculatorforstory --skill design-system-patterns-p-o-ke-nae

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/p-o-ke-nae/pokemondamagecalculatorforstory/tree/main/.github/skills/design-system-patterns
Command: npx skills add https://github.com/p-o-ke-nae/pokemondamagecalculatorforstory --skill design-system-patterns-p-o-ke-nae

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams create consistent, scalable UI foundations by turning visual decisions into reusable design tokens, theme layers, and component patterns.

Core Features & Use Cases

Design Tokens: Define primitive, semantic, and component-level tokens for color, spacing, typography, shadows, and radii.
Theming Infrastructure: Implement light and dark modes, system preference support, persistence, and multi-brand theme switching.
Component Architecture: Build compound, polymorphic, headless, slot-based, and variant-driven components with strong TypeScript APIs.
Use Case: Use this Skill when establishing a new design system, refactoring inconsistent UI styles, or documenting the token pipeline for a shared component library.

Quick Start

Ask the Skill to design a token hierarchy and theming architecture for a component library that supports light, dark, and brand-specific UI variants.

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 React component library?▼

Implement multi-brand theming by creating React theme providers that switch semantic token mappings via CSS custom properties. This allows simultaneous support for light, dark, and brand-specific UI variants while maintaining a single component architecture.

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

Primitive design tokens are raw, global values like exact hex colors or pixel sizes, while semantic tokens map those primitives to specific contextual purposes like 'background-primary' or 'text-error'. This mapping ensures maintainable, scalable theming across components.

How do I implement light and dark mode theming with CSS custom properties?▼

Implement light and dark mode theming by binding semantic design tokens to CSS custom properties and toggling their values via a React theme provider. This approach supports system preference detection, manual switching, and state persistence across user sessions.

Can I build polymorphic and headless components using a design system architecture?▼

Yes, the design system architecture supports building compound, polymorphic, headless, and slot-based components. It provides strong TypeScript APIs and responsive variants to ensure accessible, reusable composition patterns for production UI libraries.

When should I refactor inconsistent UI styles into a design token pipeline?▼

Refactor inconsistent UI styles into a design token pipeline when establishing a new design system or documenting a shared component library. This process turns scattered visual decisions into structured, maintainable theme layers and component patterns.