web-design-guidelines

Official source

Review UI code against Vercel's Web Interface Guidelines — accessibility, UX, and design best practices — with terse file:line findings.

Source: Vercel Labs

View source
Cursor · CompatibleOpenAI Codex · CompatibleClaude Code · CompatibleDevelopment

At a glance

Verified source
Best for
Auditing existing UI code for accessibility and interface-guideline compliance
Works with
Cursor · OpenAI Codex · Claude Code
Outcome
Getting actionable file:line findings instead of vague design feedback
Source
vercel-labs/agent-skills
OverviewUse casesHow it worksInstall and useSimilar

01 / Understand the skill

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

02 / Confirm the fit

Use web-design-guidelines when you need to

  • Auditing existing UI code for accessibility and interface-guideline compliance
  • Getting actionable file:line findings instead of vague design feedback
  • A fast pre-merge UX/accessibility pass on frontend changes

03 / See the workflow

How web-design-guidelines works

  1. 01Install: npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
  2. 02Try: "Review my UI components against the web interface guidelines."
  3. 03Get: a list of issues in file:line format mapped to specific guideline rules

Check before installing

Compatible platforms

Cursor · OpenAI Codex · Claude Code

Best fit

Auditing existing UI code for accessibility and interface-guideline compliance

Review the source instructions if the required output differs from the formats described above.

Install and use

Compatible with Cursor and OpenAI Codex and Claude Code · Published by Vercel Labs

Ready to add web-design-guidelines?

Use the published instructions below, then provide the required input and describe the result you need.

General instructions · Cursor · OpenAI Codex · Claude Code

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

Review the source repository and license before installing third-party skills.

Continue exploring

Similar skills

claude-apiOfficial

Authoritative reference for the Claude API and Anthropic SDKs: model IDs, pricing, thinking/effort params, streaming, tool use, caching, managed agents, and model migration.

Works withClaude CodeClaude.ai
Development
View details
xlsxOfficial

Read, edit, create, and fix Excel/CSV files — formulas, formatting, charts, and clean financial models with zero formula errors.

Works withClaude CodeClaude.ai
Development
View details
frontend-designOfficial

Generate distinctive, production-grade frontend UI that avoids generic AI aesthetics — pages, components, dashboards, and landing pages.

Works withClaude CodeClaude.ai
Development
View details
mcp-builderOfficial

Build high-quality MCP (Model Context Protocol) servers in Python (FastMCP) or Node/TypeScript that let LLMs use external services through well-designed tools.

Works withClaude CodeClaude.ai
Development
View details