How to use the OpenClaw Carapace UI Design agent skill

What the openclaw-carapace skill makes the agent do

An agent skill is a folder containing a SKILL.md file and optional reference documents. When a skill is installed and relevant to a request, the agent reads those instructions and follows them while it works. This skill is named openclaw-carapace and is about OpenClaw's UI design system, which the source calls Carapace.

The skill's main instruction is to use the shared package for foundations and framework-neutral visual primitives, while keeping consumer-specific behavior, data, routes and layout composition local. In practice, the agent is steered to read the token guide before choosing colors, spacing, type, radii or shadows, and to reuse shared classes from components.css before writing one-off styling.

• Reads reference guides on tokens, consumer adapters, application surfaces, terminal UI and embedded surfaces, depending on the task.
• Prefers semantic tokens for UI intent and uses palette primitives only for documented exceptions.
• Inspects existing shared primitives before creating a new component.
• Keeps application behavior, routes and information architecture unchanged unless the task says otherwise.
• Asks for validation with existing tests and real browser screenshots.

Install the skill from the ZIP or the Claude apps

Download the openclaw-carapace ZIP from this page and unzip it. For a personal setup, place the unzipped skill folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder instead, so it applies only to that codebase.

If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills. Choose the method that matches how you work: the personal folder for all your projects, the project folder for a shared repository, or the app upload if you do not want to manage files.

• Personal: ~/.claude/skills/openclaw-carapace/
• Project: .claude/skills/openclaw-carapace/ inside your repository
• Claude apps: Settings → Capabilities → Skills

Trigger the skill with natural requests

You do not need a special command. The skill's description covers building or modifying OpenClaw application UI, component styling, theme work and design-token integration, so ask for those things in plain language and name OpenClaw or the screen you want.

Being specific about the surface helps the agent choose the right reference file. Mentioning a settings screen, a terminal interface or an MCP app will point it toward the matching guide.

• "Add a settings panel to the OpenClaw dashboard using the existing shared controls."
• "Restyle this status card using OpenClaw semantic tokens instead of hard-coded colors."
• "Build a terminal-style log view for the OpenClaw console that follows the terminal UI rules."
• "Make this MCP app inherit the host theme variables."

Example workflow and what to check in the output

A typical run has the agent read the token reference, check the framework adapter you are using, look for an existing primitive, and then make the change. Review the result against the interface rules: one primary action per decision area, icons with accessible names, status colors used only for status meaning, and square geometry except for avatars, status dots and other truly circular indicators.

Because the skill asks for validation, expect the agent to run the affected routes' existing tests and take browser screenshots. Look at those screenshots yourself, particularly for text overflow at smaller viewport sizes.

• Confirm no new one-off component duplicates a shared class.
• Check that colors and spacing come from semantic tokens.
• Confirm routes and behavior were not changed by accident.

Safety notes: scripts and network

The skill's metadata lists no required dependencies, says it does not run scripts, and says it does not use the network. It consists of Markdown instructions and reference files. Because it is written for OpenClaw's own shared package and conventions, the agent's changes will still need normal code review before merging.

• Requires: nothing listed
• Runs scripts: no
• Uses network: no

Tips for getting good results

The skill works best on OpenClaw repositories or on consumers that import the OpenClaw shared package. Point the agent at the current framework so it reads the correct adapter guide. For quick throwaway mockups where strict design-system conformance is not needed, you may not need this skill at all.

• Name the framework (plain CSS, Astro, Tailwind 4) so the right adapter guide is read.
• Name the surface type (shell, settings, terminal, embedded app) to target the right reference.
• Ask the agent to inspect existing primitives first if you want reuse over new components.