生成 UI 组件和反馈表单。用户提到组件、UI、Hero 区块、表单、反馈或联系请求时使用。不要用于：认证功能、后端实现、数据库操作或业务逻辑。
这是一组负责生成 UI 组件和表单的技能。
${CLAUDE_SKILL_DIR}/references/ui-skills.md 中的约束。${CLAUDE_SKILL_DIR}/references/frontend-design.md 只在用户明确要求“更尖锐 / 更独特 / 更强调表达 / 强化品牌”时才应用。| 功能 | 详情 |
|---|---|
| 约束集 | See references/ui-skills.md / references/frontend-design.md |
| 组件生成 | See references/component-generation.md |
| 反馈表单 | See references/feedback-forms.md |
在生成 UI 组件时，需要确保可访问性：
♿ 可访问性检查清单
建议生成的 UI 满足以下要求：
### 必须项
- [ ] 图片设置 alt 属性
- [ ] 表单元素正确关联 label
- [ ] 支持键盘操作（可通过 Tab 移动焦点）
- [ ] 焦点状态在视觉上清晰可见
### 推荐项
- [ ] 信息传达不要只依赖颜色
- [ ] 文本对比度达到 4.5:1 以上
- [ ] 正确使用 aria-label / aria-describedby
- [ ] 标题层级（h1 → h2 → h3）保持逻辑清晰
### 交互元素
- [ ] 按钮使用明确标签（不要写“详情”，而应写“查看产品详情”）
- [ ] Modal / Dialog 要有焦点陷阱
- [ ] 错误消息应能被屏幕阅读器正确朗读
♿ 为了让任何人都能顺畅使用
1. **给图片加上说明**
- 不要只写“商品图片”，而应写成“从正面拍摄的红色运动鞋”
2. **可点击的地方也必须能用键盘操作**
- 用 Tab 切换，用 Enter 确认
3. **不要只靠颜色传达含义**
- 不要只用“红色 = 错误”，还要搭配图标和文字