Skip to content
alyn
Vercel Official

Web Design Guidelines skill

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

$npx skills add vercel-labs/agent-skills --skill web-design-guidelines
GitHub stars
33,847
Pack installs
3.2M
Alyn Score
77/99
Updated
13 days ago

Vercel

Web Design Guidelines

Design Web development Frontend

Install Web Design Guidelines

Pick your agent. Every command is ready to paste.

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

The open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.

01

Install it

Run the command above, or upload the folder in Claude.

02

Ask naturally

Describe the task. Your agent loads web-design-guidelines when the request matches its description.

03

Name it if needed

If it does not trigger, say “use the web-design-guidelines skill”. In Codex, type $web-design-guidelines.

The skill itself

SKILL.md

GitHub

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.

Tips for Web Design Guidelines

  • • Start a fresh session after installing so your agent picks up the new skill.
  • • It is part of a pack with 9 skills. Install only the ones you need with --skill to keep triggers precise.
  • • If two skills overlap, mention the one you want by name.

Questions about Web Design Guidelines

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 Web Design Guidelines?

Run "npx skills add vercel-labs/agent-skills --skill web-design-guidelines" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.

Does Web Design Guidelines work in Cursor and Codex?

Yes. Web Design Guidelines uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.

Is Web Design Guidelines free?

Web Design Guidelines is open source on GitHub. It is free to install; check the license before commercial use.

Who made Web Design Guidelines?

Web Design Guidelines is published by Vercel in the vercel-labs/agent-skills repository, together with 8 other skills.

Similar skills. From other creators.