Web Design Guidelines

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".

33,282 stars 2,913 forksFrontend & DesignOfficial

Install

skills CLI (Claude Code, Cursor, Codex and more)

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

Manual install

git clone --depth 1 https://github.com/vercel-labs/agent-skills.git /tmp/agent-skills
mkdir -p ~/.claude/skills
cp -r /tmp/agent-skills/skills/web-design-guidelines ~/.claude/skills/web-design-guidelines

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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 `file: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.

Read the full skill on GitHub

Details

Skill name: web-design-guidelines
Repository: vercel-labs/agent-skills
Path: skills/web-design-guidelines/SKILL.md
Repo updated: 28 October 2026
Listed in: heilcheng/awesome-agent-skills, VoltAgent/awesome-agent-skills

FAQ

What does the Web Design Guidelines skill do?

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".

How do I install the Web Design Guidelines skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add vercel-labs/agent-skills --skill web-design-guidelines. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Web Design Guidelines popular?

It lives in vercel-labs/agent-skills, which has 33,282 GitHub stars and 2,913 forks, and is included in 2 curated skill lists.

Related skills

Deploy to Vercel

33k

vercel-labs/agent-skills

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".

DevOps & CloudIn 2 lists2.9k

Vercel CLI with Tokens

33k

vercel-labs/agent-skills

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".

DevOps & CloudIn 2 lists2.9k

Vercel Composition Patterns

33k

vercel-labs/agent-skills

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

DevOps & CloudIn 2 lists2.9k

Figma

28k

openai/skills

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

Frontend & DesignIn 2 lists2k

Vercel React View Transitions

33k

vercel-labs/agent-skills

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating bet

Frontend & DesignIn 2 lists2.9k

Figma Implement Design

28k

openai/skills

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

Frontend & DesignIn 2 lists2k

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.