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

openclaw-design-audit

Audit OpenClaw frontend code and rendered interfaces for design system drift and accessibility defects.

9.4k|1.5k|Updated Jan 3, 2026
Search Tags:#tokens# accessibility#Design system#frontend review#GitHub pull request#carapace#Design audit
One-click install
npx skills add https://github.com/openclaw/clawhub --skill openclaw-design-audit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: openclaw-design-audit
Source: https://github.com/openclaw/clawhub/tree/main/.agents/skills/openclaw-design-audit
Command: npx skills add https://github.com/openclaw/clawhub --skill openclaw-design-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend codebases drift from their design system over time: raw colors replace semantic tokens, primitives get reimplemented, and accessibility or responsive defects slip in. This Skill provides a structured, rule-based audit that separates mechanical violations from judgment calls and produces consistent, comparable reports.

Core Features & Use Cases

  • Rule-Based Rubric: Runs mechanical checks (raw colors, undefined tokens, duplicate components, missing accessible names, overflow, theme parity) plus judgment checks (hierarchy, typography, brand accent, copy clarity) with stable rule IDs and severities.
  • Structured Reports: Emits both design-audit.json and design-audit.md with severity counts, file/line evidence, and remediation guidance.
  • Constrained Auto-Fix: Applies only narrow, deterministic fixes allowed by the fix policy, leaving redesign and copy changes for human review.
  • GitHub PR Delivery: Opens or updates a dedicated automation pull request against the consumer repository based on a findings decision table.
  • Use Case: Schedule a recurring audit of the ClawHub web app against a pinned Carapace design system version, and receive a pull request containing the report and allowed token fixes whenever errors or warnings appear.

Quick Start

Audit this repository's frontend against the installed Carapace design system and generate the JSON and Markdown design audit reports.

Frequently Asked Questions about openclaw-design-audit

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

FAQPage Schema
How do I audit frontend code for design system drift?▼

Run the audit workflow, which reads the installed Carapace version's token contract, applies the rubric's mechanical and judgment rules to source and rendered routes, and emits design-audit.json and design-audit.md with severity-ranked findings.

What checks does a design audit rubric include?▼

The rubric covers mechanical rules like raw colors, undefined tokens, duplicate components, missing accessible names, overflow, and theme parity, plus judgment checks for hierarchy, typography scale, brand accent usage, and copy clarity.

Can the audit automatically fix the findings it reports?▼

Yes, but only narrow deterministic fixes allowed by the fix policy, such as replacing raw values with canonical semantic tokens or adding unambiguous accessible labels. Copy, navigation, redesign, and architecture changes always require human review.

Does the design audit support both light and dark themes?▼

Yes, the workflow inspects representative rendered routes at desktop and mobile sizes and checks light and dark themes where supported. The theme/parity rule flags cases where a theme loses content, hierarchy, or contrast.

When does the audit open a GitHub pull request?▼

A pull request is opened or updated when there are any errors, any warnings, or more than five informational findings. Clean runs with minimal findings produce artifacts and a job summary only, and obsolete open audit PRs are closed.

Related Skills

Explore More Design & Creative Skills→
nguyenpv1980-wqnguyenpv1980-wq
2

api-contract-test-designer

Design contract verification tests for APIs, webhooks, RPC, and edge functions.

Community
Advanced
rethinkhealthrethinkhealth
6

todo-triage

Automate triage of pending todos with severity, category, and recommended action.

Official
Advanced
mdmagnuson-creatormdmagnuson-creator

screenshot

Capture Playwright screenshots of web pages in light and dark themes.

Community
Intermediate
charleshall888charleshall888
1

ui-lint

Run ESLint and Stylelint auto-fix passes and export a JSON lint report.

Community
Intermediate