Web design guidelines skill: what it does and how to install it

Source: vercel-labs/agent-skills · Maintainer: Vercel · License: MIT per the repo README (no LICENSE file in the repo) · Checked: 23 October 2026

What is the web design guidelines skill?

The web design guidelines skill makes your coding agent review UI code against Vercel's Web Interface Guidelines and report each problem as a file:line finding. It is for developers who want a quick, consistent audit of accessibility, focus handling, forms, motion and copy before they ship a component or page.

It sits in vercel-labs/agent-skills, Vercel's official skills collection. The skill's description reads: "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"."

As of 23 October 2026, its skills.sh page listed about 775,500 installs.

What does it do?

The skill folder holds one short SKILL.md, and the rules are not in it. Instead, it gives the agent four steps:

1. Fetch the latest guidelines from https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md.
2. Read the files you named, or ask you which files or pattern to review.
3. Check them against every rule in the fetched guidelines.
4. Output findings in the format those guidelines specify.

The fetched file, command.md, is where the real content lives. Its rules are grouped under Accessibility, Focus States, Forms, Animation, Typography, Content Handling, Images, Performance, Navigation & State, Touch & Interaction, Safe Areas & Layout, Dark Mode & Theming, Locale & i18n, Hydration Safety, Hover & Interactive States, and Content & Copy, followed by a list of anti-patterns to flag. The agent-skills README describes it as "100+ rules." A few examples, paraphrased:

• Icon-only buttons need an aria-label, and decorative icons need aria-hidden="true".
• Never remove the focus outline without a visible replacement; prefer :focus-visible.
• Inputs need autocomplete and a meaningful name, and paste must never be blocked.
• Honor prefers-reduced-motion, animate only transform and opacity, and never use transition: all.
• Use the … character instead of three periods, and Intl.DateTimeFormat or Intl.NumberFormat instead of hard-coded formats.
• Use <button> for actions and <a> or <Link> for navigation, not a <div> with a click handler.

The output format is fixed by the guidelines file: findings grouped by file, one line per issue, a pass mark for clean files, and "No preamble." The example in command.md looks like this:

## src/Button.tsx

src/Button.tsx:42 - icon button missing aria-label
src/Button.tsx:18 - input lacks label
src/Button.tsx:55 - animation missing prefers-reduced-motion
src/Button.tsx:67 - transition: all → list properties

## src/Modal.tsx

src/Modal.tsx:12 - missing overscroll-behavior: contain
src/Modal.tsx:34 - "..." → "…"

## src/Card.tsx

✓ pass

The longer, human-readable version of the guidelines is published at vercel.com/design/guidelines and in the guidelines repo's README.

How do you install the web design guidelines skill?

The guidelines repo's README gives this command for the skills CLI, and skills.sh shows the same one:

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

Add -g to install it for every project, or -a claude-code to skip the agent prompt. Running npx skills add vercel-labs/agent-skills without --skill, as the agent-skills README shows, lets you pick from all of Vercel's skills, including react-best-practices. The README doesn't list a Claude Code plugin for this repo.

For Claude Code, the folder lands in .claude/skills/web-design-guidelines/ in your project, or ~/.claude/skills/web-design-guidelines/ with -g, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

claude.ai. Custom skills upload as a ZIP of the skill folder (Claude Help Center). Zip the current folder yourself rather than using the web-design-guidelines.zip that sits next to it in the repo: as of 23 October 2026 that prebuilt ZIP still has argument-hint as a top-level frontmatter key, and Anthropic's skills docs say claude.ai uploads reject any key outside the six the Agent Skills spec allows. The current SKILL.md keeps it under metadata, which is allowed. The skill also only works where the agent can fetch a web page.

Prefer rules during generation? The guidelines repo also offers an AGENTS.md file you can add to a project so agents apply the same rules while writing code, not just when reviewing it.

How do you use it?

In Claude Code, you can type /web-design-guidelines followed by a file or pattern, or just ask for a review in plain words and let the description match. If you don't name any files, the agent asks which ones to check.

Example prompts (suggestions, not quotes from the repo):

• /web-design-guidelines src/components/**/*.tsx
• "Review my UI in the signup flow against the web interface guidelines."
• "Check accessibility on app/settings/page.tsx, especially focus states and form labels."
• "Audit the marketing pages for animation and reduced-motion problems."
• "Review UX on the checkout components, then fix the findings you're confident about."

There are no packages or API keys to install. The agent needs network access to raw.githubusercontent.com to fetch the rules.

Tips and limits

• It reviews; it doesn't fix. The output is a list of findings. Read it, then ask for fixes in a second step so you can skip any you disagree with.
• The rules change under you. Because the skill fetches command.md fresh every run, two audits a month apart can apply different rules. The guidelines repo was last updated on 5 October 2026. If you need repeatable results, for example in CI, copy command.md into your own skill and pin it.
• Remote instructions. Whatever that URL returns becomes the agent's instructions for the review. The source is a Vercel repository, but it is worth knowing the skill trusts it on every run.
• House style included. Some rules reflect Vercel's own style rather than universal standards, such as curly quotes, the ellipsis character, Title Case for headings and buttons, and & over "and" where space is tight. Ignore findings that don't match your brand's writing rules.
• React flavored. Most rules are framework-agnostic, but several assume React or Next.js (htmlFor, onKeyDown, hydration).
• Security audit. As of 23 October 2026, skills.sh showed Pass from Gen Agent Trust Hub and Snyk, and Warn from Socket. Socket's 18 March 2026 audit lists one low-severity anomaly, a scanner flag for a "System prompt extraction attempt" in SKILL.md, while its own summary calls the skill's footprint "coherent and proportionate." The SKILL.md is about 40 lines, so read it before installing.
• License. The README ends with "MIT", but the agent-skills repo has no LICENSE file and GitHub reports no license. The guidelines repo has an MIT LICENSE file.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md and its files; for a repo with many skills, like this one, it shows a list to pick from. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Vercel.

Similar skills

• React best practices skill: Vercel's 70 React and Next.js performance rules, from the same repo.
• Impeccable skill: design commands including audit and critique, plus a deterministic detector.
• UI UX Pro Max skill: a searchable database of styles, palettes and UX guidelines.
• Frontend design skill: Anthropic's skill for building distinctive UI in the first place.