LogoClawIndex
CasesSkillsAbout
LogoClawIndex

design-system-patterns - Scalable design system architecture patterns

Foundation for design tokens, theming infrastructure, token pipelines, and governance

Tags

Updated: 2026-06-15

Capabilities

Typical Inputs

Typical Outputs

What this skill does

  • Define token hierarchy
  • Implement theme switching
  • Build token pipeline
  • Create multi-brand themes
  • Generate platform tokens
  • Apply accessibility rules
  • Prevent FOUC

Inputs

  • Token source files
  • Theme preferences
  • Brand specifications
  • React components
  • Platform configuration

Outputs

  • Token variable files
  • Theme provider component
  • Platform token files
  • Applied theme attributes
  • Accessibility tokens

Requirements

  • React framework
  • Style Dictionary
  • CSS custom properties
  • localStorage
  • System theme detection
  • SSR environment

Source

  • Spec: SKILL.md

ClawIndex

OpenClaw Skills & Use Case Index

ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

Index

Skills·
Cases

Meta

About·
Disclaimer·
Email·
GitHub
© 2026 ClawIndex All Rights Reserved.
design-system
design-tokens
theming
accessibility
multi-brand
frontend-architecture
token-pipeline
governance
Define token hierarchy
Implement theme switching
Build token pipeline
Create multi-brand themes
Token source files
Theme preferences
Brand specifications
Token variable files
Theme provider component
Platform token files