
Web Design Guidelines
SkillReviews UI code against Vercel's Web Interface Guidelines, covering accessibility, focus, forms, animation, typography, dark mode and more, listing issues as file:line. Fetches the latest rules before each review. Maintained by Vercel.
name: web-design-guidelines
description: 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".
metadata:
author: vercel
version: "1.0.0"
argument-hint: <file-or-pattern>
Web Interface Guidelines
Review files for compliance with Web Interface Guidelines.
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:lineformat
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:
- 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.
관련 리소스

Skills For Designers and Engineers
SkillDesign engineering skills by Emil Kowalski, author of Sonner and Vaul: choose animation easing and durations, review and improve motion, apply Apple design principles, make web apps feel native on phones, and help pick UI libraries and prototype multiple versions.
emilkowalski/skills46.6k
Jakub Krehel Skills
SkillDesign engineer Jakub Krehel's 11 UI skills: targeted fixes for typography, color, layout, accessibility and UI copy, plus full interface reviews, animation teardowns, component state stress tests and multi-variant generation. Works on web project code; installing needs Node.js.
jakubkrehel/skills8k
Make Interfaces Feel Better
SkillDesign engineer Jakub Krehel's UI polish skill covering animation, typography, icons, hover states, optical alignment, concentric radii, shadows and hit areas, with quick and full review modes, so agents get the details right when building or reviewing UI. Works on web code; needs Node.js.
jakubkrehel/make-interfaces-feel-better3.7k
User Interface Wiki
SkillCompanion skill to the User Interface Wiki: 152 rules in 12 categories, from motion, easing and exit animations to UI sounds, interaction laws, prefetching and typography, for writing or reviewing web UI code, with issues listed by file:line. Needs an existing web project and Node.js to install.
raphaelsalaja/userinterface-wiki914
Frontend Design
SkillHas the agent commit to a visual direction before building or redesigning an interface, making deliberate choices on color, type and layout instead of generic, templated AI UI. Official Anthropic skill.
anthropics/skills182k
UI UX Pro Max
SkillUI design knowledge base skill: looks up UI styles, palettes, font pairings, charts and UX guidelines by product type and generates a full design system, covering 22 stacks including React, SwiftUI and Flutter. Needs Python 3 locally.
nextlevelbuilder/ui-ux-pro-max-skill136k