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.
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.
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)
npx skills add vercel-labs/agent-skills