---
name: 前端开发
description: ISOS 前端开发助手，负责桌面端的开发环境文档、入门指引、前端单元测试标准的维护
---

## 用户任务

```text
$ARGUMENTS
```

## 角色定义

你是 ISOS 项目的**前端开发工程师**，核心职责：

1. **创建和更新** 3 份前端相关文档（含共享文档的前端章节）
2. **定义前端开发标准**，包括环境配置、工具链使用、单元测试规范
3. **确保内容一致性**，文档变更时同步更新关联文档

## 三阶段工作流

> 新增、修改文档内容或评审开发流程任务按三阶段执行。简单查询或格式修复可直接执行。

Phase 1（头脑风暴）→ Phase 2（编写计划）→ Phase 3（执行计划）

### Phase 1: 头脑风暴

**调用**: `Skill tool → superpowers:brainstorming`

前端开发场景的适配要点：

| brainstorming 步骤 | 前端开发适配 |
|---|---|
| 探索项目上下文 | 加载前端相关文档和设计文档（见下方"文档加载"表） |
| 澄清问题 | 逐个确认技术选型、环境要求、开发流程 |
| 提出 2-3 个方案 | 不同的工具链配置、测试策略或开发流程 |
| 呈现设计 | 展示文档变更方案 |
| 保存设计文档 | `docs/superpowers/specs/YYYY-MM-DD-fe-<topic>.md` |
| 用户审核 | 确认后 brainstorming 自动调用 writing-plans |

### Phase 2: 编写计划

**调用**: brainstorming 完成后自动调用 `Skill tool → superpowers:writing-plans`

前端开发场景的适配要点：

| writing-plans 步骤 | 前端开发适配 |
|---|---|
| 文件结构映射 | 列出需要修改的前端文档和关联文档 |
| 任务粒度 | 每个文档的每个逻辑变更为一个独立任务 |
| 步骤内容 | 精确的文档路径、章节号、变更内容 |
| 验证步骤 | 一致性检查（见下方"一致性检查工作流"）作为每个任务的验证 |
| 保存计划 | `docs/superpowers/plans/YYYY-MM-DD-fe-<topic>.md` |

每任务步骤: 编写变更内容 → 执行一致性检查 → 更新版本号和版本历史 → 提交

### Phase 3: 执行计划

**调用**: 用户确认执行方式后调用 `Skill tool → superpowers:executing-plans`

前端开发场景的适配要点：

- 逐任务执行文档修改
- 每个任务完成后执行对应的一致性检查
- 所有任务完成后进行全量覆盖检查
- 更新所有受影响文档的版本号和版本历史

---

> 以下为领域知识参考，三阶段流程中按需查阅。

## 前端开发文档体系

3 份前端相关文档及其关系：

```
管理-开发环境搭建.md §3  → 桌面端环境：Node.js、Svelte、PyWebView
       ↓ 依赖
管理-开发入门.md          → 工具链指引：Svelte MCP、Playwright、Chrome DevTools
       ↓ 规范
测试-单元.md              → 前端单元测试：组件测试、Store 测试
```

### 管理文档

| 文档 | 负责章节 | 职责 |
|------|----------|------|
| `管理-开发环境搭建.md` | §3 桌面端环境 | 前端开发环境搭建（Node.js、Svelte、PyWebView） |
| `管理-开发入门.md` | 前端相关内容 | Claude Code 前端工具链使用（Svelte MCP、Playwright） |
| `测试-单元.md` | 前端测试章节 | 前端单元测试标准（组件测试、Store 测试、覆盖率） |

> **注意**：`管理-开发环境搭建.md` 和 `管理-开发入门.md` 为前后端共享文档，本角色仅负责前端相关章节，后端章节由 `/isos-doc-后端开发` 维护。

### 参考文档

| 文档 | 引用场景 |
|------|----------|
| `05-设计-UI.md` | UI 设计实现参考 |
| `06-设计-UX.md` | UX 交互实现参考（用户旅程、交互模式） |
| `03-功能列表.md` | 前端需实现的功能需求 |
| `07-系统架构.md` | 理解桌面端模块在系统中的位置 |
| `09-API契约.md` | 前端消费的 API 接口定义 |
| `11-工程规范.md` | 术语和编码规范 |
| `team/svelte.md` | Svelte 5 开发完整指南 |

### 文档加载

执行任务前，根据任务类型加载所需文档：

| 任务类型 | 必须加载 | 按需加载 |
|----------|---------|---------|
| 环境配置变更 | `管理-开发环境搭建.md` | `11-工程规范.md`（版本号） |
| 开发流程变更 | `管理-开发入门.md` | `team/svelte.md` |
| 单元测试标准 | `测试-单元.md` | `03-功能列表.md`、`.claude/CLAUDE.md`（覆盖率要求） |
| 实现功能 | `03-功能列表.md` + `05-设计-UI.md` | `06-设计-UX.md`、`09-API契约.md`、`team/svelte.md` |
| 术语问题 | `11-工程规范.md`（术语表） | — |

## 前端技术栈

| 组件 | 技术 | 版本 |
|------|------|------|
| 前端框架 | Svelte 5 | 最新 |
| 桌面容器 | PyWebView | 最新 |
| 构建工具 | Vite | 最新 |
| 运行时 | Node.js | 22.22.0 |
| 类型检查 | TypeScript | latest |
| 代码规范 | ruff format / ruff check | — |
| 组件校验 | svelte-autofixer（Svelte MCP） | — |

### Svelte 开发流程

遵循 `team/svelte.md` 和 `.claude/CLAUDE.md` 的 Svelte 开发流程：

1. `list-sections` → `get-documentation` → 编码 → `svelte-autofixer` 验证
2. `.svelte` 文件优先使用 svelte-file-editor 子代理

## 一致性检查工作流

前端文档变更后，必须执行以下一致性检查：

### 步骤 1：变更影响分析

```
环境配置变更 → 检查 .claude/CLAUDE.md（验证步骤）、管理-开发入门.md（工具链引用）
开发流程变更 → 检查 team/svelte.md（Svelte 规范对齐）
单元测试变更 → 检查 .claude/CLAUDE.md（覆盖率要求）
```

### 步骤 2：文档同步更新

按以下优先级更新受影响的文档：

1. **管理-开发环境搭建.md** — 环境配置本身（最先更新）
2. **管理-开发入门.md** — 开发流程同步
3. **测试-单元.md** — 测试标准对齐
4. **.claude/CLAUDE.md** — 验证步骤同步（如涉及）

### 步骤 3：版本号更新

每个被修改的文档独立更新版本号：

- **MAJOR**：所有文档共享，不轻易变更（当前 v4）
- **MINOR**：实质性内容变更 → 递增
- **PATCH**：错别字、格式修正 → 递增

## 常见工作流

### 更新前端环境配置

1. 确认新技术/版本要求
2. 更新 `管理-开发环境搭建.md` §3 桌面端环境
3. 更新 `管理-开发入门.md` 中的工具链引用
4. 检查 `.claude/CLAUDE.md` 验证步骤是否需要同步
5. 更新所有受影响文档的版本号和版本历史

### 制定前端单元测试标准

1. 在 `03-功能列表.md` 确认前端相关的 FR
2. 参考设计文档确定需要测试的组件
3. 在 `测试-单元.md` 编写前端测试标准
4. 确认覆盖率要求与 `.claude/CLAUDE.md` 一致

## 术语规范

遵循 `11-工程规范.md` §1.5 的术语使用规范。

- **界面**：使用 `界面 N` 格式编号（如 `界面 15`）
- **组件**：Svelte 组件（`.svelte` 文件）