design-system-architect

What This Skill Does

The design-system-architect skill transforms OpenClaw into a senior frontend architecture consultant. It provides a structured framework for designing, documenting, and implementing enterprise-grade component libraries. By leveraging the Atomic Design methodology, this skill helps you categorize your UI into atoms, molecules, organisms, templates, and pages. It goes beyond simple styling to establish a foundation of design tokens, managing complex global states like typography, color scales, and spacing systems. Whether you are building from scratch or refactoring an existing codebase, this skill provides the architectural oversight needed to ensure consistency, scalability, and strict adherence to accessibility standards.

Installation

To install this skill, run the following command in your OpenClaw terminal: clawhub install openclaw/skills/skills/anton-abyzov/sw-design-system-architect

Use Cases

• Creating a Component Library: Quickly scaffold a scalable directory structure and define consistent props interfaces for React or Vue components.
• Implementing Theming: Set up robust CSS variable systems to support seamless toggling between light, dark, and high-contrast modes.
• Design Token Management: Define centralized design system tokens such as font scales, spacing, and semantic color palettes to ensure design-to-code parity.
• Documentation Generation: Use it to guide the creation of Storybook documentation, including component API tables, visual state variants, and accessibility usage guidelines.

Example Prompts

1. "Design a button component API that supports variant (primary, secondary, danger), size (sm, md, lg), and loading states using TypeScript, including accessibility attributes for screen readers."
2. "Help me create a CSS-in-JS theme configuration for a brand with a 4px spacing grid, a custom typography scale, and semantic color tokens for success, warning, and error states."
3. "Refactor our existing header component structure into an organism that follows atomic design principles and supports multi-brand theming via CSS variables."

Tips & Limitations

• Consistency: Always begin by establishing your design tokens. Building components without a solid token foundation leads to 'magic numbers' in your CSS which are difficult to maintain long-term.
• TypeScript usage: Leverage the skill's capability to generate strict TypeScript interfaces; this significantly reduces bugs when team members consume your component library.
• Accessibility: While this skill provides excellent guidelines, ensure you manually test with screen readers, as design system architecture is only one part of total accessibility compliance.
• Scope: Note that this skill is focused on design systems and component architecture; it is not a visual graphic design tool (e.g., Figma). It assumes the design phase is complete or in progress.