The web-design-guidelines Skill: Audit Your UI Against Vercel's Interface Guidelines

Generating UI is a solved problem; catching the accessibility miss on line 214 is not. The web-design-guidelines skill turns Claude Code into a reviewer that checks your frontend against Vercel's Web Interface Guidelines, rule by rule.

Key takeaways

• web-design-guidelines by vercel-labs has 440,517 installs and its repo carries 27,714 GitHub stars (skills.sh registry, GitHub, 2026-07-06).
• It fetches the latest guidelines from the official source at run time, so audits track the current ruleset instead of a stale snapshot baked into the skill.
• Output is terse file:line findings - review notes you can act on, not an essay.
• It accepts a file-or-pattern argument, so you can scope an audit to one component, a directory, or a whole page.
• It reviews UI; it does not generate it. Pair it with frontend-design (628,875 installs, skills.sh) for the generation side.

What is the web-design-guidelines skill?

It is an automated design reviewer. Invoke it when you want UI code checked for consistency, accessibility, and UX quality; the workflow fetches Vercel's current Web Interface Guidelines, reads the files you scoped, checks every rule, and reports findings with exact locations. Because the ruleset is fetch-fresh, the same skill install keeps auditing against whatever the guidelines say today.

How do you install and run it?

From the project root:

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

Then ask for a review: "review this UI", "check accessibility", "audit the design of components/checkout". The argument hint lets you scope the pass - a single component during development, a directory before a release. Skill mechanics are covered in the Claude Code skills docs.

What does it actually check?

The Web Interface Guidelines encode the interaction details that separate polished products from demos: focus handling, keyboard support, touch targets, motion preferences, form semantics, loading and error states. The skill walks every rule against your code. Findings read like a strict senior reviewer's notes - specific, located, and unsentimental. For the broader toolkit around it, start from the frontend-design shortlist.

How is it different from frontend-design?

They are two halves of one workflow. frontend-design by anthropics (628,875 installs, skills.sh) generates distinctive UI and steers the model away from generic output; web-design-guidelines reviews what got built - by that skill, by you, or by anyone - against an objective ruleset. Generation without review ships polish gaps; review without generation has nothing to check. The strongest setups in the design and UI/UX category run both.

When should you run it?

Two moments pay best: PR review, where terse file:line findings drop straight into comments, and pre-release QA, where a full-surface audit catches what individual PRs missed. Running it on every small edit mostly generates noise - the guidelines do not change hour to hour.

Common pitfalls

• Auditing an entire app in one pass and drowning in findings - scope to a page or directory and burn the list down.
• Treating every finding as blocking; the guidelines are opinionated, and a deliberate exception is fine as long as it is deliberate.
• Forgetting the fetch step needs network access - in an offline sandbox the skill cannot pull the current ruleset.

Generated UI is cheap now. Reviewed UI is what ships.

Common questions