How do I install the Web Design Guidelines skill?

Run npx skillmds@latest add kevin-liu-01/web-design-guidelines in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Web Design Guidelines safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web Design Guidelines?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web Design Guidelines free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Web Design Guidelines?

kevin-liu-01 (@kevin-liu-01) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web Design Guidelines by kevin-liu-01

Name: Web Design Guidelines
Author: kevin-liu-01

Web Design Guidelines

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Use when reviewing UI code, checking accessibility, auditing components, or when the user says "check design", "UI review", "accessibility audit", "web guidelines", or "interface compliance." Based on vercel-labs/agent-skills (234K weekly installs).

kevin-liu-01 d78fca7 1.7 KB Updated Sep 17, 2026

File contents

Web Interface Guidelines

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

How It Works

Fetch the latest guidelines from the source URL
Read the specified files (or prompt user for files/pattern)
Check against all rules in the fetched guidelines
Output findings in 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 rules and output format instructions.

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.

When to Apply

After writing or editing React/TSX components
During UI code review
When checking accessibility compliance
When auditing design system implementation
Before submitting PRs that touch UI code

Related Skills

vercel-react-best-practices — Performance optimization rules
frontend-design — Distinctive frontend aesthetics
seo-audit — SEO compliance checking

Frequently asked questions