Web接口指南审查技能Skill web-design-guidelines

---

name: 网页设计指南 description: 审查UI代码是否符合Web接口指南合规性。当被要求“审查我的UI”、“检查可访问性”、“审核设计”、“审查UX”或“根据最佳实践检查我的站点”时使用。 metadata: author: vercel version: “1.0.0” argument-hint: <file-or-pattern>

Web接口指南

审查文件以确保符合Web接口指南。

工作原理

1. 从 #[[file:references/guideline.md]] 读取指南
2. 读取指定文件（或提示用户提供文件/模式）
3. 根据指南中的所有规则进行检查
4. 以简洁的 file:line 格式输出发现

指南参考

所有规则和输出格式说明在：

#[[file:references/guideline.md]]

指南涵盖：

• 可访问性（ARIA、语义HTML、键盘导航）
• 焦点状态和键盘交互
• 表单（自动完成、验证、标签）
• 动画（减少运动、性能）
• 排版（正确字符、数字格式化）
• 内容处理（溢出、空状态）
• 图像（尺寸、懒加载）
• 性能（虚拟化、DOM读取）
• 导航与状态（URL同步、深层链接）
• 触摸与交互（点击延迟、安全区域）
• 深色模式与主题
• 区域设置与国际化
• 水化安全性
• 常见反模式标记

使用方法

当用户提供文件或模式参数时：

1. 从 references/guideline.md 读取指南
2. 读取指定文件
3. 应用指南中的所有规则
4. 使用指南中指定的格式输出发现

如果未指定文件，则询问用户要审查哪些文件。

输出格式

遵循指南中的格式：

• 按文件分组发现
• 使用 file:line 格式（VS Code可点击）
• 简洁，高信噪比
• 陈述问题 + 位置
• 除非修复非显而易见，否则跳过解释