Openclaw design system

Skill openclaw/carapace/openclaw-design-system

Canonical web design tokens, styles, and agent guidance for OpenClaw

Install

npx -y skills add openclaw/carapace --skill openclaw-design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

28 days oldThe repository was created 28 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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

SKILL.md

2.6 KB, as published. Nobody here has run it

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

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

Interface Rules

Import the complete CSS contract or its focused exported entry points.
Compose shared classes from components.css before adding a one-off visual implementation.
Use local shared primitives before raw controls or one-off component implementations.
Keep one primary action per decision area.
Use familiar icons for icon-only commands and provide accessible names.
Use status colors for status, warning, success, error, and informational meaning.
Keep cards, controls, and repeated fixed-format elements dimensionally stable.
Avoid nested decorative cards and page sections styled as floating cards.
Keep surfaces, controls, and insets square through their semantic radius tokens.
Reserve round geometry for avatars, status dots, and other truly circular indicators.
Keep focus, hover, active, disabled, loading, and invalid states coherent.
Keep text within its container at supported viewport sizes.
Prefer dense, scan-friendly composition for operational product surfaces.

Ownership

Move visual implementation into this repository 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 and behavior.