Web Design Guidelines
- 88 installs
- 18 repo stars
- Updated June 8, 2026
- andrelandgraf/fullstackrecipes
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 skill that reviews UI code against the Web Interface Guidelines and reports accessibility and UX findings in file:line format.
About
Web-design-guidelines reviews UI code for compliance with the Web Interface Guidelines. It fetches the latest guidelines, reads the specified files, checks them against all rules, and outputs findings in file:line format. A developer uses it to review UI, check accessibility, or audit design and UX.
- Fetches the latest Web Interface Guidelines fresh before each review
- Checks accessibility, UX, and design best practices against the rule set
- Outputs findings in a terse file:line format
Web Design Guidelines by the numbers
- 88 all-time installs (skills.sh)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
web-design-guidelines capabilities & compatibility
- Capabilities
- ui design · code review
- Use cases
- ui design · web design · code review
What web-design-guidelines says it does
Review files for compliance with Web Interface Guidelines.
Fetch fresh guidelines before each review:
npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill web-design-guidelinesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 88 |
|---|---|
| repo stars | ★ 18 |
| Last updated | June 8, 2026 |
| Repository | andrelandgraf/fullstackrecipes ↗ |
What it does
Reviews UI code against the fetched Web Interface Guidelines and reports findings in file:line format.
Who is it for?
Developers auditing UI code for accessibility, UX, and design-guideline compliance.
When should I use this skill?
Asked to review UI, check accessibility, audit design, or review UX.
What you get
- UI compliance findings in file:line format
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.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
Where do the guidelines come from?
They are fetched fresh before each review from the vercel-labs/web-interface-guidelines source URL.
What format are findings in?
A terse file:line format.