# Openclaw Design System

Compatibility alias for existing OpenClaw installations that now applies Carapace...

- Repository: https://github.com/openclaw/clawhub (9543 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add openclaw/clawhub --skill openclaw-design-system -g -a claude-code -y`
Codex: `npx skills add openclaw/clawhub --skill openclaw-design-system -g -a codex -y`
Cursor: `npx skills add openclaw/clawhub --skill openclaw-design-system -g -a cursor -y`
Gemini CLI: `npx skills add openclaw/clawhub --skill openclaw-design-system -g -a gemini-cli -y`

## Description

Compatibility alias for existing OpenClaw installations that now applies Carapace semantic tokens, themes, shared CSS foundations, consumer adapters, and established local primitives.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Carapace Compatibility Alias

This skill identifier remains available for existing `skills-lock.json`
entries during the `v0.1.x` migration. New installations should use
`openclaw-carapace`.

Use the shared package for foundations and framework-neutral visual primitives.
Keep consumer-specific behavior, data, routes, and layout composition local.
Before changing imports, inspect the consumer manifest: use
`@openclaw/carapace` when it is installed, otherwise preserve the legacy
`@openclaw/design-system` specifier until the dependency is migrated.

## Workflow

1. Read [tokens.md](references/tokens.md) before choosing colors, spacing, type, radii, or shadows.
2. Read [consumer-adapters.md](references/consumer-adapters.md) for the current framework.
3. Inspect the consumer's existing shared primitives before creating a component.
4. Use semantic tokens for UI intent; use palette primitives only for documented exceptions.
5. Keep application behavior, routes, and information architecture unchanged unless the task says otherwise.
6. Validate the affected routes with existing tests and real browser screenshots.

## Interface Rules

The rest: https://github.com/openclaw/clawhub/blob/HEAD/.agents/skills/openclaw-design-system/SKILL.md