Web Interface Guidelines

Code-level UI compliance checker. Originally from Vercel Engineering.

When to Use This vs. design-audit

Use This Skill	Use design-audit
Code review of specific files	High-level page analysis
Want `file:line` output format	Want severity ratings (Critical/Important/Minor)
Checking implementation details	Checking conversion optimization
Semantic HTML, ARIA, keyboard nav	Copy, psychology, CTA effectiveness
Technical compliance	Business impact

How It Works

•Fetch the latest guidelines from Vercel's source
•Read the specified files (or prompt user for files/pattern)
•Check against all 100+ rules
•Output findings in terse file:line format

Guidelines Source

Fetch fresh guidelines before each review:

code

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

Use WebFetch to retrieve the latest rules. The fetched content contains all current rules and output format instructions.

Rule Categories

The guidelines cover 11 categories:

Category	Focus Areas
Semantic HTML	Proper element usage, landmarks, headings
Keyboard Navigation	Focus management, tab order, shortcuts
Screen Readers	ARIA labels, live regions, announcements
Touch & Pointer	Touch targets, gesture handling
Responsive Design	Breakpoints, fluid layouts, container queries
Performance	LCP, CLS, INP, lazy loading
Animations	Reduced motion, GPU acceleration
Forms	Validation, error handling, autocomplete
Dark Mode	Color schemes, contrast, theme switching
Internationalization	RTL, locale formatting, translations
Content	Microcopy, error messages, loading states

Usage

When a user provides a file or pattern argument:

•Fetch guidelines from the source URL above
•Read the specified files using Glob/Read tools
•Apply all rules from the fetched guidelines
•Output findings using the format: file:line - issue description

Example output:

code

src/components/Button.tsx:24 - Missing aria-label on icon-only button
src/components/Modal.tsx:15 - Focus not trapped within modal
src/pages/Home.tsx:89 - Image missing alt text

If no files specified, ask the user which files to review.

Related Skills

•design-audit for high-level conversion-focused page audits
•react-best-practices for React/Next.js performance patterns
•theme-system for dark mode implementation