Web Interface Guidelines Review

Review files for compliance with Vercel's Web Interface Guidelines.

When to use this skill

• UI code review: check compliance with Web Interface Guidelines

• Accessibility check: when asked "check accessibility"

• Design audit: when asked "audit design"

• UX review: when asked "review UX"

• Best practices review: when asked "check my site against best practices"

How It Works

• Fetch the latest guidelines from the source URL below

• Read the specified files (or prompt user for files/pattern)

• Check against all rules in the fetched guidelines

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

Instructions

Step 1: Fetch Guidelines

Use WebFetch:

WebFetch URL: https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md Prompt: "Extract all UI rules and guidelines"

Step 2: Analyze Files

Read and analyze the files or patterns provided by the user.

Files to analyze:

• React/Vue/Svelte components

• HTML files

• CSS/SCSS files

• TypeScript/JavaScript files

Step 3: Apply Rules

Apply all rules from the fetched guidelines to the files and output violations.

Input Format

Required info

• File or pattern: file path or glob pattern to review

Input examples

Review my UI code:

• File: src/components/Button.tsx

Check accessibility:

• Pattern: src/**/*.tsx

Output Format

Follow the format specified in the guidelines (typically file:line ):

src/components/Button.tsx:15 - Button should have aria-label for icon-only buttons src/components/Modal.tsx:42 - Modal should trap focus within itself src/pages/Home.tsx:8 - Main content should be wrapped in <main> element

Usage

When a user provides a file or pattern argument:

• Fetch guidelines from the source URL above

• Read the specified files

• Apply all rules from the fetched guidelines

• Output findings using the format specified in the guidelines

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

Constraints

Required Rules (MUST)

• Use latest guidelines: fetch fresh guidelines from the source URL for every review

• Apply all rules: check every rule from the fetched guidelines

• Accurate locations: specify violation locations in file:line format

Prohibited (MUST NOT)

• Use stale cache: always fetch the latest guidelines

• Partial check: do not apply only some rules

Best practices

• Limit file scope: be careful about context overflow when reviewing too many files at once

• Prioritize: report critical issues first

• Suggest fixes: include how to fix along with each violation

References

• Vercel Web Interface Guidelines

• WCAG 2.1 Guidelines

Metadata

Version

• Current version: 1.0.0

• Last updated: 2026-01-22

• Supported platforms: Claude, ChatGPT, Gemini

• Source: vercel/agent-skills

Related Skills

• web-accessibility: WCAG accessibility implementation

• ui-component-patterns: UI component patterns

Tags

#UI #review #web-interface #guidelines #vercel #design-audit #UX #frontend

Quick Start

Unity3D UI 리뷰 시나리오 (design-system 연동):

1. 리뷰 대상 파일 지정 (Unity3D UI 스크립트) Pattern: Assets/UI//*.cs, Assets/UI//*.uxml

2. design-system 스킬로 Unity3D 디자인 토큰 확인

   • 색상 팔레트, 타이포그래피, 스페이싱 기준

3. web-design-guidelines로 UI 코드 분석 WebFetch: https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

4. Unity3D UI 특화 체크리스트

   • UIToolkit 접근성: focusable 속성 설정
   • 해상도 대응: flex-wrap, relative 단위 사용
   • 터치 타겟: 최소 44x44px (모바일 빌드)
   • 색상 대비: WCAG AA 기준 (4.5:1 이상)
   • 폰트 가독성: 최소 14sp

5. 결과 출력 (file:line 형식) Assets/UI/HUD.uxml:23 - 버튼 터치 타겟이 44px 미만 Assets/UI/Inventory.cs:67 - 색상 하드코딩, design-system 토큰으로 교체 권장