How do I install the Web Design Guidelines skill?

Run npx skillmds@latest add davisbuilds/web-design-guidelines in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Web Design Guidelines safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web Design Guidelines?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web Design Guidelines free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Web Design Guidelines?

davisbuilds (@davisbuilds) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web Design Guidelines by davisbuilds

Name: Web Design Guidelines
Author: davisbuilds

Web Design Guidelines

Review UI code for Web Interface Guidelines compliance (accessibility, UX, code-level rules from Vercel WIG). Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". For visual taste / AI-slop audits use design-critique instead.

davisbuilds c0f52a3 2 files · 3.2 KB Updated Sep 17, 2026

File contents

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works

Fetch the latest guidelines from the source URL below
Read the specified files (or prompt user for files/pattern)
Check against all rules in the fetched guidelines
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:

Fetch guidelines from the source URL above
Read the specified files
Apply all rules from the fetched guidelines
Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

When To Use

User asks to review, audit, or check UI code for best practices
Checking accessibility, UX quality, or Web Interface Guidelines compliance
User says "review my UI", "audit design", "check my site", or "check accessibility"
Validating frontend code against the Vercel Web Interface Guidelines ruleset

Boundaries

Not for building or implementing UI; this skill only reviews existing code
Not for backend, API, or non-UI code review
Skip when the user needs visual design feedback on mockups rather than code-level audits
Do not cache guidelines across sessions; always fetch fresh from the source URL

Output

A findings report in terse file:line format as specified by the fetched guidelines
Each finding references the specific guideline rule that was violated
A prompt for file selection if no files were specified by the user

Verification

Guidelines were freshly fetched from the source URL before the review
All specified files were read and checked against the full ruleset
Findings use the exact output format defined in the fetched guidelines document
No false positives from rules that do not apply to the file's framework or context

Sibling skills

The four design skills compose into a pipeline: spec → build → review. Hand off when the request crosses an axis.

design-critique — visual taste audit against a closed 37-pattern slop catalog. Complementary to rule-compliance review, not redundant: this skill catches WIG violations, that skill catches AI-slop tells. Run both for full review coverage.
frontend-design — generative UI builder. Run this skill against frontend-design output for code-level rule compliance.
design-md — DESIGN.md token spec; orthogonal to UI-rule compliance.

---name: web-design-guidelinesdescription: Review UI code for Web Interface Guidelines compliance (accessibility, UX, code-level rules from Vercel WIG). Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". For visual taste / AI-slop audits use design-critique instead.---# Web Interface GuidelinesReview files for compliance with Web Interface Guidelines.## How It Works1. Fetch the latest guidelines from the source URL below2. Read the specified files (or prompt user for files/pattern)3. Check against all rules in the fetched guidelines4. Output findings in the terse `file:line` format## Guidelines SourceFetch 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.## UsageWhen a user provides a file or pattern argument:1. Fetch guidelines from the source URL above2. Read the specified files3. Apply all rules from the fetched guidelines4. Output findings using the format specified in the guidelinesIf no files specified, ask the user which files to review.## When To Use- User asks to review, audit, or check UI code for best practices- Checking accessibility, UX quality, or Web Interface Guidelines compliance- User says "review my UI", "audit design", "check my site", or "check accessibility"- Validating frontend code against the Vercel Web Interface Guidelines ruleset## Boundaries- Not for building or implementing UI; this skill only reviews existing code- Not for backend, API, or non-UI code review- Skip when the user needs visual design feedback on mockups rather than code-level audits- Do not cache guidelines across sessions; always fetch fresh from the source URL## Output- A findings report in terse `file:line` format as specified by the fetched guidelines- Each finding references the specific guideline rule that was violated- A prompt for file selection if no files were specified by the user## Verification- Guidelines were freshly fetched from the source URL before the review- All specified files were read and checked against the full ruleset- Findings use the exact output format defined in the fetched guidelines document- No false positives from rules that do not apply to the file's framework or context## Sibling skillsThe four design skills compose into a pipeline: **spec → build → review**. Hand off when the request crosses an axis.- `design-critique` — visual taste audit against a closed 37-pattern slop catalog. Complementary to rule-compliance review, not redundant: this skill catches WIG violations, that skill catches AI-slop tells. Run both for full review coverage.- `frontend-design` — generative UI builder. Run this skill against `frontend-design` output for code-level rule compliance.- `design-md` — DESIGN.md token spec; orthogonal to UI-rule compliance.

Frequently asked questions