design-system-patterns
Foundational design system architecture — token hierarchies, theming infrastructure, token pipelines, and governance. Use when creating design tokens, implementing theme switching, setting up Style Dictionary, or establishing multi-brand theming. Triggers on design tokens, theme provider, Style Dictionary, token pipeline, multi-brand theming, CSS custom properties architecture.
Why use this skill?
Learn to build scalable design systems using token hierarchies, theme switching, and Style Dictionary pipelines with OpenClaw's expert design patterns.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/wpank/design-system-patternsWhat This Skill Does
The design-system-patterns skill provides a robust architectural framework for building, maintaining, and scaling design systems. It acts as an authoritative guide for implementing multi-layer token architectures, automating the pipeline from design tools like Figma to production code, and managing complex theme-switching logic within modern React applications. By centralizing the logic for primitive, semantic, and component-level tokens, this skill helps developers ensure consistency, accessibility, and high maintainability across component libraries and large-scale web projects.
Installation
To integrate this skill into your environment, run the following command in your terminal:
clawhub install openclaw/skills/skills/wpank/design-system-patterns
Use Cases
This skill is designed for scenarios involving:
- Establishing Design Token Architecture: Migrating away from hardcoded values toward a structured hierarchy (Primitive, Semantic, Component).
- Multi-Brand Theming: Managing theme-aware variables for white-labeled applications or dynamic branding requirements.
- Automation Pipelines: Setting up Style Dictionary configurations to synchronize design data from Figma to CSS, Tailwind, or Styled Components.
- Theme Management: Implementing sophisticated React-based theme providers that handle system preference detection, persistence in localStorage, and preventing FOUC (Flash of Unstyled Content) during SSR.
- Governance and Naming: Defining strict naming conventions to ensure that designers and engineers share a single source of truth for UI properties.
Example Prompts
- "Design an architectural plan for a three-layer design token system that supports both a primary and secondary brand palette."
- "Help me configure Style Dictionary to transform my Figma-exported JSON tokens into CSS custom properties and TypeScript definitions."
- "Write a React ThemeProvider implementation that automatically detects system settings but allows manual overrides with persistence in localStorage."
Tips & Limitations
- Tip: Always start with primitive tokens as your single source of truth; never reference them directly in component logic to avoid refactoring pain.
- Tip: For large-scale systems, automate the token pipeline using CI/CD to prevent drift between design specs and the codebase.
- Limitation: This skill provides the architectural framework and code patterns but does not directly modify your repository files without your explicit prompt or approval. Ensure your project structure is ready for modular CSS variables before beginning implementation.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-wpank-design-system-patterns": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Related Skills
mermaid-diagrams
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
api-design-principles
Skill by wpank
auto-context
Automatically read relevant context before major actions. Loads TODO.md, roadmap.md, handoffs, task plans, and other project context files so the AI operates with full situational awareness. Use when starting a task, implementing a feature, refactoring, debugging, planning, or resuming a session.
clear-writing
Write clear, concise prose for humans — documentation, READMEs, API docs, commit messages, error messages, UI text, reports, and explanations. Combines Strunk's rules for clearer prose with technical documentation patterns, structure templates, and review checklists.
track-performance
Track the performance of Uniswap LP positions over time — check which positions need attention, are out of range, or have uncollected fees. Use when the user asks how their positions are doing.