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
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.
frontend-component-design
前端组件设计规范与最佳实践。在编写任何前端代码（React/Next.js 组件、页面、hooks）时自动触发。确保代码复用性、封装性、单一职责原则。触发场景包括创建新的前端组件或页面、重构现有前端代码、添加新功能到前端、任何涉及 frontend 目录的代码修改。此技能始终生效。
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
ui-ux-pro-max
Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations.
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
tailwindcss
Tailwind CSS v4 utility-first styling patterns including responsive design, dark mode, and custom configuration. Use when styling with Tailwind, adding utility classes, configuring Tailwind, setting up dark mode, or customizing the theme.
skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
run-tests
后端代码测试验证规则。此技能在以下情况下自动触发： - 任何后端代码修改（backend/ 目录下的 .py 文件） - 新增功能开发 - Bug 修复 - 代码重构 核心原则： 1. 后端代码修改必须有对应的测试用例 2. 修改业务逻辑时必须同步更新相关测试用例 3. 测试全部通过才算功能完成 触发关键词：后端、backend、python、测试、test、pytest、功能、feature、修复、fix、实现、修改、完成、验证 alwaysApply: true
release
发版流程 - 仔细阅读上个版本到现在版本的内容，把更改功能放到项目CHANGELOG.md目录下，处理README图片引用，然后提交且推送所有源码到GitHub和Gitee双平台，再之后打tag 触发条件：用户要求发版、发布、release、打tag
readme-images
Handle README.md image references for GitHub and Gitee platforms. Use when writing or converting README.md files that contain images, ensuring correct image paths for each platform. GitHub READMEs use Qiniu cloud URLs (via qiniu-upload skill), Gitee READMEs use local relative image paths.
qiniu-upload
Upload images to Qiniu Cloud (七牛云) via local PicList/PicGo service and return the public access URL. Use when the user needs to upload images, screenshots, or any picture files to Qiniu cloud storage, get image hosting URLs, or publish images to http://qiniu.biomed168.com/pic/.
mobile-automation
Mobile MCP + 飞书 MCP 双协作自动化测试专家。