Skip to content
Web Design Guidelines

Web Design GuidelinesSkill

by Vercel
Added to Onei
v1.0.0
MIT
Repository Docs
markdown DevelopmentDesign & Creative

Summary

Vercel's official skill for auditing UI code against the Web Interface Guidelines — accessibility, performance and UX rules reported as terse file:line findings.

Features

  • Audits UI code against the Web Interface Guidelines ruleset
  • Covers accessibility, performance and UX categories
  • Reports findings in a terse file:line format
  • Fetches the latest rules from source before every review
  • Accepts a file or glob pattern as its argument
  • Framework-agnostic — reviews the interface, not the library

Install This Skill

Add this skill to your favorite AI agent in a few steps.

Any AI agent

This skill is plain instructions — it works with any assistant that accepts custom instructions or system prompts.

  1. Copy the skill content with the button below.
  2. Paste it into your agent's instruction file or system prompt (for example AGENTS.md, .cursorrules, or a custom instructions field).
  3. Ask the agent to apply the skill whenever the task matches.

Skill Content

Markdown Content

Copy this content and use it with your preferred AI agent

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

Description

Web Design Guidelines is an official agent skill from Vercel that turns the Web Interface Guidelines into an automated review pass over your own components.

Ask your coding agent to "review my UI", "check accessibility" or "audit design" and the skill fetches the current ruleset from source, reads the files or glob you point it at, and reports every violation in a terse file:line format that is quick to scan and quick to fix.

What makes it different from a linter. ESLint and axe check what can be checked statically in the file in front of them. These guidelines cover the judgement-shaped rules that static tooling misses — focus order and keyboard traps, touch-target sizing, loading and empty states, motion and prefers-reduced-motion, form semantics and error messaging, contrast, and layout shift. The agent reads the rendered intent of the component, not just its AST.

Always-current rules. The skill deliberately holds no copy of the ruleset. It fetches command.md from the vercel-labs/web-interface-guidelines repository before every review, so an audit run today applies today's rules without you upgrading anything.

Who it is for. Frontend and design-systems engineers who want an accessibility and UX gate they can run on a branch before review, and teams standardising interface quality across several codebases. It is framework-agnostic — the rules are about the interface, not about React or Next.js — though it pairs naturally with the rest of Vercel's React skills.

Distributed MIT-licensed as part of vercel-labs/agent-skills, and installable alongside the whole collection with npx skills add vercel-labs/agent-skills. Works in any SKILL.md-compatible agent, including Claude Code, Cursor, Codex and Gemini CLI.

Install

Related Skills

Skill: Anti-Slop Design

by Ferousco-dev

Featured

Stops AI-generated UI from defaulting to purple gradients and templated hero sections by forcing a named design direction first.

Design & Creative
51 views 18 copies
Browse all skills →