Skip to main content
This skill performs automated reviews of UI implementations against Web Interface Guidelines from Vercel. Use after implementation to audit for accessibility, performance, and best practices.

​
What This Skill Provides

The Web Design Guidelines skill provides automated UI code review capabilities based on Vercel’s Web Interface Guidelines. It fetches the latest rules and checks implementations for compliance.

​
Core Functionality

Automated Compliance Checking

Fetches fresh guidelines from Vercel’s repository and applies all rules to specified files, outputting findings in file:line format for easy navigation.

​
When This Skill Is Loaded

Agents load this skill when:
  • Asked to “review my UI”
  • Checking accessibility compliance
  • Auditing design implementations
  • Reviewing UX best practices
  • Checking site against web standards
  • Performing post-implementation quality checks
This skill is designed for post-implementation review. Use frontend-design before coding to learn principles, then use this skill after coding to audit the implementation.

​
How It Works

1

Fetch Latest Guidelines

Retrieves current Web Interface Guidelines from the Vercel Labs repository to ensure reviews use up-to-date rules.
2

Read Specified Files

Reads the UI files provided by the user (or prompts for file patterns if not specified).
3

Apply All Rules

Checks the implementation against all rules in the fetched guidelines.
4

Output Findings

Reports issues in terse file:line format for quick navigation and fixing.

​
Use Cases

​
Post-Implementation Audit

After building UI components or pages:
  1. Complete implementation
  2. Ask agent to review using this skill
  3. Receive findings with specific file/line references
  4. Fix identified issues
  5. Re-review to confirm fixes

​
Accessibility Verification

Check implementations for:
  • ARIA labels and semantic HTML
  • Keyboard navigation support
  • Focus management and visible focus states
  • Screen reader compatibility
  • Color contrast ratios
  • Responsive touch targets

​
Performance Best Practices

Verify optimizations:
  • Image loading strategies
  • Animation performance (GPU acceleration)
  • Layout shift prevention
  • Resource loading patterns

​
Design Consistency

Ensure adherence to:
  • Focus state visibility
  • Interactive element feedback
  • Consistent spacing and sizing
  • Proper semantic markup

Frontend Design

Use BEFORE coding to learn design principles

Next.js React Expert

Performance optimization patterns

Tailwind Patterns

Implementation patterns for styling

​
Complete Design Workflow

Full Process:
  1. DESIGN → Read frontend-design principles
  2. CODE → Implement the design
  3. AUDIT → Run web-design-guidelines review ← YOU ARE HERE
  4. FIX → Address findings from audit
This skill completes the workflow by providing objective compliance checking after implementation.

​
Which Agents Use This Skill

Frontend Specialist

The Frontend Specialist loads this skill to perform UI audits and compliance reviews. It’s part of the comprehensive frontend toolkit alongside design and implementation skills.
The Frontend Specialist uses this skill as part of quality control - after implementing designs based on frontend-design principles and tailwind-patterns.

​
Guidelines Source

The skill fetches rules from: 
https://github.com/vercel-labs/web-interface-guidelines

Always Fresh

By fetching guidelines on each review, the skill ensures it’s checking against the most current web standards and best practices from Vercel.

​
Usage Pattern

When a user requests a review:
1

Provide Files or Pattern

User specifies which files to review (e.g., “review components/Button.tsx” or “review all tsx files”)
2

Agent Fetches Guidelines

Agent retrieves latest rules from Vercel’s repository
3

Files Are Read

Agent reads the specified implementation files
4

Rules Applied

All guidelines are checked against the implementation
5

Report Generated

Findings are output with file:line references
If no files are specified, the agent will ask the user which files or patterns to review.

​
Review Categories

The guidelines typically cover:

​
Accessibility

  • Semantic HTML usage
  • ARIA attributes and roles
  • Keyboard navigation
  • Screen reader support
  • Focus management
  • Color contrast

​
Performance

  • Image optimization
  • Animation efficiency
  • Resource loading
  • Layout stability
  • Core Web Vitals considerations

​
User Experience

  • Interactive feedback
  • Loading states
  • Error handling
  • Touch target sizes
  • Responsive design

​
Best Practices

  • HTML validity
  • CSS organization
  • JavaScript patterns
  • Progressive enhancement
  • Cross-browser compatibility

​
Output Format

Findings are reported in a terse, actionable format: 
components/Button.tsx:42 - Missing aria-label for icon button
components/Modal.tsx:156 - Focus not trapped within modal
pages/index.tsx:89 - Image missing alt text
This format allows quick navigation to issues for fixing.

​
Complementary Approach

Before Implementation

Frontend Design SkillTeaches principles:
  • Color psychology
  • Typography rules
  • UX psychology
  • Layout principles

After Implementation

Web Design Guidelines SkillAudits compliance:
  • Accessibility checks
  • Performance verification
  • Best practices review
  • Standards compliance
Design Thinking → Implementation → Audit is the complete workflow for high-quality UI development.
Author: Vercel
Version: 1.0.0
Source: Web Interface Guidelines (fetched fresh on each review)

Build docs developers (and LLMs) love

Get started for freeTalk to us