ui-ux-guidelines

用途

ui-ux-guidelines 是一个用于审查 UI 代码是否符合 Web Interface Guidelines 的技能，也可在构建新组件和交付前检查时使用。它把 UI/UX 规则按优先级和类别组织，并指向对应的参考文件，便于在代码审查和实现过程中逐条对照。

主要能力

该技能将规则分为九个优先级类别：

1. 无障碍（CRITICAL）——参考文件 accessibility-and-interaction
2. 触摸与交互（CRITICAL）——参考文件 accessibility-and-interaction
3. 性能（HIGH）——参考文件 layout-typography-animation
4. 布局与响应式（HIGH）——参考文件 layout-typography-animation
5. 排版与颜色（MEDIUM）——参考文件 layout-typography-animation
6. 动画（MEDIUM）——参考文件 layout-typography-animation
7. 表单（HIGH）——参考文件 forms-content-checklist
8. 内容与导航（MEDIUM）——参考文件 forms-content-checklist
9. 图表与数据（LOW）——参考文件 layout-typography-animation

参考文件包括：

• Accessibility & Interaction：焦点、ARIA、键盘、触摸目标、光标、拖拽体验
• Layout, Typography & Animation：性能、响应式、字体、颜色、动效、图表
• Forms, Content & Checklist：表单、内容处理、导航、深色模式、区域设置、水合、交付前检查清单

使用方式

技能提供三种工作流：

阶段一：审查 UI 代码

1. 读取目标文件。
2. 根据代码内容从 references/ 加载相关参考文件。
3. 检查每条适用规则，并按输出格式报告违规。

阶段二：构建新组件

1. 加载 references/accessibility-and-interaction.md——所有组件必须满足 CRITICAL 规则。
2. 根据组件类型加载额外参考：
   • 表单组件 → references/forms-content-checklist.md
   • 布局/视觉组件 → references/layout-typography-animation.md
3. 在实现过程中遵循规则。

阶段三：交付前检查

1. 加载 references/forms-content-checklist.md 获取完整检查清单。
2. 加载 references/accessibility-and-interaction.md 获取交互检查清单。
3. 在发布前逐项核对每个检查项。

反模式

技能要求标记以下反模式：

• user-scalable=no 或 maximum-scale=1——禁用缩放
• onPaste 配合 preventDefault——阻止粘贴
• transition: all——应显式列出属性
• outline-none 且没有 :focus-visible 替代
• 用 <div>/<span> 承载点击处理器——应使用 <button> 或 <a>
• <img> 缺少 width 和 height（导致 CLS）
• 内联 onClick 导航且没有 <a>（破坏 Cmd+click）
• 大型 .map() 没有虚拟化（超过 50 项）
• 硬编码日期/数字格式——应使用 Intl.*
• 仅图标按钮缺少 aria-label

代码审查输出格式

按文件分组发现的问题。使用 file:line 格式（VS Code 可点击）。简洁——说明问题和位置。除非修复方式不明显，否则跳过解释。预期输出格式参见 template.md。

适用场景

• 被要求审查 UI、检查无障碍、审计设计、审查 UX 或对照最佳实践检查时。
• 构建新组件时确保满足无障碍等关键规则。
• 交付前逐项核对检查清单。

限制

资料未提供该技能的安装方式、收费模式、支持平台、具体效果或使用步骤等额外信息。