Vercel Web Design Guidelines: Find Unnamed Controls in Claude Code

Run a targeted accessibility review on local HTML, then check the reported file and line numbers. This walkthrough gives a tiny fixture and explains where Vercel's live rule set comes from.

中文

Setup for Claude Code and Codex

Use Claude Code or Codex with a disposable local project. The upstream skill fetches its current rule file over the network before a review. The linked project README declares MIT at the reviewed commit.

Open the fixed Vercel source below. Copy skills/web-design-guidelines from that commit into .claude/skills/web-design-guidelines for Claude Code or .agents/skills/web-design-guidelines for Codex, retaining the original directory.
Open the practice project and select /web-design-guidelines in Claude Code or $web-design-guidelines in Codex. Restrict the review to the fixture named below.

Example task

Create review.html with one line: <button><svg aria-hidden="true" viewBox="0 0 10 10"></svg></button>. Ask web-design-guidelines to inspect only review.html and identify the missing accessible name by file and line. Add aria-label="Open cart" to the button and repeat the same check.

Expected result

The first review reports the unnamed button at review.html:1. In a browser accessibility tree the revised control has the name Open cart, and the second review should omit the original finding. Other findings can vary with Vercel's live rule revision.

Upstream documentation

Original SKILL.md on GitHub · MIT license · Source reviewed 2026-11-15

Frequently asked question

Does pinning the Vercel skill also freeze the accessibility rules?

The installed wrapper remains at the selected commit. It fetches the current Web Interface Guidelines from Vercel's separate guidelines repository before each review, so the rules can change between runs.