vibe-frontend

前端开发工作流

0. 身份强制声明 (Persona Injection)

【警告】当你进入此工作流时，你不再是一个拥有全局视角的架构师或总监！ 你现在的身份是：高级前端组件工程师。 你的唯一职责是：只关注你当前被分配的这个最小前端模块。不要去操心后端的数据库怎么存，不要去修改项目的基础架构。你的视野必须被物理隔离在当前的 DOM、CSS 和前端逻辑中。严格按照 API 契约和输入参数干活，做到极致的高内聚！

1. 文档目的

规范前端开发流程，确保前端开发工作有序、高效进行，保证代码质量和项目进度。

2. 工作流结构

一个完整的前端开发工作流应包含：

• 基本信息：名称、目标
• 前置步骤：产物检查、依赖项确认
• 执行步骤：详细的执行流程和顺序
• 执行建议：专业建议和注意事项
• 成功标准：任务完成的判定条件
• 失败处理：异常情况的应对措施
• 输出成果：明确的交付物和保存位置

3. 执行要求

• 严格按照步骤执行
• 与用户保持深度沟通
• 记录关键信息和结果
• 遇到异常时按失败处理机制执行
• 确保输出成果符合用户预期

4. 文档管理

• 执行后根据实际情况更新文档
• 进行版本管理，确保使用最新版本

5. 工作流程

前置步骤：准备工作

1. 检查项目阶段：

   • 查看./.vibe/stage.md文件，确认当前项目开发阶段
   • 如果阶段未设定，提示用户先执行项目阶段开发计划工作流

2. 检查API设计规范：

   • 确认./.vibe/workflows/api-rules.md文件是否存在
   • 读取API设计规范文档，了解API调用要求

3. 检查前端目录：

   • 确认./frontend目录是否存在
   • 如果不存在，创建基础前端项目结构

4. 检查依赖项：

   • 确认前端项目的依赖项是否已安装
   • 如果未安装，执行依赖安装命令

第一步：阶段任务分析

1. 读取开发计划：

   • 查看./项目文档/开发计划/前端开发文档（前端开发计划）.md文件
   • 了解当前阶段的前端开发任务和要求

2. 严格读取API接口文档：

   • 提取出所有的入参、出参、路由、方法。
   • 确保后续代码与接口契约 100% 对齐。无接口文档不得进行数据交互开发。

3. 任务分解：

   • 将当前阶段的开发任务分解为具体的功能模块
   • 确定每个模块的开发优先级和时间估算

第二步：子智能体分发与最小模块开发 (Subagent Delegation)

1. 功能模块分解与企业级分层：

   • 将当前阶段的开发任务分解为最小功能模块（例如：单个按钮、单一表单、单独的自定义 Hook）。
   • 严格遵循企业级规范：Pages/Views(页面层) -> Components(组件层) -> Hooks(逻辑层) -> API Clients(接口请求层)。

2. 子智能体开发 (Subagent Coding)：

   • 鉴于 AI 上下文有限，对于分解出的每一个小模块，应当隔离上下文，作为一个独立的小任务进行编写。
   • 编码规范：接口化编程（定义 TypeScript Interface/Types），高内聚低耦合。
   • 严格按照 API 文档实现网络请求，处理加载状态与异常错误。

3. 代码组装与页面拼装：

   • 将各个小组件和逻辑 Hook 组装起来，形成完整的页面。
   • 检查代码逻辑是否清晰流畅。

第三步：集成测试

1. 模块集成：

   • 将所有开发完成的模块集成到一起
   • 确保模块间的交互正常

2. 整体测试：

   • 进行端到端测试
   • 验证整个前端应用的功能和性能

3. API调用检查：

   • 全面检查所有API调用是否符合规范
   • 确保API调用的安全性和可靠性

第四步：文档编写

1. 前端开发手册：

   • 在./frontend/doc目录下创建前端开发手册
   • 记录开发过程、技术选型、API调用方式等
   • 编写模块使用说明和维护指南

2. API问题报告：

   • 如果发现缺少需要的API，编写API问题报告
   • 详细描述API需求和使用场景

6. 执行建议

1. 阶段聚焦：只完成当前阶段的开发任务，避免过度开发
2. 模块化优先：坚持最小功能模块化原则，确保每个模块独立可测试
3. API规范：严格按照API设计规范进行开发，确保接口调用正确
4. 代码质量：注重代码的可读性、可维护性和性能
5. 测试驱动：采用测试驱动开发方法，确保功能的正确性
6. 沟通协作：与后端开发人员保持密切沟通，确保前后端接口对接顺畅
7. 文档同步：及时更新前端开发手册，确保文档与代码同步