web-design-guidelines

用途：该技能用于审查 UI 代码是否符合 Vercel 的 Web Interface Guidelines，适用于 UI 代码审查、可访问性检查、设计审计、UX 审查以及对照最佳实践检查站点等场景。\n\n主要能力：每次审查前从指定来源获取最新规则，读取用户指定的文件或匹配模式，依据获取到的全部规则逐条检查，并以简洁的 file:line 格式输出违规发现，通常附带修复建议。支持分析 React/Vue/Svelte 组件、HTML、CSS/SCSS 以及 TypeScript/JavaScript 文件。\n\n使用方式：先通过 WebFetch 获取规则，URL 为 https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md ，提示词为提取所有 UI 规则与指南；随后读取并分析用户提供的文件或模式；最后应用全部规则并输出违规项。需提供必填信息：待审查的文件路径或 glob 模式；若未指定文件，应询问用户要审查哪些文件。输出格式遵循指南规定，一般为 file:line，例如 src/components/Button.tsx:15 - Button should have aria-label for icon-only buttons。\n\n限制与要求：必须每次获取最新指南，不得使用过期缓存；必须应用全部规则，不得只做部分检查；需给出准确的违规位置。最佳实践包括限制单次审查的文件范围以避免上下文溢出、优先报告严重问题、每条违规附带修复方法。参考资料为 Vercel Web Interface Guidelines 与 WCAG 2.1。当前版本 1.0.0，最后更新 2026-01-22，支持平台 Claude、ChatGPT、Gemini。相关资料还给出 Unity3D UI 场景的审查流程，包括用 design-system 技能确认设计令牌，以及 UIToolkit 可访问性、分辨率适配、最小触摸目标 44x44px、WCAG AA 对比度 4.5:1、最小字号 14sp 等检查项。具体收费与价格暂未提供。