team/tasks/任务提示词模板-前端组件开发.md

{{任务编号}} 前端任务：{{任务标题}}

概述

{{一段描述：组件级交互目标}}

前置依赖: {{依赖任务列表}}

tmux 执行协议

• Session: arno-team，始终复用 项目 / 后端 / 前端 / 测试 四个 pane，禁止新建 tmux session / window / pane
• 环境重置: 开始前确保目标 pane 中是新启动的 cc 环境（/exit 后重启，清除遗留上下文）
• 分发方式: 由 项目 pane 发送简短提示词，让目标 pane 自行读取任务文件

前置文档（必读）

执行本任务前必须加载以下文档，作为设计和交互规范。

设计文档（所有前端任务通用）

• docs/05-设计-UI.md — 设计系统摘要（组件结构、设计令牌、色彩/排版/间距体系）
• docs/设计-Apple风格.md — Apple 风格设计令牌（色彩、排版、组件规范）
• docs/设计-UX-错误处理.md — 错误状态处理规范（错误提示样式/交互/文案）

编码规范（所有前端任务通用）

• docs/11-工程规范.md §6（前端开发规范：Svelte 5、组件设计原则、IPC 通信模式）
• team/svelte.md — Svelte 5 开发完整指南

按任务选取

任务	UI 设计文档	UX 交互文档	API 契约
M2-002	docs/设计-UI-初始化向导.md	docs/设计-UX-用户旅程.md §2.1, §2.2 + docs/设计-UX-操作流程.md §4.1	docs/09-API契约.md §5
M4-004	docs/设计-UI-主界面.md	docs/设计-UX-交互模式.md + docs/设计-UX-操作流程.md §4.3	docs/09-API契约.md §9.4、§9.5
M4-005	docs/设计-UI-主界面.md	docs/设计-UX-交互模式.md + docs/设计-UX-操作流程.md §4.3	docs/09-API契约.md §9.7
M5-003	docs/设计-UI-状态组件.md	docs/设计-UX-交互模式.md §3.5, §3.8	docs/09-API契约.md §6、§9.17
M7-003	docs/设计-UI-主界面.md	docs/设计-UX-交互模式.md + docs/设计-UX-操作流程.md §4.3	—
M7-005	docs/设计-UI-认证.md	docs/设计-UX-操作流程.md §4.2	docs/09-API契约.md §9.16
M8-004	docs/设计-UI-其他.md	docs/设计-UX-用户旅程.md §2.5 + docs/设计-UX-操作流程.md §4.6	—

功能需求（FR-NNN ~ FR-NNN）

• {{需求条目}}

需要创建的文件

1. src/lib/components/{{path}}/{{Component}}.svelte — {{组件名}}

{{组件结构骨架（script + markup）}}

2. 其他文件

{{附加组件/类型定义/Store}}

设计系统（Apple 风格）

元素	规范
{{设计令牌}}	{{值}}

编码规范

• Svelte 5 runes 语法（$state, $derived, $effect, $props）
• TypeScript 类型注解，禁止 any
• CSS 使用设计令牌，参照 Apple 风格设计系统
• 完整指南参考 team/svelte.md

验收标准

• {{逐条检查}}
• 无控制台错误

验证命令

cd apps/desktop/frontend && npx svelte-check --tsconfig ./tsconfig.json
cd apps/desktop/frontend && npm run build

完成后将产出物清单写入 /workspace/tasks/result/{{任务编号}}.md。