vercel-web-design-guidelines

100+ accessibility and UX rules from Vercel, applied as a structural audit on your UI code.

Score 0(?)VerifiedCodeby VercelSource
Verified for:

Install

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

Best for

Pre-PR audits, accessibility compliance, design system enforcement.

About this skill

Audits UI code against 100+ Vercel accessibility and UX rules. Reports violations structurally.

A11yUXAudit

Score breakdown

Score breakdown

rubric 1.0
Install count
0/20
Provenance
12.8/15
GitHub stars
0/15
Recency
6/10
Compatibility
6/10
Documentation depth
6.5/10
Install ergonomics
10/10
License
5/5
Verification freshness
3/5

Composite 0–100 score derived from 9 verifiable signals. See the rubric →

Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.

ReactTailwindDesign
All surfaces

Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run.

Reactshadcn/uiArtifacts
All surfaces

Lock generated UIs to a brand. Anthropic's own guidelines, formalized as a skill.

BrandGuidelinesIdentity
All surfaces

Skill FAQ

About vercel-web-design-guidelines

What is the vercel-web-design-guidelines skill?

Audits UI code against 100+ Vercel accessibility and UX rules. Reports violations structurally.

Which agents does vercel-web-design-guidelines work with?

Claude Code, Cursor, Codex CLI.

How do I install vercel-web-design-guidelines?

Run `npx skills add github.com/vercel-labs/agent-skills --skill web-design-guidelines` for Claude Code. See the install panel for per-agent commands.

Is vercel-web-design-guidelines free to use?

Yes — vercel-web-design-guidelines is open source (MIT).

Who maintains vercel-web-design-guidelines?

vercel-web-design-guidelines is published by Vercel and was last updated on 2026-04-08.

What is vercel-web-design-guidelines best for?

Pre-PR audits, accessibility compliance, design system enforcement.