🎯

web-design-guidelines

🎯Skill

from vercel-labs/agent-skills

What it does

Web interface best practices auditor from Vercel Engineering. Reviews UI code against 100+ standards covering accessibility, animations, forms, images, and UX fundamentals.

Overview

A skill from Vercel Engineering that audits UI code against the Web Interface Guidelines — a comprehensive set of 100+ best practices for building high-quality web interfaces.

Key Features

Reviews code for accessibility compliance (ARIA, keyboard navigation, screen readers)
Checks animation and transition patterns for performance and reduced-motion support
Validates form design, image optimization, and responsive layout practices
Covers UX fundamentals including typography, color contrast, and spacing

Who is this for?

Frontend developers and designers who want automated, standards-based feedback on their UI code. Especially useful during code reviews or when building production interfaces that need to meet accessibility and UX quality standards.

📦

Same repository

vercel-labs/agent-skills(13 items)

📚 Related Resources

📝Introducing: React Best Practices

vercel.com

📝Agent Skills Explained: An FAQ

vercel.com

web-design-guidelines

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add vercel-labs/agent-skills --skill web-design-guidelines

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/web-design-guidelines/SKILL.md

SKILL.md

158,828Installs

18,734

Last UpdatedJan 26, 2026

View on GitHub Back to Skills

More from this repository10

🎯

vercel-react-best-practices🎯Skill

React and Next.js performance optimization guidelines from Vercel Engineering. 40+ rules across 8 categories covering component performance, data fetching, and bundle size optimization.

🎯

vercel-composition-patterns🎯Skill

React composition patterns skill from Vercel Labs that helps avoid boolean prop proliferation through compound components, state lifting, and internal composition techniques.

🎯

vercel-react-native-skills🎯Skill

React Native best practices skill with 16 rules across 7 sections covering performance, layout, animation, images, state management, architecture, and platform-specific patterns for Expo and React Native apps.

🎯

react-native-skills🎯Skill

React Native best practices optimized for AI agents from Vercel Engineering. 16 rules across 7 sections covering mobile performance, layout patterns, animations, and platform-specific implementation.

🎯

composition-patterns🎯Skill

Guides AI agents in implementing robust software design patterns for component composition, modularity, and reusability across different programming paradigms.

🎯

deploy-to-vercel🎯Skill

Skill

🎯

vercel-deploy🎯Skill

Automates Vercel deployment configuration and deployment processes for AI agents, generating optimal deployment settings and triggering builds programmatically.

🎯

frontend-design🎯Skill

Skill

🎯

subpath-escape🎯Skill

Skill

🎯

remote_traversal_confirmed🎯Skill

Skill