Web Design Guidelines

Added March 5, 2026 Source: Vercel

Review your UI code against Web Interface Guidelines. This skill fetches the latest rules from a source URL and checks your specified files for compliance. Use it to quickly audit design, accessibility, and general UX best practices.

Installation

This skill is self-contained. Copy the SKILL.md below directly into your project to get started.

.claude/skills/web-design-guidelines/SKILL.md    # Claude Code
.cursor/skills/web-design-guidelines/SKILL.md    # Cursor

Or install as a personal skill (available across all your projects):

~/.claude/skills/web-design-guidelines/SKILL.md

You can also install using the skills CLI:

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Requires Node.js 18+.

SKILL.md

---
name: web-design-guidelines
description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
metadata:
  author: vercel
  version: "1.0.0"
  argument-hint: <file-or-pattern>
---

# Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

## How It Works

1. Fetch the latest guidelines from the source URL below
2. Read the specified files (or prompt user for files/pattern)
3. Check against all rules in the fetched guidelines
4. Output findings in the terse `path:line` format

## Guidelines Source

Fetch fresh guidelines before each review:

```
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
```

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

## Usage

When a user provides a file or pattern argument:
1. Fetch guidelines from the source URL above
2. Read the specified files
3. Apply all rules from the fetched guidelines
4. Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

Originally by Vercel, adapted here as an Agent Skills compatible SKILL.md.

This skill follows the Agent Skills open standard, supported by Claude Code, Cursor, Codex, Gemini CLI, and 20+ more editors.

Works with

Claude Code Cursor Codex CLI Gemini CLI VS Code Windsurf Amp Roo Code Goose Trae OpenCode Spring AI

Agent Skills format — supported by 20+ editors. Learn more