Skillofficial publisher

web-design-guidelines (Vercel)

Skill : A reusable method: instructions, procedures, sometimes scripts or templates · requires claude-code

Audits your interface code against more than one hundred Vercel rules (accessibility, forms, animations, images) and reports gaps file by file.

Excellent UI reviewer after generation. It downloads its rules at each run from a Vercel repository, hence the orange badge.

Official site GitHub · 32,965 ★ Docs

Overall score

8.1 /10

Security: one caveat, see the card

Utility

7.0

Reliability

10.0

Security

One caveat

Ease

1 click · Beginner

Security reflects where data goes, requested permissions and incidents on record at the verification date. It is not a guarantee of zero risk: check the deployment mode and the connections you enable.

What it does, concretely

When generating UI code with an AI agent, it is hard to know whether the result follows web best practices: accessibility, focus management, forms, animations, typography, images, performance, internationalisation. web-design-guidelines fills that gap by automatically auditing the produced code against more than one hundred rules.

In practice, the skill is installed inside claude-code and is triggered by phrases such as "Review my UI" or "Check accessibility". It reads the project's interface files, downloads the reference rules from the Vercel repository on GitHub at each run, then reports detected gaps file by file, grouped by category.

It is aimed at web developers who already use claude-code and want a quality safety net after a code generation phase. It covers eleven categories: accessibility, focus states, forms, animations, typography, images, performance, navigation and state, dark mode, touch interactions, and internationalisation.

It is not suited to those looking for an automated testing tool integrated into a CI/CD pipeline, nor to those who do not use claude-code as their development environment.

What it offers

·Accessibility audit: checks aria-labels, semantic HTML, and keyboard handlers.
·Focus state review: detects missing or incorrect focus-visible patterns.
·Form verification: checks autocomplete, validation, and error handling.
·Animation analysis: flags missing prefers-reduced-motion support and non-compositor-friendly transforms.
·Image audit: checks dimensions, lazy loading, and alt text.
·Typography check: detects straight quotes, incorrect ellipsis characters, and missing tabular-nums.
·Internationalisation check: verifies use of Intl.DateTimeFormat and Intl.NumberFormat.
·File-by-file report: returns detected gaps grouped by category for each audited file.

Our tips

Use explicit phrases such as "Review my UI", "Check accessibility", or "Audit design" to trigger the skill: these are the phrases the agent recognises.
Run the audit after a code generation phase, not during it: the skill is designed as a final reviewer, not a real-time guide.
Go through the report categories in order of criticality: accessibility and focus states have a direct impact on users with disabilities and should be addressed first.
Occasionally check the rules on the Vercel repository if you want to know exactly what is being audited, as the rules are downloaded at each run and may change without notice.

Watch out

Audit rules are downloaded from GitHub at each run: their content may change between two audits without notice, which can make results hard to compare over time.
The skill requires claude-code as its host environment; it cannot be used standalone or within other agents.

In practice

Price: Free
Commercial use: Commercial use: yes
Available on: GitHub vercel-labs/agent-skills, skills.sh
Host: claude-code
Licence: MIT
Other hosts: claude-code, cursor, codex, opencode, gemini-cli
FR interface: No

Security and data

Rating: Security: one caveat, see the card
Your data: Data stays local
Maintenance: Active
Last release: 28 August 2026

Links and repository checked on 25 October 2026 · added on 23 September 2026

How to install web-design-guidelines (Vercel)

1. Make sure Node.js is installed and claude-code is configured on your machine. 2. Open a terminal at the root of your project. 3. Run the installation command: npx skills add vercel-labs/agent-skills 4. The web-design-guidelines skill is included in the collection and becomes automatically available in claude-code. 5. In claude-code, type a phrase such as "Review my UI" or "Check accessibility" to start an audit. 6. Note that each audit downloads rules from GitHub: occasionally check their content if you want to know exactly what is being applied.

npx skills add vercel-labs/agent-skills

Official documentation ↗

In the same category

Whole category Design & slides →