agentleFS
Sign inStart free
openclawopenclaw/docs/.agents/skills/openclaw-design-system/SKILL.md

openclaw-design-system

Skill76 starsChanged 27 days agoMITView on GitHub

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

We split this skill into the rules it gives an agent

18 rules. About 0 are common, 16 are distinctive, and 2 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈16

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 2

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use the shared package for foundations and framework-neutral visual primitives.

    line 12
  2. Very specific:

    Keep consumer-specific behavior, data, routes, and layout composition local.

    line 13
  3. Very specific:

    Before changing imports, inspect the consumer manifest: use @openclaw/carapace when it is installed, otherwise preserve the legacy …

    line 14
  4. Distinctive:

    Read tokens.md before choosing colors, spacing, type, radii, or shadows.

    line 20
  5. Distinctive:

    Read consumer-adapters.md for the current framework.

    line 21
  6. Distinctive:

    Use semantic tokens for UI intent.

    line 23
  7. Distinctive:

    Keep application behavior, routes, and information architecture unchanged unless the task says otherwise.

    line 24
  8. Distinctive:

    Import the complete CSS contract or its focused exported entry points.

    line 29
  9. Distinctive:

    Use local shared primitives before raw controls or one-off component implementations.

    line 31
  10. Distinctive:

    Keep one primary action per decision area.

    line 32
  11. Distinctive:

    Use familiar icons for icon-only commands and provide accessible names.

    line 33
  12. Distinctive:

    Use status colors for status, warning, success, error, and informational meaning.

    line 34
  13. Distinctive:

    Keep cards, controls, and repeated fixed-format elements dimensionally stable.

    line 35
  14. Distinctive:

    Avoid nested decorative cards and page sections styled as floating cards.

    line 36
  15. Distinctive:

    Keep surfaces, controls, and insets square through their semantic radius tokens.

    line 37
  16. Distinctive:

    Keep focus, hover, active, disabled, loading, and invalid states coherent.

    line 39
  17. Distinctive:

    Keep text within its container at supported viewport sizes.

    line 40
  18. Distinctive:

    Prefer dense, scan-friendly composition for operational product surfaces.

    line 41

≈ “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 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 before choosing colors, spacing, type, radii, or shadows.
  2. Read 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

  • 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.

Download now (ZIP)

Trending

Steady: 0 new projects took it in the last 4 weeks, none the 4 weeks before.thin data

Week of Aug 30: 0 new projectsWeek of Sep 6: 0 new projectsWeek of Sep 13: 0 new projectsWeek of Sep 20: 0 new projectsWeek of Sep 27: 0 new projectsWeek of Oct 4: 0 new projectsWeek of Oct 11: 0 new projectsWeek of Oct 18: 0 new projects
Aug 2026Sep 2026Oct 2026
New projects taking a version of this file each week, over the 8 weeks our latest run read: only 0 in all, so this is a hint, not a trend.
  • Other versions4 projects use a version of this.

    Word for word · 4

    1. openclaw/clawhub★ 9.5k100% same
    2. clawdbot/clawdhub★ 9.5k100% same
    3. moltbot/molthub★ 9.5k100% same
    4. 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.

Does it work?

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

Reviews can't be read right now.

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