web-design-guidelines · nexu-io — Claude Code skill: usage & install
Audits product interface code against Vercel design guidelines for layout, typography, motion, and accessibility. Useful for frontend code reviews.
npx skills add nexu-io/open-design --skill web-design-guidelines -a claude-codeWhat web-design-guidelines does
This skill reviews user interface files against the Web Interface Guidelines created by the Vercel engineering team. It inspects layout structure, color schemes, typography, motion, and accessibility attributes. Each issue prints in a compact file:line format to speed up corrections.
Execution relies on a pinned copy stored in references/guidelines.md as the default source. This keeps checks predictable across environments. You can also fetch the upstream rule set directly from the Vercel repository to inspect recent rule updates.
When run without file arguments, the assistant asks for target files or a glob pattern. The pinned snapshot prevents rule drift between builds.
What it helps with
- Audit frontend code against Vercel interface rules
- Catch accessibility defects in web components
- Inspect typography and spacing inconsistencies
- Locate UI design issues in terse
file:lineformat
Example prompts for the agent
- Review my UI code in src/components against web design guidelines
- Check accessibility and typography for Button.tsx
- Audit design and motion in modal.tsx
How to install web-design-guidelines
1Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-design-guidelines -a claude-code2Manually: put the files in place
~/.claude/skills/web-design-guidelines/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/web-design-guidelines/
1Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-design-guidelines -a codex2Manually: put the files in place
.agents/skills/web-design-guidelines/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-design-guidelines -a cursor2Manually: put the files in place
.cursor/skills/web-design-guidelines/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design web-design-guidelines2Manually: put the files in place
.github/skills/web-design-guidelines/SKILL.md1Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-design-guidelines -a gemini-cli2Platform CLI
gemini skills install https://github.com/nexu-io/open-design --path skills/web-design-guidelinesManually: put the files in place
.devin/skills/web-design-guidelines/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-design-guidelines -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about web-design-guidelines
How do I install web-design-guidelines in Claude Code?
Run npx skills add nexu-io/open-design --skill web-design-guidelines -a claude-code. Alternatively, place the skill file directly at ~/.claude/skills/web-design-guidelines/SKILL.md.
What does web-design-guidelines check?
It evaluates component code against Vercel standards across layout, typography, colors, animations, and accessibility rules.
Where does the skill pull its guidelines from?
It defaults to the local snapshot in references/guidelines.md for consistent results. You can optionally fetch the live document from the upstream Vercel repository.
Source text
SKILL.md · MIT
---
name: web-design-guidelines
description: |
Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.
triggers:
- "web design guidelines"
- "vercel design"
- "product ui standards"
- "design checklist"
- "review my UI"
- "check accessibility"
- "audit design"
- "review UX"
- "设计审查"
metadata:
author: vercel
version: "1.0.0"
argument-hint: <file-or-pattern>
od:
mode: design-system
surface: web
platform: desktop
category: design-systems
upstream: "https://github.com/vercel-labs/web-interface-guidelines"
source-commit: 4e799d45c17aec1498c269287a83b9dba22b966b
preview:
type: markdown
example_prompt: |
Review my UI code against the Vercel Web Interface Guidelines — check layout, typography, color, motion, and accessibility compliance.
---
# Web Interface Guidelines
Review files for compliance with Web Interface Guidelines.
## How It Works
1. Load the pinned guidelines from [`references/guidelines.md`](references/guidelines.md) — this is the default, reproducible execution path
2. Optionally, fetch the latest guidelines from the upstream URL below and diff against the pinned snapshot to see if anything has changed
3. Read the specified files (or prompt user for files/pattern)
4. Check against all rules in the guidelines
5. Output findings in the terse `file:line` format
## Guidelines Source
**Default (pinned):** The vendored copy at [`references/guidelines.md`](references/guidelines.md) is the default execution path. It is a pinned snapshot of the upstream guidelines and guarantees the skill produces reproducible results in any runtime environment.
**Upstream (live):** For users who want the very latest rules, the live source is available at:
```
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
```
Fetching the live version is optional — the pinned snapshot is always the baseline.
## Usage
When a user provides a file or pattern argument:
1. Load [`references/guidelines.md`](references/guidelines.md) as the default source
2. Optionally fetch the upstream URL to check for updates
3. Read the specified files
4. Apply all rules from the guidelines
5. Output findings using the format specified in the guidelines
If no files specified, ask the user which files to review.
© vercel · MIT · nexu-io/open-design
Similar skills
Everything for Design →web-design-guidelines by other authors comes first.
