Web Design Guidelines
Audit UI files against live Vercel Web Interface Guidelines and get 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 reviews your files for compliance with file:line findings.
Install
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill web-design-guidelinesWhat is this skill?
- Fetches latest rules from vercel-labs web-interface-guidelines command.md each run
- Reviews user-specified files or patterns against all fetched rules
- Outputs findings in terse file:line format per upstream guideline instructions
- Prompts for target files when none are supplied
- 4-step review workflow: fetch guidelines, read files, check rules, output findings
Adoption & trust: 648 installs on skills.sh; 40.1k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your web UI drifts from current interface and accessibility rules and you need a repeatable audit against an up-to-date guideline doc.
Who is it for?
Indie devs shipping React or web UIs who want a fast, standards-based review pass before PR merge.
Skip if: Teams needing pixel-perfect design critique, brand-only reviews, or fully offline audits with no network fetch.
When should I use this skill?
When reviewing web UI files for compliance with Web Interface Guidelines or when the task matches the fetch-and-audit workflow.
What do I get? / Deliverables
You receive a terse, line-level violation list grounded in the freshly fetched Web Interface Guidelines ruleset.
- Terse file:line violation report per guideline output format
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Ship/review is canonical because the workflow is compliance checking on existing files before merge or release. Review subphase matches fetch-guidelines, read files, and emit violation lines—not greenfield design exploration.
Where it fits
Run a guideline pass on changed TSX files before tagging a release.
Check new landing components against fetched rules during implementation.
Validate marketing pages meet interface guidance before SEO and AI-search landing pushes.
How it compares
Live-guideline compliance checker—not a component library generator or Figma handoff skill.
Common Questions / FAQ
Who is web-design-guidelines for?
Solo builders and small front-end teams using coding agents to enforce Vercel-style web interface rules on real source files.
When should I use web-design-guidelines?
During Ship review before release, and during Build frontend passes when you want file:line feedback against the latest fetched guidelines.
Is web-design-guidelines safe to install?
The skill fetches public guidelines over the network and reads your repo files; review the Security Audits panel on this Prism page for the sickn33 package source.
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. ## When to Use This skill is applicable to execute the workflow or actions described in the overview. ## Limitations - Use this skill only when the task clearly matches the scope described above. - Do not treat the output as a substitute for environment-specific validation, testing, or expert review. - Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.