web-design-guidelines
byvercel-labs· 154 skills
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".
How to install web-design-guidelines?
vercel-labs/agent-skills/web-design-guidelines
$npx -y skills add vercel-labs/agent-skills --skill web-design-guidelinesInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/vercel-labs/agent-skills" --skill "vercel-labs/agent-skills/web-design-guidelines"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/vercel-labs/agent-skills" that are relevant to the current task. Run `npx skills add "https://github.com/vercel-labs/agent-skills"` and select the relevant skills, then follow their instructions.
SKILL.md
| 1 | # Web Interface Guidelines |
| 2 | |
| 3 | Review files for compliance with Web Interface Guidelines. |
| 4 | |
| 5 | ## How It Works |
| 6 | |
| 7 | 1. Fetch the latest guidelines from the source URL below |
| 8 | 2. Read the specified files (or prompt user for files/pattern) |
| 9 | 3. Check against all rules in the fetched guidelines |
| 10 | 4. Output findings in the terse `file:line` format |
| 11 | |
| 12 | ## Guidelines Source |
| 13 | |
| 14 | Fetch fresh guidelines before each review: |
| 15 | |
| 16 | ``` |
| 17 | https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md |
| 18 | ``` |
| 19 | |
| 20 | Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions. |
| 21 | |
| 22 | ## Usage |
| 23 | |
| 24 | When a user provides a file or pattern argument: |
| 25 | 1. Fetch guidelines from the source URL above |
| 26 | 2. Read the specified files |
| 27 | 3. Apply all rules from the fetched guidelines |
| 28 | 4. Output findings using the format specified in the guidelines |
| 29 | |
| 30 | If no files specified, ask the user which files to review. |
Related
6 picksType
- prototypeBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a…Jul 2026
- lark-whiteboard飞书画板：查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用多种格式更新画板内容。 当用户需要查看画板内容、导出画板图片、编辑画板时使用此 skill。不负责：飞书云文档内容编辑（lark-doc）、文档内嵌电子表格/Base（lark-sheets / lark-base）。Jul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX…Jul 2026
- design-guidePaperclip UI design system guide for building consistent, reusable frontend components.Jul 2026
- impeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or…Jul 2026
- gpt-tasteskillElite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial…Jul 2026
