Web Design Guidelines
- 576 installs
- 29.9k repo stars
- Updated July 27, 2026
- davila7/claude-code-templates
This is a copy of web-design-guidelines by vercel-labs - installs and ranking accrue to the original listing.
web-design-guidelines is a Claude Code skill that fetches the official Vercel Web Interface Guidelines and audits frontend UI code for consistency, accessibility, and UX quality, reporting violations in file:line format
About
Web Design Guidelines is an agent skill that reviews your frontend UI code against the latest Vercel Web Interface Guidelines. It automatically fetches the current rule set from the official source, reads the files or patterns you specify, checks every rule for compliance, and returns concise findings. Builders use it to keep interfaces consistent, accessible, and high-quality without manually tracking dozens of evolving best practices. The skill eliminates guesswork when reviewers or users ask you to validate design, accessibility, or overall UX. It works on any web codebase and integrates directly into your existing agent workflow.
- Fetches the latest rules from the official Vercel Web Interface Guidelines before every run
- Reviews any file or glob pattern you specify against the complete guideline set
- Outputs findings in compact file:line format for rapid fixes
- Triggers on prompts such as "review my UI", "check accessibility", "audit design", or "review UX"
- Works with Claude Code, Cursor, and other agents that support MCP skills
Web Design Guidelines by the numbers
- 576 all-time installs (skills.sh)
- +13 installs in the week ending Jun 27, 2026 (Skillselion tracking)
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/davila7/claude-code-templates --skill web-design-guidelinesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 576 |
|---|---|
| repo stars | ★ 29.9k |
| Security audit | 2 / 3 scanners passed |
| Last updated | July 27, 2026 |
| Repository | davila7/claude-code-templates ↗ |
How do you audit frontend UI against Vercel guidelines?
Automatically audit frontend code against the official Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.
Who is it for?
Frontend developers reviewing React or web UI who want guideline-backed audits with concrete line references before shipping.
Skip if: Backend API reviews, brand-new design exploration without code, or teams that need automated CI test runners instead of guideline checklists.
When should I use this skill?
A developer asks to review UI, check accessibility, audit design or UX, or verify files against Web Interface Guidelines best practices.
What you get
File:line UX and accessibility findings mapped to fetched Web Interface Guidelines rules.
- file:line audit report
- Guideline compliance findings
By the numbers
- Fetches live Vercel Web Interface Guidelines on each run
- Checks all rules from the fetched guideline set
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.698k164k
Web 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 Vercel’s interface checklist and line-level UX findings; use visual design skills when you need mockups rather than code compliance.
FAQ
What guidelines does web-design-guidelines use?
web-design-guidelines fetches the official Vercel Web Interface Guidelines from the upstream source URL before each review. That keeps audits current instead of relying on stale cached rules embedded in the skill.
What output format does web-design-guidelines produce?
web-design-guidelines reports findings in a terse file:line format after checking all rules in the fetched guidelines. Each line points to a specific frontend file and line number for fast remediation.
When should web-design-guidelines run in a workflow?
web-design-guidelines fits PR or pre-release UI review when a developer asks to review UI, check accessibility, audit design, or compare code to best practices. Pass a file or pattern to limit scope to changed components.
Is Web Design Guidelines safe to install?
skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.