home / skills / vercel-labs / agent-skills / web-design-guidelines

web-design-guidelines skill

safe

This skill reviews UI code against Web Interface Guidelines and outputs concise file:line findings to improve accessibility and consistency.

npx playbooks add skill vercel-labs/agent-skills --skill web-design-guidelines

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.2 KB

---
name: web-design-guidelines
description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
metadata:
  author: vercel
  version: "1.0.0"
  argument-hint: <file-or-pattern>
---

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

Overview

This skill reviews UI code for compliance with Web Interface Guidelines and returns actionable, line-referenced findings. It is designed to run automated audits against the canonical guideline document and report violations in a terse file:line format. Use it to quickly identify accessibility, layout, and interaction issues directly in source files.

How this skill works

Before each review it fetches the latest guideline text from the official source URL. It then reads the files or file patterns you provide, applies every rule found in the fetched guidelines, and collects violations. Results are emitted in the concise file:line output format specified by the guidelines so they are easy to parse and act on.

When to use it

When you ask "review my UI" for a quick code audit against the guidelines
When you need an accessibility check across HTML, CSS, or JS
When performing a UX or design system compliance audit
When preparing a release and you need automated guideline verification
When integrating guideline checks into CI or pre-commit hooks

Best practices

Always allow the skill to fetch the latest guidelines before a review to avoid stale rules
Provide explicit file paths or glob patterns; if omitted, the skill will prompt for files
Run reviews early and often to catch issues before they accumulate
Treat file:line findings as inputs for fixes and re-run until the report is clean
Combine these reports with manual UX review for context-sensitive decisions

Example use cases

Run a one-off audit: review a new page for accessibility regressions
Pre-release check: verify that recent UI changes follow layout and spacing rules
CI integration: fail builds when the guideline check reports critical violations
Designer handoff: confirm code matches interaction and naming conventions
Legacy cleanup: scan older files to prioritize accessibility and UX fixes

FAQ

What files can I submit for review?

Provide any front-end source files (HTML, CSS, JS, JSX, TSX) or glob patterns. If you don't specify files, the skill will ask which files to review.

How fresh are the rules used for each review?

The skill fetches the guideline document from the official URL before every run to ensure it applies the latest rules.