Web Design Guidelines
Fetch live Web Interface Guidelines and audit your UI source files for accessibility and UX rule violations in terse file:line findings.
Overview
Web Design Guidelines is an agent skill most often used in Ship (also Build) that fetches Vercel Web Interface Guidelines and audits your UI files for compliance.
Install
npx skills add https://github.com/bytedance/deer-flow --skill web-design-guidelinesWhat is this skill?
- Fetches fresh rules from the official Vercel web-interface-guidelines command.md before every run
- Accepts a file or glob pattern argument to scope the review
- Applies the full fetched rule set to the files you specify
- Emits terse file:line findings using the format defined in the upstream guidelines
- Triggered by requests to review UI, check accessibility, audit design, or compare against best practices
- Guidelines fetched fresh from vercel-labs/web-interface-guidelines command.md each review
Adoption & trust: 1.4k installs on skills.sh; 70.7k GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
You shipped or drafted UI code but have no fast, consistent way to check it against current web interface and accessibility best practices.
Who is it for?
Solo builders who want a checklist-driven UI and accessibility review on specific files or globs right before merge or launch.
Skip if: Teams needing certified WCAG audit reports, visual regression suites, or reviews when you have not pointed the agent at concrete file paths yet.
When should I use this skill?
User asks to review UI, check accessibility, audit design, review UX, or check site against best practices (optional file-or-pattern argument).
What do I get? / Deliverables
You get a terse file:line violation list grounded in the latest fetched guidelines so you can patch UX and accessibility issues before users see them.
- Terse file:line compliance findings per fetched guideline format
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Pre-launch and post-build UI review belongs on the ship shelf as a quality gate before you publish. Guideline compliance checks are design and accessibility reviews of existing code—not net-new feature implementation.
Where it fits
After styling a dashboard, run the skill on src/components/**/*.tsx before opening a PR.
Gate a release by scanning changed UI files for guideline violations.
Polish a marketing landing page for interface and focus-order issues before ads go live.
How it compares
Use instead of ad-hoc “does this look accessible?” chat—this skill binds findings to a live, versioned guideline source and a fixed output format.
Common Questions / FAQ
Who is web-design-guidelines for?
Indie and solo developers shipping web UIs who want guideline-based UX and accessibility feedback without maintaining their own rule doc.
When should I use web-design-guidelines?
During Ship review before release, after Build frontend changes, or at Launch when polishing marketing pages—whenever you ask to review UI, audit design, or check best practices on named files.
Is web-design-guidelines safe to install?
It needs network access to fetch public guidelines and read your project files; review the Security Audits panel on this Prism page before enabling it in sensitive repos.
SKILL.md
READMESKILL.md - Web Design Guidelines
# 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.md ``` Use 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.