# 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.

- Skill: `davisbuilds/web-design-guidelines` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add davisbuilds/web-design-guidelines`
- Raw SKILL.md: https://api.skillmd.com/api/skills/davisbuilds/web-design-guidelines/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: davisbuilds (https://skillmd.com/u/davisbuilds)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/davisbuilds/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

- 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.