web-design-guidelines
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".
Best use case
web-design-guidelines is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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".
Teams using web-design-guidelines should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/web-design-guidelines/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How web-design-guidelines Compares
| Feature / Agent | web-design-guidelines | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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".
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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.
Related Skills
ux-interaction-design
UX interaction design patterns including micro-interactions, UI state machines, transition specifications, form UX, animation principles, and feedback patterns. Use when designing interactions, defining component states, or specifying animations.
ui-visual-design
Visual design mastery including color theory, typography systems, visual hierarchy, hero section patterns, page section patterns, design tokens, and modern design trends. Use when creating visual designs, building design systems, designing hero sections, or establishing design tokens.
ui-ux-designer
UI/UX 设计师专家，精通界面设计、交互设计、用户体验和设计系统
mobile-design
Mobile-first design and engineering doctrine for iOS and Android apps. Covers touch interaction, performance, platform conventions, offline behavior, and mobile-specific decision-making. Teaches principles and constraints, not fixed layouts. Use for React Native, Flutter, or native mobile apps.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
design-review
Design critique and review methodology including heuristic evaluation, consistency checking, accessibility compliance, and visual quality assessment. Use when reviewing design artifacts, evaluating UI quality, or auditing design compliance.
design-handoff
Design handoff protocols including artifact format standards, lifecycle state management, inter-agent communication, and quality gate procedures. Use when managing design lifecycle state, coordinating between agents, or formatting handoff artifacts.
Brainstorming — Design Before Code
> **Type:** Rigid process (follow exactly)
YAML Prompt Library
> Store reusable AI prompts as YAML files with structured messages, variables, and test data for version-controlled prompt engineering.
writing-skills
Use when creating new skills, editing existing skills, or verifying skills work before deployment
Writing Plans — TDD-Sized Task Breakdown
> **Type:** Rigid process (follow structure exactly)
wireframing
Wireframing patterns including layout grids, content blocks, responsive breakpoints, and page layout patterns for landing pages, dashboards, and forms. Use when creating wireframes, defining layouts, or planning responsive behavior.