Automated UI code auditing against Vercel's web interface guidelines. Reviews for accessibility, design compliance, and best practices.
What it does
Code can pass visual inspection and still fail on accessibility, design consistency, and interaction quality. Claude doesn't automatically check generated UI against design standards — it generates what looks plausible. This skill gives Claude Vercel's web interface design guidelines as an auditing framework: colour contrast ratios, focus state requirements, motion and animation constraints, typographic consistency rules, and component interaction patterns. Use it for review, not just generation.
Use case
When you want Claude to audit existing UI against a real standard, not just generate new code. Particularly useful before shipping a new component or before a design review. Made by Vercel Labs from the guidelines used to review their own product interfaces.
"Audit this component — what would a Vercel design review flag?" "Check this page for WCAG AA colour contrast failures and fix them." "This form's focus states are broken — fix them to meet the interaction guidelines." "Review the motion in this animation — is it within acceptable performance constraints?" "What accessibility issues does this navigation component have?"
Paste the component or page code and ask Claude to audit it. You get a structured list: issue, which guideline it violates, and the specific fix.
Combine with vercel-react-best-practices for complete technical and design coverage.
Works on existing code and newly generated code. Run it before committing UI changes.
Input
HTML, JSX, or TSX for a component, page, or layout. Can also work from a description of a visual issue.
Output
A structured audit: each issue, the guideline it violates, and the specific fix. Prioritised by severity — accessibility failures first, consistency issues second.
npx skillsadd vercel-labs/agent-skills/web-design-guidelines
npx skillsadd vercel-labs/skills/web-design-guidelines
Requires skills.sh CLI