Skip to content
cccskills
FreePublished on GitHub

openclaw-design-system

Apply Carapace styling to existing OpenClaw interfaces through shared CSS, themes, and semantic tokens—named values for visual roles. Reuse existing components and check interaction states, accessibility, and browser screenshots for consistent presentation.

OriginalShow the original description

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

See how to install

Good for

  • Align existing OpenClaw screens with Carapace styling
  • Reuse shared CSS and existing interface components
  • Review focus states, status colors, and accessible names
  • Check affected routes with tests and browser screenshots

Files included (3)

  • SKILL.md2.6 KB
  • references/consumer-adapters.md2.0 KB
  • references/tokens.md3.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

autoreview

FreeSummary

Review code using shared OpenClaw instructions and a Python helper, while also following the target repository’s review requirements. This skill points to a common installation that supplies the actual review procedure.

  • Reviewing code with shared OpenClaw instructions
  • Applying repository-specific review requirements
  • Keeping shared review instructions up to date
openclaw/clawhub9.5KUpdated Oct 19, 2026

axiom-alerting

FreeSummary

Create and manage Axiom alert rules and notification destinations through its API. Connect alerts to email, Slack, or webhooks, check monitor history, and adjust thresholds and evaluation schedules to address excessive or missing alerts.

  • Set up error alerts and notification destinations
  • Tune monitors that send too many alerts
  • Investigate monitors that never trigger
openclaw/clawhub9.5KUpdated Oct 19, 2026

axiom-sre

FreeSummary

Investigate production incidents and bugs using logs, metrics, and code evidence. The skill guides hypothesis testing, root cause analysis, fix validation, and reusable investigation notes, with access to configured observability tools such as Axiom.

  • Investigate production outages and rising error rates
  • Trace causes using logs, metrics, and code
  • Reproduce bugs and validate minimal fixes
openclaw/clawhub9.5KUpdated Oct 19, 2026

Design and build Axiom dashboards from logs or metrics, the numerical measurements of system behavior. Create charts, filters, and layouts for monitoring and reporting, or migrate existing Splunk and Grafana panels while validating queries against available data.

  • Build a service health monitoring dashboard
  • Create interactive filters for investigating logs
  • Migrate dashboards from Splunk or Grafana
openclaw/clawhub9.5KUpdated Oct 19, 2026

Drafts, previews, sends, and records emails for existing ClawHub content rights cases. It supports publisher removal notices and requester updates, requires approval of the final draft, and preserves the exact correspondence in the case record.

  • Preparing a skill removal notice for a publisher
  • Sending a requester a progress update or closure note
  • Preserving sent correspondence in an existing rights case
openclaw/clawhub9.5KUpdated Oct 19, 2026

clawhub-convex

FreeSummary

Apply ClawHub-specific rules when developing with Convex, including deployment targeting, runtime checks, data migrations, search performance, and skill statistics. It also directs specialized work to the appropriate companion skills.

  • Changing Convex functions or schemas
  • Planning production data migrations
  • Reviewing search query performance
openclaw/clawhub9.5KUpdated Oct 19, 2026

See all skills by openclaw

Report a problem with this skill