skills.rest
openclaw
openclawOFFICIAL
Explore all skills by this author →
Website𝕏@openclawGitHub

openclaw-carapace

Build OpenClaw application UI using semantic design tokens, themes, and shared CSS primitives.

9.4k|1.5k|Updated Jan 3, 2026
Search Tags:#CSS#Tailwind#themING#Design system#Openclaw#UI Components#Design tokens
One-click install
npx skills add https://github.com/openclaw/clawhub --skill openclaw-carapace
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: openclaw-carapace
Source: https://github.com/openclaw/clawhub/tree/main/.agents/skills/openclaw-carapace
Command: npx skills add https://github.com/openclaw/clawhub --skill openclaw-carapace

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building consistent OpenClaw product interfaces across web, native macOS, terminal, and embedded MCP surfaces is hard when every consumer invents its own colors, spacing, and components. This Skill enforces the canonical Carapace design system so UI work stays coherent across consumers.

Core Features & Use Cases

  • Semantic token guidance: Directs color, spacing, typography, radius, and motion choices through the --oc-* token contract instead of ad-hoc values.
  • Consumer adapters: Provides import order and integration rules for plain CSS, Astro, Tailwind 4, native macOS (SwiftUI/AppKit), and static documentation builders.
  • Surface-specific references: Covers application shells and settings panes, terminal UI compositions, and sandboxed embedded MCP app surfaces with sizing, branding, and lifecycle rules.
  • Use Case: When styling a new settings screen in the Control UI, follow the workflow to read the token and application-surface references, compose existing .oc-* classes, and validate with browser screenshots instead of writing one-off CSS.

Quick Start

Ask the agent to restyle an OpenClaw route or component using the Carapace semantic tokens and shared component classes, then validate the result with existing tests and browser screenshots.

Frequently Asked Questions about openclaw-carapace

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style an OpenClaw UI component with Carapace tokens?▼

Read the token contract first, then use semantic tokens like --oc-bg-surface and --oc-text-primary for UI intent instead of raw palette values. Compose existing classes from components.css before writing any one-off visual implementation.

How do I import Carapace CSS in a Tailwind 4 project?▼

Import tokens.css, themes.css, typography.css, components.css, the product theme, the ClawHub compat adapter, and tailwind.css in that order. The Tailwind adapter exposes theme utilities while components.css provides framework-neutral classes.

Does Carapace support native macOS apps?▼

Yes, but macOS consumers map the shared anatomy onto SwiftUI and AppKit rather than importing the CSS. They keep native materials, title bars, keyboard commands, and accessibility semantics while aligning hierarchy, spacing roles, and status meaning.

How do embedded MCP apps handle theming with Carapace?▼

Import the candidate embed.css layer, which translates the MCP Apps hostContext style variables into semantic tokens. The host owns frame and theme values; the app owns its content, layout, and a single accent for primary actions.

When should I not create a new component in Carapace?▼

Do not create shared components for consumer-specific behavior, data, routes, or layout composition. Move visual implementation into the shared package only when its interface is framework-neutral and at least two consumers need the same interface and behavior.

Related Skills

Explore More Design & Creative Skills→
riabtsevriabtsev

extract

Extract reusable UI components and design tokens into a TypeScript design system.

Community
Intermediate
spencerpaulyspencerpauly
672

dark-mode-testing

Detect dark mode rendering defects by comparing light and dark browser states.

Community
Intermediate
erp-mafiaerp-mafia
209

swarm-a11y-agent

Audit Next.js/React frontend code for WCAG AA accessibility compliance.

Official
Advanced
yourdevujjawalyourdevujjawal

shadcn-ui

Automate shadcn/ui component adoption in React projects with TypeScript and Tailwind CSS.

Community
Advanced