Web Design Guidelines
- 1.8k installs
- 78k repo stars
- Updated July 27, 2026
- bytedance/deer-flow
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 at version 1.0.0 that audits frontend files against the latest Vercel Web Interface Guidelines for developers who need accessibility, consistency, and UX compliance checks.
About
web-design-guidelines is a UI review skill from bytedance/deer-flow, authored by Vercel and versioned 1.0.0 in its manifest. The skill fetches fresh Web Interface Guidelines from the canonical source URL on each run, reads user-specified files or patterns, checks every rule in the fetched guideline set, and reports findings in a terse file:line format. Developers reach for it when asked to review UI, check accessibility, audit design, review UX, or validate a site against interface best practices. The workflow is deliberately deterministic: fetch guidelines, scan targets, enumerate violations. It suits React and broader frontend codebases where guideline drift causes inconsistent components, missing focus states, or accessibility gaps. Because guidelines are pulled live, audits reflect current Vercel recommendations rather than stale local copies, making the skill useful in PR review, pre-release QA, and design-system enforcement passes.
- Fetches the latest guidelines from Vercel before every run
- Reviews any file or glob pattern you specify
- Outputs findings in terse file:line format for quick fixes
- Checks against full rule set including accessibility and design best practices
- Works on any UI codebase when you ask to review UI, check accessibility, or audit design
Web Design Guidelines by the numbers
- 1,811 all-time installs (skills.sh)
- +74 installs in the week ending Jul 28, 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/bytedance/deer-flow --skill web-design-guidelinesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.8k |
|---|---|
| repo stars | ★ 78k |
| Security audit | 1 / 3 scanners passed |
| Last updated | July 27, 2026 |
| Repository | bytedance/deer-flow ↗ |
How do you audit UI code against Web Interface Guidelines?
Automatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.
Who is it for?
Frontend developers who want a fresh, rule-by-rule UI and accessibility audit before merge or release.
Skip if: Teams needing automated CI test runners or visual regression screenshots instead of guideline-based code review.
When should I use this skill?
The user asks to review UI, check accessibility, audit design, or compare code against Web Interface Guidelines.
What you get
A file:line audit report listing Web Interface Guidelines violations per scanned source file.
- file:line guideline violation report
By the numbers
- Skill manifest version 1.0.0
- Checks all rules from freshly fetched Web Interface Guidelines
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
Pick web-design-guidelines for live Vercel guideline audits with file:line output; pick animation skills when the goal is implementing motion, not compliance review.
FAQ
Where does web-design-guidelines get its rules?
web-design-guidelines fetches the latest Vercel Web Interface Guidelines from the canonical source URL before each review. Audits always use freshly pulled rules rather than a bundled static copy.
What output format does web-design-guidelines produce?
web-design-guidelines reports findings in a terse file:line format after checking specified files or patterns against every rule in the fetched guidelines, making violations easy to locate in source.
Is Web Design Guidelines safe to install?
skills.sh reports 1 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.