Web Design Guidelines
- 314 installs
- 29.5k repo stars
- Updated July 24, 2026
- vercel-labs/claude-skills
This is a copy of web-design-guidelines by vercel-labs - installs and ranking accrue to the original listing.
web-design-guidelines is a Vercel agent skill that audits UI source files against live Web Interface Guidelines and returns file:line findings for developers who need terse accessibility and UX fix lists.
About
web-design-guidelines is a Vercel-maintained agent skill (version 1.0.0) that reviews UI code against the company's live Web Interface Guidelines. On invocation it fetches fresh rules from the published guidelines URL, reads the developer's specified files or glob pattern, checks every rule, and outputs terse file:line violations suited for quick fixes. Developers reach for it when asked to review UI, check accessibility, audit design, or validate UX best practices without manually cross-referencing a long guideline doc. The four-step workflow is fetch guidelines, read targets, check rules, and report findings. It complements linters by covering holistic interface guidance rather than syntax alone. argument-hint accepts a file or pattern such as src/components/**/*.tsx.
- Fetches fresh rules from the upstream command.md URL before every review
- Accepts a file path or glob via argument-hint for scoped reviews
- Applies the full fetched guideline rule set to local source files
- Outputs violations in terse file:line format per upstream instructions
- Triggers on explicit asks to review UI, audit design, or check accessibility
Web Design Guidelines by the numbers
- 314 all-time installs (skills.sh)
- Security screen: HIGH risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/vercel-labs/claude-skills --skill web-design-guidelinesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 314 |
|---|---|
| repo stars | ★ 29.5k |
| Security audit | 0 / 3 scanners passed |
| Last updated | July 24, 2026 |
| Repository | vercel-labs/claude-skills ↗ |
How do you audit UI code for accessibility issues?
Audit UI files against Vercel’s live Web Interface Guidelines and get terse file:line findings for accessibility and UX fixes.
Who is it for?
Frontend developers who want a fast, guideline-grounded UI and accessibility review before shipping or opening a PR.
Skip if: Teams needing automated CI gates with scored Lighthouse reports instead of agent-read file audits against Vercel's guideline doc.
When should I use this skill?
The developer asks to review UI, check accessibility, audit design, or compare site code against web interface best practices.
What you get
Terse file:line finding list mapping each UI file to specific Web Interface Guidelines rule violations.
- file:line violation report
- Accessibility fix checklist
- UX guideline gap list
By the numbers
- Skill metadata version 1.0.0 authored by Vercel
- Uses a 4-step audit workflow: fetch, read, check, output
Files
Web Interface Guidelines
Review files for compliance with Web Interface Guidelines.
How It Works
1. Fetch the latest guidelines from the source URL below 2. Read the specified files (or prompt user for files/pattern) 3. Check against all rules in the fetched guidelines 4. Output findings in the terse file:line format
Guidelines Source
Fetch fresh guidelines before each review:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.mdUse WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
Usage
When a user provides a file or pattern argument: 1. Fetch guidelines from the source URL above 2. Read the specified files 3. Apply all rules from the fetched guidelines 4. Output findings using the format specified in the guidelines
If no files specified, ask the user which files to review.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164kWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Use web-design-guidelines for guideline-based UI file audits; use Lighthouse or axe CI tools for scored automated regression gates.
FAQ
What does web-design-guidelines check?
web-design-guidelines fetches Vercel's live Web Interface Guidelines, reads your specified UI files, and checks every rule. It returns terse file:line findings so developers can fix accessibility and UX issues without manually scanning the full guideline document.
How do you run web-design-guidelines on specific files?
Invoke web-design-guidelines with a file path or glob pattern via argument-hint, for example src/components/**/*.tsx. The skill fetches fresh guidelines, audits matching files, and lists violations in file:line format.
Is Web Design Guidelines safe to install?
skills.sh reports 0 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.