Back to skills

Agent Skill

Web Design Guidelines

web-design-guidelines

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

VercelDesignJavaScript

408K installs

vercel-labs/agent-skills

by Vercel

Score

9.0

/ 10

Installs

408K

Repo Stars

28.2K

Last Updated

11d ago

Fresh

Quality Ratio

99%

Description

Verified

Language

JavaScript

First Published

Jan 2026

Summary

The Web Design Guidelines agent skill reviews UI code to ensure it consistently adheres to established web interface guidelines, automatically auditing for common design and accessibility issues. This skill is particularly valuable for frontend developers, UI/UX engineers, and teams aiming to maintain high standards of design consistency and accessibility across their web projects. This agent skill is one of the most installed skills in the entire registry, reflecting its broad utility. It operates by fetching the most current web interface guidelines from an external source before each review, then reads specified UI code files to systematically check against all rules. Non-compliant findings are output in a concise `file:line` format, enabling developers to quickly pinpoint and resolve issues.

Skill Definition

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.

How to Use

Use in O-mega

Claude Code

npx skills add vercel-labs/agent-skills web-design-guidelines
Web Design Guidelines | Agent Skills | o-mega