web-design-guidelines

Web Design Guidelines - UI Code Design Specification Review Skill

Overview

Web Design Guidelines is an automated UI code review skill that helps developers check whether their code complies with the Vercel Web Interface Guidelines standards, quickly identifying design specification issues and accessibility defects.

Use Cases

Pre-release code review: Automatically checks all UI code before deploying a website to ensure it follows Web Interface Guidelines and best practices, preventing design flaws from reaching production.

Design handoff acceptance: After designers deliver design mockups, quickly reviews whether the frontend implementation matches the design specifications, validating that visual consistency and interaction standards are correctly implemented.

Accessibility audits: Checks whether the website follows accessibility standards such as WCAG, identifies interface issues that may affect users with disabilities, and improves overall inclusiveness.

Core Features

Automatically fetch the latest guidelines: Each time a review is run, the skill pulls the newest Web Interface Guidelines in real time from Vercel Labs’ official sources to ensure the rules are always in sync with the latest standards.

Intelligent rule matching: Reads the specified UI code files and compares them against all rules in the guidelines. It automatically identifies code patterns that do not comply and outputs the specific file and line numbers.

Structured issue reporting: Outputs findings in a concise file:line format. Supports batch reviewing by specifying files or file glob patterns, making it easier to quickly locate and fix issues.

Common Questions

What file formats does the Web Design Guidelines skill support?

The skill can review any text file that contains UI code, including component files for HTML, JSX/TSX (React), Vue, Svelte, and more frontend frameworks. The checks are based on the code content rather than the file extension, so it supports any markup language and template files.

How do I check the UI code for an entire project?

When invoking the skill, use file glob patterns such as src/**/*.tsx or components/**/*.vue. The skill recursively scans all matching files under the specified directories. If you’re unsure where the files are located, you can omit parameters, and the skill will prompt you to choose which files or directories to review.

What does the review output include?

The check items come from the Vercel Web Interface Guidelines and cover multiple dimensions such as component structure, naming conventions, accessibility attributes, and style organization. Before each review, the skill fetches the latest guideline content, so the check items dynamically update in line with official standards.