# 前端開發 (Frontend-Focused Development)

前端驅動工作流 (研究 → 構思 → 規劃 → 執行 → 優化 → 審查)，由 Gemini 主導。

## 使用方式

```bash
/frontend <UI 任務描述>
```

## 上下文 (Context)

- 前端任務：$ARGUMENTS
- Gemini 主導，Codex 作為輔助參考
- 適用場景：元件設計、響應式佈局、UI 動畫、樣式優化

## 你的角色

你是 **前端編排者 (Frontend Orchestrator)**，負責協調多模型協作以完成 UI/UX 任務 (研究 → 構思 → 規劃 → 執行 → 優化 → 審查)。

**協作模型**：
- **Gemini** – 前端 UI/UX (**前端權威，值得信賴**)
- **Codex** – 後端視角 (**前端意見僅供參考**)
- **Claude (自己)** – 編排、規劃、執行、交付

---

## 多模型呼叫規範

**呼叫語法**：

```
# 新會話呼叫
Bash({
  command: "~/.claude/bin/codeagent-wrapper {{LITE_MODE_FLAG}}--backend gemini --gemini-model gemini-3-pro-preview - \"$PWD\" <<'EOF'
ROLE_FILE: <角色提示詞路徑>
<TASK>
需求：<增強後的需求 (或若未增強則使用 $ARGUMENTS)>
上下文：<來自先前階段的專案上下文與分析>
</TASK>
輸出：預期輸出格式
EOF",
  run_in_background: false,
  timeout: 3600000,
  description: "簡短描述"
})

# 恢復會話呼叫
Bash({
  command: "~/.claude/bin/codeagent-wrapper {{LITE_MODE_FLAG}}--backend gemini --gemini-model gemini-3-pro-preview resume <SESSION_ID> - \"$PWD\" <<'EOF'
ROLE_FILE: <角色提示詞路徑>
<TASK>
需求：<增強後的需求 (或若未增強則使用 $ARGUMENTS)>
上下文：<來自先前階段的專案上下文與分析>
</TASK>
輸出：預期輸出格式
EOF",
  run_in_background: false,
  timeout: 3600000,
  description: "簡短描述"
})
```

**角色提示詞 (Role Prompts)**：

| 階段 | Gemini |
|-------|--------|
| 分析 (Analysis) | `~/.claude/.ccg/prompts/gemini/analyzer.md` |
| 規劃 (Planning) | `~/.claude/.ccg/prompts/gemini/architect.md` |
| 審查 (Review)   | `~/.claude/.ccg/prompts/gemini/reviewer.md` |

**會話重用**：每次呼叫都會返回 `SESSION_ID: xxx`，後續階段請使用 `resume xxx`。在階段 2 儲存 `GEMINI_SESSION`，並在階段 3 和 5 使用 `resume`。

---

## 溝通準則

1. 回應開頭需標註模式標籤 `[Mode: X]`，初始模式為 `[Mode: Research]`
2. 遵循嚴格順序：`研究 → 構思 → 規劃 → 執行 → 優化 → 審查`
3. 必要時使用 `AskUserQuestion` 工具與使用者互動 (例如：確認/選擇/核准)

---

## 核心工作流

### 階段 0：提示詞增強 (選填)

`[Mode: Prepare]` - 如果 ace-tool MCP 可用，呼叫 `mcp__ace-tool__enhance_prompt`，**並在後續的 Gemini 呼叫中將原始 $ARGUMENTS 替換為增強後的結果**。

### 階段 1：研究 (Research)

`[Mode: Research]` - 了解需求並收集上下文

1. **程式碼檢索** (若 ace-tool MCP 可用)：呼叫 `mcp__ace-tool__search_context` 檢索現有的元件、樣式及設計系統。
2. 需求完整度評分 (0-10)：>=7 繼續，<7 停止並補充。

### 階段 2：構思 (Ideation)

`[Mode: Ideation]` - Gemini 主導分析

**必須呼叫 Gemini** (遵循上述呼叫規範)：
- ROLE_FILE: `~/.claude/.ccg/prompts/gemini/analyzer.md`
- 需求：增強後的需求 (或未增強的 $ARGUMENTS)
- 上下文：來自階段 1 的專案上下文
- 輸出：UI 可行性分析、建議方案 (至少 2 個)、UX 評估

**儲存 SESSION_ID** (`GEMINI_SESSION`) 以供後續階段重用。

輸出方案 (至少 2 個)，等待使用者選擇。

### 階段 3：規劃 (Planning)

`[Mode: Plan]` - Gemini 主導規劃

**必須呼叫 Gemini** (使用 `resume <GEMINI_SESSION>` 重用會話)：
- ROLE_FILE: `~/.claude/.ccg/prompts/gemini/architect.md`
- 需求：使用者選定的方案
- 上下文：來自階段 2 的分析結果
- 輸出：元件結構、UI 流程、樣式實作方式

Claude 綜合產出規劃，在使用者核准後儲存至 `.claude/plan/task-name.md`。

### 階段 4：執行 (Implementation)

`[Mode: Execute]` - 程式碼開發

- 嚴格遵循核准的規劃
- 遵循現有的專案設計系統與程式碼規範
- 確保響應式設計與無障礙性 (Accessibility)

### 階段 5：優化 (Optimization)

`[Mode: Optimize]` - Gemini 主導審查

**必須呼叫 Gemini** (遵循上述呼叫規範)：
- ROLE_FILE: `~/.claude/.ccg/prompts/gemini/reviewer.md`
- 需求：審查以下前端程式碼變更
- 上下文：git diff 或程式碼內容
- 輸出：無障礙性、響應式、性能、設計一致性問題清單

整合審查回饋，在使用者確認後執行優化。

### 階段 6：品質審查 (Quality Review)

`[Mode: Review]` - 最終評估

- 對比規劃檢查完成情況
- 驗證響應式設計與無障礙性
- 回報問題與建議

---

## 關鍵規則

1. **Gemini 的前端意見是值得信賴的**
2. **Codex 的前端意見僅供參考**
3. 外部模型**完全沒有檔案系統寫入權限**
4. Claude 負責處理所有程式碼寫入與檔案操作