AutoGineer
Generated banner for Web Design Guidelines
Generated logo for Web Design Guidelines

Web Design Guidelines

VercelOfficialCreated by vercel

  • Skill
  • Review and audit
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

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".
— the description by vercel

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The web-design-guidelines skill provides a structured approach to auditing web interface code. By fetching the latest rules from a centralized source, it ensures that UI code is evaluated against current best practices for design and accessibility. The skill processes specified files or patterns, identifies non-compliant elements, and reports findings in a standardized format.

What it does

  • Fetches current web interface guidelines from a remote source.
  • Reads user-provided files or patterns to analyze UI code.
  • Evaluates code against specific design and accessibility rules.
  • Reports audit findings using a concise file and line number format.

When to use it

  • When you need to verify if your UI code adheres to established design standards.
  • When performing accessibility checks on web interface components.
  • When conducting a general UX audit of your codebase.
  • When you want to validate your site against industry best practices.

Advantages

  • Ensures consistency by using up-to-date guidelines.
  • Provides clear, actionable feedback via file and line references.
  • Automates the tedious process of manual UI and accessibility reviews.

Usage examples

“Review my UI for accessibility compliance.”
The agent fetches the latest guidelines, scans your UI files, and lists specific lines that fail accessibility checks.
“Check my site against best practices.”
The agent audits your codebase against the current web interface standards and provides a report of areas requiring improvement.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/vercel-labs/web-design-guidelines/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip web-design-guidelines.zip -d .agents/skills

Documentation by vercel

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.

Files

SKILL.md

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.

Requirements and compatibility

Written for: Claude Code

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Names Claude Code tools

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
vercel
Publisher
Vercel (Official)
Source
vercel-labs/agent-skills · skills/web-design-guidelines · commit 1a2c79d
Licence
MIT License (redistribution allowed)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by vercel or Vercel.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download web-design-guidelines.zip