Setup & Installation
openclaw skills install @kjaylee/kj-web-design-guidelines
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
npx clawhub install kj-web-design-guidelines
What This Skill Does
Checks UI code files against the Web Interface Guidelines published by Vercel Labs. Fetches the latest ruleset before each review, then reports violations in a concise file:line format.
Always pulls the current guidelines instead of relying on a static snapshot, so reviews reflect the latest rules without manual updates.
When to use it
- Auditing a component file before a pull request
- Catching accessibility issues in new page layouts
- Reviewing a design system implementation for spec compliance
- Running a quick UX check on a landing page
- Validating HTML/CSS output from a generated UI
Example Workflow
Here's how your AI assistant might use this skill in practice.
INPUT
User asks: review my UI for src/components/Hero.tsx
AGENT
- 1Fetch latest guidelines from the Vercel Labs raw GitHub URL
- 2Read the specified file src/components/Hero.tsx
- 3Apply each rule from the fetched guidelines to the file content
- 4Collect all violations with their line numbers
- 5Output findings in file:line format
OUTPUT
src/components/Hero.tsx:14 — missing alt attribute on img element src/components/Hero.tsx:31 — interactive element lacks visible focus indicator