UI组件与表单生成器Skill ui

---

name: ui description: “生成UI组件和反馈表单。当用户提到组件、UI、英雄区域、表单、反馈或联系请求时使用。不要用于：认证功能、后端实现、数据库操作或业务逻辑。” description-en: “生成UI组件和反馈表单。当用户提到组件、UI、英雄区域、表单、反馈或联系请求时使用。不要用于：认证功能、后端实现、数据库操作或业务逻辑。” description-ja: “生成UI组件和反馈表单。当用户提到组件、UI、英雄区域、表单、反馈或联系请求时使用。不要用于：认证功能、后端实现、数据库操作或业务逻辑。” allowed-tools: [“Read”, “Write”, “Edit”, “Bash”] user-invocable: false

UI技能

负责生成UI组件和表单的技能群。

约束的优先级和适用条件

1. 基本优先应用 references/ui-skills.md 的约束。
2. references/frontend-design.md 仅在“尖锐/独特/表现强烈/品牌强化”等明确指定时应用。
3. UI技能的MUST/NEVER原则保持。但仅当用户明确要求时允许以下例外：
   • 渐变、发光、强烈装饰
   • 动画（添加·扩展）
   • 自定义缓动

功能详细

功能	详细
约束集	参见 references/ui-skills.md / references/frontend-design.md
组件生成	参见 references/component-generation.md
反馈表单	参见 references/feedback-forms.md

执行步骤

1. 应用约束集（遵循优先级）
2. 品质判定门（步骤0）
3. 分类用户请求
4. 从上述“功能详细”中读取适当的参考文件
5. 根据内容生成

步骤0: 品质判定门（a11y 检查清单）

生成UI组件时，确保可访问性:

♿ 可访问性检查清单

生成的UI推荐满足以下：

### 必须项目
- [ ] 设置图片的alt属性
- [ ] 关联表单元素的label
- [ ] 键盘操作可能（Tab键焦点移动）
- [ ] 焦点状态视觉上可分辨

### 推荐项目
- [ ] 不依赖颜色的信息传达
- [ ] 对比度比4.5:1以上（文本）
- [ ] aria-label / aria-describedby的适当使用
- [ ] 标题结构（h1 → h2 → h3）逻辑性

### 交互元素
- [ ] 按钮有适当的标签（“详细”而非“产品详细查看”）
- [ ] 模态/对话框的焦点陷阱
- [ ] 错误消息能被屏幕阅读器读取

针对VibeCoder

♿ 为了设计谁都能使用的界面

1. **给图片添加描述**
   - 不是“商品图片”而是“红色运动鞋，正面视角”

2. **使可点击的地方键盘也能操作**
   - Tab键移动，Enter键决定

3. **不只用颜色判断**
   - 不仅是红色=错误，还要有图标+文本