openclawopenclaw/docs/.agents/skills/openclaw-carapace/SKILL.md

openclaw-carapace

Skill76 starsChanged 27 days agoMITView on GitHub

Build or modify OpenClaw application UI using canonical semantic tokens, themes, shared CSS foundations, consumer adapters, and established local primitives. Use for product interfaces, component styling, theme work, or design-token integration.

We split this skill into the rules it gives an agent

20 rules. About 0 are common, 20 are distinctive, and 0 are very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈20
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Distinctive:
Use the shared package for foundations and framework-neutral visual primitives.
line 8
Distinctive:
Keep consumer-specific behavior, data, routes, and layout composition local.
line 9
Distinctive:
Read tokens.md before choosing colors, spacing, type, radii, or shadows.
line 13
Distinctive:
Read consumer-adapters.md for the current framework.
line 14
Distinctive:
Read application-surfaces.md when working on shells, panes, settings, or operational screens.
line 15
Distinctive:
Read terminal-ui.md when designing or auditing a terminal interface.
line 16
Distinctive:
Read embedded-surfaces.md when the surface renders inside a host frame, such as an MCP app.
line 17
Distinctive:
Use semantic tokens for UI intent.
line 19
Distinctive:
Keep application behavior, routes, and information architecture unchanged unless the task says otherwise.
line 20
Distinctive:
Import the complete CSS contract or its focused exported entry points.
line 25
Distinctive:
Use local shared primitives before raw controls or one-off component implementations.
line 27
Distinctive:
Keep one primary action per decision area.
line 28
Distinctive:
Use familiar icons for icon-only commands and provide accessible names.
line 29
Distinctive:
Use status colors for status, warning, success, error, and informational meaning.
line 30
Distinctive:
Keep cards, controls, and repeated fixed-format elements dimensionally stable.
line 31
Distinctive:
Avoid nested decorative cards and page sections styled as floating cards.
line 32
Distinctive:
Keep surfaces, controls, and insets square through their semantic radius tokens.
line 33
Distinctive:
Keep focus, hover, active, disabled, loading, and invalid states coherent.
line 35
Distinctive:
Keep text within its container at supported viewport sizes.
line 36
Distinctive:
Prefer dense, scan-friendly composition for operational product surfaces.
line 37

≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

Carapace

Use the shared package for foundations and framework-neutral visual primitives. Keep consumer-specific behavior, data, routes, and layout composition local.

Workflow

Read tokens.md before choosing colors, spacing, type, radii, or shadows.
Read consumer-adapters.md for the current framework.
Read application-surfaces.md when working on shells, panes, settings, or operational screens.
Read terminal-ui.md when designing or auditing a terminal interface.
Read embedded-surfaces.md when the surface renders inside a host frame, such as an MCP app.
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.
Share application anatomy across consumers without forcing web and native implementations into pixel-identical layouts.

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.

Download now (ZIP)

Other versions4 projects use a version of this.
Word for word · 4
openclaw/clawhub★ 9.5k100% same
clawdbot/clawdhub★ 9.5k100% same
moltbot/molthub★ 9.5k100% same
openclaw/carapace★ 7100% same
Edited · 0
None found.
Wrote their own version · 0
None found.
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository8 other files it gives its agents.
- AGENTS.mdAGENTS.md
- autoreviewSkill
- crabboxSkill
- openclaw-brandSkill
- openclaw-design-auditSkill
- openclaw-designSkill
- openclaw-design-systemSkill
- openclaw-marketing-pagesSkill

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free