A standardized framework for building reusable, type-safe UI components using Surface primitives and class-variance-authority.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install design-system-components
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install design-system-components using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Design System Components?
The Design System Components skill provides a professional architecture for developing scalable UI libraries that strictly adhere to design tokens. By utilizing Openclaw Skills, developers can implement the Surface primitive pattern, which provides a single, unified component for all layered UI elements like panels, tiles, and chips.
This approach leverages the power of class-variance-authority (CVA) to manage complex component states and styles in a type-safe manner. It ensures that styling remains consistent across an entire application while allowing for high flexibility through variant-based APIs, making it an essential resource for teams building modern design systems with React and Tailwind CSS.
Design System Components Use Cases
- Creating a centralized component library that follows a unified design token architecture.
- Building complex UI layouts that require consistent layering and backdrop-blur effects.
- Developing type-safe component APIs for React applications to improve developer experience.
- Standardizing interactive elements like buttons, badges, and metrics across various Openclaw Skills workflows.
- Automating the generation of high-quality UI components that avoid hardcoded styling and anti-patterns.
How Design System Components Works
- Define a core Surface primitive that handles background, border, and shadow logic based on specific layers.
- Utilize class-variance-authority (CVA) to create a structured map of style variants for each component.
- Extract TypeScript interfaces directly from the CVA definitions to ensure strict prop validation.
- Compose high-level components like Buttons and Cards by wrapping them in the Surface primitive or using the cn() utility for class merging.
- Implement default variants to ensure components remain functional and visually correct even when no props are passed.
- Integrate these patterns into your development environment via Openclaw Skills to maintain architectural consistency.
Design System Components Setup
To implement these patterns, first install the required dependencies in your project:
npm install class-variance-authority clsx tailwind-merge
Ensure you have a utility function for merging Tailwind classes effectively:
// lib/utils.ts
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Design System Components Data Schema & Taxonomy
The skill organizes design system data through a structured variant taxonomy within CVA objects:
| Component Type | Variant Keys | Metadata Details |
|---|---|---|
| Surface | layer, interactive, glow | Defines depth, interactivity, and shadow effects. |
| Button | variant, size | Manages aesthetic intent (destructive, cyber) and scale. |
| Metric | size, trend | Handles mono-spaced numeric displays and positive/negative trends. |
| Badge | variant | Controls status indicators (success, warning, etc.). |
| Card | Layout Props | Manages title, description, and action slots via composition. |
Design System Components Advanced Features
- Type-safe variant management using TypeScript's VariantProps for robust IDE support.
- Support for advanced glassmorphism and motion-ready interactive states through Openclaw Skills design patterns.
- Dynamic composition of multiple variants to handle complex status indicators and pulse animations.
- Seamless integration with Tailwind CSS design tokens to eliminate hardcoded hex codes.
- Extensible Surface architecture that allows for rapid addition of new UI layers without refactoring existing components.
SKILL.md
Loading
Related Openclaw Skills
Design Integration (Uniswap)
An AI-driven architectural designer that generates comprehensive blueprints for Uniswap protocol integrations.
Design Hook (Uniswap V4)
A specialized skill for architecting Uniswap V4 hooks, focusing on callback logic, state management, and security design without generating code.
Deploy Agent Token
Automate the end-to-end lifecycle of launching ERC-20 tokens on Uniswap V4 with enterprise-grade security hooks and liquidity management.
Decision Frameworks
A structured meta-skill for making confident, traceable engineering choices through proven frameworks like RICE scoring, MoSCoW, and ADRs.
Design System Creation
A comprehensive workflow for architecting distinctive, token-driven design systems from aesthetic foundation to component implementation.
Design System Patterns
A foundational skill for architecting scalable design systems through multi-layer token hierarchies, automated pipelines, and robust theming infrastructure.
Featured*
