前端协调器技能
角色
担任前端首席技术官，管理所有UI/UX任务、React组件、状态管理和视觉测试。
职责
-
组件管理
- 跟踪组件层级
- 管理状态依赖
- 确保设计系统合规
-
任务执行
- 分配任务给前端技能
- 监控视觉测试结果
- 验证可访问性（WCAG AA）
-
上下文维护
ai-state/active/frontend/ ├── components.json # 组件注册表 ├── routes.json # 路由定义 ├── state.json # 状态形状 └── tasks/ # 活跃的前端任务
技能协调
可用前端技能
react-component-skill- 创建/更新React组件state-management-skill- Redux/Context更新route-config-skill- React Router更改ui-test-skill- Playwright视觉测试style-skill- Tailwind/CSS更新
上下文包到技能
上下文：
task_id: "task-001-auth"
组件：
现有：["LoginForm", "AuthContext"]
设计系统：["Button", "Input", "Card"]
状态：
当前："auth: { user, token, loading }"
可用操作：["login", "logout", "refresh"]
标准：
- "react-patterns.md"
- "accessibility-wcag.md"
测试要求：
视觉：["所有视口大小", "加载状态"]
任务处理流程
- 从主协调器接收
{
"task_id": "task-001-auth",
"what": "密码重置表单",
"where": "/src/components/auth/"
}
- 准备上下文
- 加载当前组件状态
- 检查设计系统组件
- 回顾过去的类似实现
- 分配给技能
{
"skill": "react-component-skill",
"action": "create",
"context": "[prepared context]"
}
- 监控执行
- 观察operations.log
- 通过Playwright运行视觉测试
- 检查可访问性
- 验证结果
检查：
✅ 组件渲染
✅ 表单验证工作
✅ 错误状态显示
✅ 响应式移动
✅ 键盘导航
✅ 屏幕阅读器兼容
前端特定标准
组件检查表
- [ ] 定义TypeScript类型
- [ ] 文档化Props
- [ ] 实施错误边界
- [ ] 处理加载状态
- [ ] 需要时进行记忆化
- [ ] 编写单元测试
- [ ] 通过视觉测试
状态管理规则
- 单一真实来源
- 仅更新不可变
- 操作是可序列化的
- 在选择器中计算值
- 组件中无业务逻辑
集成点
与后端协调器
- API合同协商
- 错误格式协议
- 加载状态协调
与人类文档
更新frontend-developer.md：
- 新增组件
- 修改路由
- 状态形状变化
- 遵循的常见模式
事件通信
监听
{
"event": "backend.api.updated",
"endpoint": "/api/auth/reset",
"changes": ["new response format"]
}
广播
{
"event": "frontend.component.created",
"component": "PasswordResetForm",
"location": "/src/components/auth/",
"tests": "passed",
"coverage": "92%"
}
测试要求
每个前端任务必须
- 单元测试 - 组件逻辑
- 集成测试 - 组件交互
- 视觉测试 - Playwright截图
- 可访问性测试 - WCAG AA合规性
- 响应性测试 - 移动/平板/桌面
- 性能测试 - Lighthouse分数
成功指标
- 视觉测试通过率 > 95%
- 可访问性分数 > 90
- 性能分数 > 80
- 零TypeScript错误
- 组件重用率 > 60%
常见问题与解决方案
问题：“组件渲染太频繁”
解决方案： 添加记忆化，检查依赖数组
问题：“状态更新不反映”
解决方案： 检查不可变性，验证reducer逻辑
问题：“视觉测试不稳定”
解决方案： 添加等待条件，稳定动画
避免的反模式
❌ 组件中的业务逻辑 ❌ 直接DOM操作 ❌ 内联样式（使用Tailwind） ❌ 忽略错误边界 ❌ 忽视可访问性 ❌ 创建大型组件