CookiesForAI

web-design-guidelines

Web Design Guidelines

Web Design Guidelines is Vercel's agent skill for UI review: the agent checks your files against Vercel's Web Interface Guidelines and lists each issue by file and line.

Agent skill by Vercel Official · Updated

Install Web Design Guidelines

Install this skill with the skills CLI

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

Or install every Vercel skill at once

Terminal
npx skills add vercel-labs/agent-skills

Or paste this into your coding agent: Install the agent skill web-design-guidelines from github.com/vercel-labs/agent-skills. A skill can include scripts that run on your computer, so read its source first.

What Web Design Guidelines does

Web Design Guidelines is Vercel's skill for reviewing UI code against its Web Interface Guidelines, a rule set Vercel keeps in a separate repository. It loads when you ask an agent to review your UI, check accessibility, audit design, review UX or check a site against best practices. You pass it a file or a file pattern; with none, the agent asks which files to review.

Before each Web Design Guidelines review the agent fetches the latest guidelines from GitHub, so the rules are not stored in the skill and the agent needs web access. The current rules include accessibility, focus states, forms, animation, typography, images, performance, navigation and state, touch, safe areas, dark mode, localization, hydration safety, hover states and copy, plus anti-patterns to flag. Findings come back grouped by file in a short file:line format.

When to use Web Design Guidelines

  • You finished a page or component and want an accessibility and UX check before you ship it.
  • You want UI issues listed with file and line numbers you can click through.
  • You are reviewing a pull request that changes forms, focus states or animations.

When to pick something else

  • You want docs or other prose reviewed: use Writing Guidelines.
  • Your agent has no web access: the rules are fetched from GitHub on every run.

Which agents Web Design Guidelines works in

Vercel documents Web Design Guidelines for any AI coding agent that reads Agent Skills, installed with the skills CLI. The open skills CLI also installs it into 78 agents, including Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode (we listed it with the CLI on October 1, 2026). See where each agent looks for skills.

The SKILL.md tells the agent to use WebFetch, Claude Code's fetch tool, and declares an argument hint for Claude Code's slash command. Any agent that can fetch a URL can follow it.

Web Design Guidelines license

Web Design Guidelines is published under MIT, stated only in the repository README (no license file). The SKILL.md has no license key, there is no LICENSE file in the skill folder or the repository, and GitHub reports no license (checked 2026-10-01). The only grant is the line "License: MIT" at the end of the repository README, which covers the whole collection.

  • Brand Guidelines: Brand Guidelines is Anthropic's open-source agent skill that holds Anthropic's own brand colors and fonts, so an agent can give a document, slide deck or web artifact the Anthropic look. (179,326 repository stars on October 2, 2026)
  • Design taste frontend: design-taste-frontend, the main skill in Leon Lin's Taste Skill repository, makes an AI agent read the brief, pick a design direction and build landing pages, portfolios and redesigns that avoid templated defaults. (91,799 repository stars on October 2, 2026)
  • Frontend Design: Frontend Design is Anthropic's open-source agent skill that steers an AI agent toward a look made for your product and away from the templated pages AI tends to produce. (179,326 repository stars on October 2, 2026)
  • Impeccable: Impeccable is Paul Bakaus's agent skill for frontend design: one skill with 24 commands such as audit, critique and polish, plus a launcher that runs deterministic checks for common AI design mistakes. (73,679 repository stars on October 2, 2026)

More from Vercel

  • Deploy to Vercel: Deploy to Vercel is Vercel's agent skill for getting a project live: the agent checks how your project is set up, picks a deploy method and returns a preview link unless you ask for production. (31,813 repository stars on October 2, 2026)
  • React Best Practices: React Best Practices is Vercel Engineering's agent skill of 70 performance rules for React and Next.js, ranked by impact, which the agent applies when it writes or reviews code. (31,813 repository stars on October 2, 2026)
  • React Composition Patterns: React Composition Patterns is Vercel's agent skill for React component APIs: compound components, lifted state and explicit variants instead of a growing list of boolean props. (31,813 repository stars on October 2, 2026)
  • React Native: React Native is Vercel's agent skill of React Native and Expo rules, ranked by impact: list performance, animations, native navigation and UI patterns for faster mobile apps. (31,813 repository stars on October 2, 2026)

Lists that include web-design-guidelines