본문으로 건너뛰기
cccskills
무료GitHub에 공개

openclaw-design-system

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(3)

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

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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Structured code review through the shared OpenClaw agent-skills installation.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

openclaw/docs762026년 10월 20일 업데이트

crabbox

무료

Use the Crabbox wrapper for OpenClaw remote validation across Linux, macOS, Windows, and WSL2, including delegated Blacksmith Testbox proof. Report the actual provider and id.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

openclaw/docs762026년 10월 20일 업데이트

Apply OpenClaw visual identity to logos, typography, imagery, voice, documents, presentations, social graphics, and launch materials. Use when the task changes brand identity rather than ordinary product UI or public-page composition.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

openclaw/docs762026년 10월 20일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

openclaw/docs762026년 10월 20일 업데이트

Route OpenClaw design work to canonical brand, Carapace product-interface, marketing-page, or design-audit guidance. Use when a task touches OpenClaw visual identity, shared CSS tokens, product UI, public web pages, or Carapace compliance.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

openclaw/docs762026년 10월 20일 업데이트

Audit OpenClaw frontend code and rendered interfaces for Carapace drift, token misuse, primitive reimplementation, accessibility problems, responsive defects, and off-brand copy. Use for design reviews, compliance checks, or scheduled audit-and-fix workflows.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

openclaw/docs762026년 10월 20일 업데이트

openclaw의 스킬 모두 보기

이 스킬의 문제 신고