skills.rest
civictechdc
civictechdcOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-system-patterns

Designsystem for rapid prototyping and UI development with Tailwind-like utility classes and WCAG AA compliant theming, packaged as a reusable Python library.

1|Updated Jul 24, 2025
Search Tags:#theming#tokens#design-system#design-tokens#ui-patterns#component-library#theming-infrastructure
One-click install
npx skills add https://github.com/civictechdc/votecatcher --skill design-system-patterns-civictechdc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/civictechdc/votecatcher/tree/main/frontend/.agent/skills/design-system-patterns
Command: npx skills add https://github.com/civictechdc/votecatcher --skill design-system-patterns-civictechdc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Address design-system drift by standardizing tokens, theming, and component APIs.

Core Features & Use Cases

  • Design Tokens: primitives, semantics, and component tokens to define colors, typography, spacing, and accessibility.
  • Theming Infrastructure: CSS custom properties and theme switching across light/dark modes and brands.
  • Component Architecture: patterns for compound and polymorphic components, variant systems, and headless components.
  • Token Pipeline: tooling and CI/CD guidance to synchronize design tokens with code.

Quick Start

Set up design tokens, theming, and a starter component library for a new design system project.

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 to prevent design-system drift?▼

You standardize tokens by defining a three-tier hierarchy: primitive tokens for raw values, semantic tokens for meaning, and component tokens for specific UI elements, which prevents design-system drift across web and mobile platforms.

What is the best way to implement theming infrastructure for light and dark modes?▼

Implement theming infrastructure using CSS custom properties to enable theme switching across light and dark modes, allowing you to override semantic tokens dynamically without altering individual component styles.

How do I build reusable components using polymorphic and headless patterns?▼

Build reusable components by applying compound, polymorphic, and headless component architecture patterns, which separate visual presentation from behavioral logic to standardize component APIs and increase reusability.

How do I synchronize design tokens with code in a CI/CD pipeline?▼

Synchronize design tokens with code by setting up a token pipeline with tooling and CI/CD guidance that automatically transforms and updates primitive, semantic, and component tokens in your codebase when source values change.

Can I use this design system pattern approach for both web and mobile projects?▼

Yes, this approach applies to teams building web and mobile design systems, covering token creation, theming strategies using CSS custom properties, and reusable component patterns suitable for both platforms.

Related Skills

Explore More Design & Creative Skills→
frankxaifrankxai
6

design-system-architecture

Implement token hierarchies with semantic, alias tokens for scalable design systems.

Community
Advanced
kyamsSRLkyamsSRL

design-system-patterns

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

Community
Advanced
EanLeeEanLee

design-system-patterns

Create scalable design systems using design tokens, theming, and component patterns.

Community
Advanced
Yoriichi-DangYoriichi-Dang

design-system-patterns

Codify design tokens, theming, and component APIs for scalable design systems.

Community
Advanced