Vibe Index
🎯

web-design-guidelines

🎯Skill

from vercel-labs/claude-skills

VibeIndex|
What it does

Reviews UI code against web design best practices, checking accessibility, UX, and interface guidelines for compliance.

πŸ“¦

Part of

vercel-labs/claude-skills(4 items)

web-design-guidelines

Installation

Quick InstallInstall with npx
npx skills add vercel-labs/agent-skills
πŸ“– Extracted from docs: vercel-labs/claude-skills
Need more details? View full documentation on GitHub β†’
2Installs
-
AddedFeb 4, 2026
View on GitHubBack to Skills

Skill Details

SKILL.md

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".

Overview

# Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works

  1. Fetch the latest guidelines from the source URL below
  2. Read the specified files (or prompt user for files/pattern)
  3. Check against all rules in the fetched guidelines
  4. Output findings in the terse file:line format

Guidelines Source

Fetch fresh guidelines before each review:

```

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

```

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

Usage

When a user provides a file or pattern argument:

  1. Fetch guidelines from the source URL above
  2. Read the specified files
  3. Apply all rules from the fetched guidelines
  4. Output findings using the format specified in the guidelines

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

More from this repository3

🎯
vercel-react-native-skills🎯Skill

Provides comprehensive React Native development guidelines and best practices for AI agents, focusing on performance optimization, architecture, and platform-specific mobile development patterns.

🎯
vercel-composition-patterns🎯Skill

Enables composing and chaining Claude AI skills with flexible configuration and dynamic routing for complex task workflows.

🎯
vercel-react-best-practices🎯Skill

Provides comprehensive React and Next.js performance optimization guidelines, offering 40+ actionable rules across critical performance, rendering, and bundle size categories to help developers wri...