skills.rest
openclaw
openclawOFFICIAL
Explore all skills by this author →
Website𝕏@openclawGitHub

openclaw-design-system

Applies Carapace semantic tokens, themes, and shared CSS foundations to OpenClaw consumer interfaces.

9.4k|1.5k|Updated Jan 3, 2026
Search Tags:#CSS#Tailwind#themING#Design system#Migration#UI Components#Design tokens
One-click install
npx skills add https://github.com/openclaw/clawhub --skill openclaw-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: openclaw-design-system
Source: https://github.com/openclaw/clawhub/tree/main/.agents/skills/openclaw-design-system
Command: npx skills add https://github.com/openclaw/clawhub --skill openclaw-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Maintaining consistent visual design across OpenClaw consumer applications is difficult when each app invents its own colors, spacing, and component styles. This Skill provides a compatibility alias that guides AI agents to apply the shared Carapace design system—semantic tokens, themes, and framework-neutral CSS primitives—while preserving legacy @openclaw/design-system imports during migration.

Core Features & Use Cases

  • Semantic Token Guidance: Directs the use of --oc-bg-*, --oc-text-*, --oc-accent-*, radius, motion, and product tokens instead of hardcoded values.
  • Framework Adapters: Provides import order and configuration for plain CSS, Astro, Tailwind 4, and static documentation builders via the consumer-adapters reference.
  • Migration Compatibility: Keeps existing skills-lock.json entries working during the v0.1.x transition to openclaw-carapace.
  • Use Case: When restyling a ClawHub route, the agent reads the token contract, composes shared classes from components.css, and validates the result with tests and browser screenshots instead of writing one-off styles.

Quick Start

Apply the OpenClaw design system tokens and shared component classes to restyle this page while keeping its routes and behavior unchanged.

Frequently Asked Questions about openclaw-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply the OpenClaw design system to a Tailwind 4 project?▼

Import the CSS exports in order: tokens.css, themes.css, typography.css, components.css, themes/product.css, compat/clawhub.css, then tailwind.css. The Tailwind adapter exposes theme utilities while components.css provides framework-neutral classes.

What is the difference between @openclaw/design-system and @openclaw/carapace?▼

Carapace is the new package name for the shared design foundations. The legacy @openclaw/design-system specifier remains for consumers pinned to older versions; use @openclaw/carapace only when the consumer manifest already installs it.

Which CSS variables should I use for colors and spacing?▼

Use semantic tokens like --oc-bg-page, --oc-text-primary, and --oc-accent-primary for UI intent, and scale tokens like --oc-space-* and --oc-radius-* for dimensions. Reserve palette primitives for documented exceptions only.

Does the design system work with Astro and plain CSS?▼

Yes, plain CSS and Astro consumers can import the complete contract with a single @import statement, or import tokens, themes, and typography individually for a controlled migration while retaining consumer-specific layout CSS.

When should I create a new shared component instead of a local one?▼

Move a visual implementation into the shared package only when its interface is framework-neutral and useful across consumers. Keep runtime behavior and framework adapters local until at least two consumers need the same interface.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

design-token-audit

Audit design token usage across multi-project design systems to identify inconsistencies and gaps.

Official
Advanced
clawperatorclawperator
2

release-create

Validate version consistency and create annotated git tags for releases.

Official
Advanced
HDeiblerHDeibler
6

color-accessibility-and-mode

Validate UI color choices for WCAG contrast and light/dark mode support.

Community
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-colour-foundation

Apply Canopy colour tokens and WCAG contrast rules to Angular projects.

Official
Intermediate