web-design-guidelines
An agent skill by vercel-labs, from vercel-labs/agent-skills. Tags: accessibility, debugging, design, visual-art, web.
What it does
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".
Install
With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:
npx skills add vercel-labs/agent-skills --skill web-design-guidelinesOr copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):
git clone --depth 1 https://github.com/vercel-labs/agent-skills
cp -r agent-skills/skills/web-design-guidelines ~/.claude/skills/web-design-guidelinesSafety box score
Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.
Source
- Repository
- vercel-labs/agent-skills (all skills from this repository)
- Path
- skills/web-design-guidelines/SKILL.md
- Branch
- main
- Updated
- 2026-09-19
Related skills
- frontend-ui-engineering — Builds production-quality, accessible, responsive user-facing UIs.
- algorithmic-art — js with seeded randomness and interactive parameter exploration.
- archify — Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG.
- browser-testing-with-devtools — Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser.
- customer-journey-map — Create an end-to-end customer journey map with stages, touchpoints, emotions, pain points, and opportunities.
- frontend-design — Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.