【Vercel实用Skill】web-design-guidelines 技能
审查UI代码是否符合Web界面指南。当被要求"审查我的UI"、"检查可访问性"、"审计设计"、"审查UX"或"根据最佳实践检查我的网站"时使用。
📦 下载地址：此技能来源于 Vercel Labs 开源项目，完整代码和更多资源请访问： https://github.com/vercel-labs/agent-skills
技能概述
web-design-guidelines 技能是一个专门用于审查UI代码合规性的技能。它从权威来源获取最新的Web界面指南，对指定的文件进行全面检查，确保代码符合可访问性、用户体验和设计最佳实践。该技能能够自动获取最新规则，保证审查结果的时效性和准确性。
主要功能
- 实时规则获取：从权威来源获取最新的Web界面指南
- 全面合规检查：检查文件是否符合所有规则要求
- 可访问性审查：确保UI符合可访问性标准
- UX最佳实践：验证用户体验设计是否达标
- 简洁输出格式：使用简洁的file:line格式输出发现
- 灵活文件选择：支持指定文件或模式进行审查
- 自动更新规则：每次审查前获取最新指南
触发条件
在以下情况下应该使用此技能：
- 用户请求"审查我的UI"
- 用户请求"检查可访问性"
- 用户请求"审计设计"
- 用户请求"审查UX"
- 用户请求"根据最佳实践检查我的网站"
- 需要验证UI代码是否符合Web标准
- 需要检查可访问性合规性
处理过程
1. 获取最新指南
规则来源
从以下URL获取最新的Web界面指南：
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
使用WebFetch工具检索最新规则，确保审查基于最新的标准和最佳实践。
2. 读取文件
文件选择
根据用户提供的参数读取指定文件：
- 如果用户提供了文件或模式参数，读取指定文件
- 如果没有指定文件，提示用户选择要审查的文件
- 支持通配符模式匹配多个文件
3. 应用规则检查
全面审查
对每个文件应用所有获取到的规则：
- 可访问性规则检查
- 用户体验规则检查
- 设计最佳实践检查
- 性能优化建议检查
- 响应式设计检查
4. 输出结果
结果格式
使用简洁的file:line格式输出发现：
path/to/file.html:42: Issue description path/to/component.tsx:15: Another issue found
这种格式便于快速定位和修复问题。
使用方法
参数说明
<file-or-pattern>
接受文件路径或通配符模式作为参数。
使用示例
示例1：审查单个文件
用户：审查我的UI，检查 src/components/Button.tsx AI：我将获取最新的Web界面指南并审查该文件...
示例2：审查多个文件
用户：检查可访问性，审查 src/components/*.tsx AI：我将审查所有匹配的组件文件...
示例3：未指定文件
用户：审查我的UI AI：请告诉我您想审查哪些文件？您可以提供： - 具体文件路径（如 src/App.tsx） - 文件模式（如 src/**/*.tsx） - 目录路径（如 src/components）
输入要求
使用此技能时，需要提供以下信息：
- 文件路径或模式（可选）：要审查的文件路径或通配符模式
- 如果没有提供文件，系统会提示用户选择
输出说明
此技能将提供以下输出：
- 问题列表：使用file:line格式列出所有发现的问题
- 问题描述：每个问题的详细说明
- 修复建议：针对每个问题的修复建议
- 合规性总结：整体合规性评估
审查范围
该技能检查的典型内容包括：
可访问性（Accessibility）
- ARIA属性的正确使用
- 键盘导航支持
- 颜色对比度
- 屏幕阅读器兼容性
- 焦点管理
- 替代文本
用户体验（UX）
- 交互反馈
- 加载状态
- 错误处理
- 表单验证
- 导航清晰度
- 响应式设计
设计最佳实践
- 视觉层次
- 间距和布局
- 排版规范
- 颜色使用
- 组件一致性
- 品牌一致性
性能优化
- 图片优化
- 资源加载
- 渲染性能
- 交互响应速度
最佳实践
推荐做法：
- 在开发过程中定期进行UI审查
- 在提交代码前运行可访问性检查
- 关注所有输出的问题，即使是低优先级
- 结合实际使用场景理解审查结果
- 优先修复可访问性问题
- 保持规则的最新状态，定期重新审查
- 将审查集成到CI/CD流程中
- 与设计团队协作解决设计相关问题
使用场景
场景1：开发阶段审查
在开发新功能或组件时，使用此技能进行实时审查，确保代码从一开始就符合最佳实践。
场景2：代码审查辅助
在Pull Request审查过程中，使用此技能自动检查UI相关代码，提高审查效率。
场景3：可访问性合规审计
在产品发布前，进行全面的可访问性审计，确保符合WCAG等标准。
场景4：遗留代码重构
在重构旧代码时，使用此技能识别需要改进的区域，确保重构后的代码符合现代标准。
相关资源
- 规则来源：https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
- 许可证：MIT License
- 维护者：Vercel
- 版本：1.0.0
常见问题
Q: 规则会自动更新吗？
A:是的，每次审查前都会从权威来源获取最新规则，确保使用最新的标准和最佳实践。
Q: 可以自定义审查规则吗？
A:当前使用的是Vercel维护的标准规则集。如需自定义，可以参考规则来源并创建自己的审查工具。
Q: 输出格式可以自定义吗？
A:输出格式遵循指南中定义的标准格式（file:line），便于工具集成和自动化处理。
💡 提示：此技能是确保UI代码质量的有力工具。建议在开发流程中定期使用，特别是在代码审查和发布前的阶段。优先处理可访问性问题，因为这直接影响用户体验和合规性。