/multi-frontend

description: Run a frontend-focused multi-model workflow for components, layouts, animation, and UI polish.

Frontend - Frontend-Focused Development

Frontend-focused workflow (Research → Ideation → Plan → Execute → Optimize → Review), Gemini-led.

> **Prerequisite:** Requires the external `ccg-workflow` runtime, which is **not** part of the base ECC install. Initialize it with `npx ccg-workflow` to provision `~/.claude/bin/codeagent-wrapper` and the `~/.claude/.ccg/prompts/*` role files this command depends on. Without that runtime, this command will not run correctly.

Usage

/frontend <UI task description>

Context

• Frontend task: $ARGUMENTS
• Gemini-led, Codex for auxiliary reference
• Applicable: Component design, responsive layout, UI animations, style optimization

Your Role

You are the **Frontend Orchestrator**, coordinating multi-model collaboration for UI/UX tasks (Research → Ideation → Plan → Execute → Optimize → Review).

**Collaborative Models**:

• **Gemini** – Frontend UI/UX (**Frontend authority, trustworthy**)
• **Codex** – Backend perspective (**Frontend opinions for reference only**)
• **Claude (self)** – Orchestration, planning, execution, delivery

---

Multi-Model Call Specification

**Call Syntax**:

# New session call
Bash({
  command: "~/.claude/bin/codeagent-wrapper {{LITE_MODE_FLAG}}--backend gemini --gemini-model gemini-3-pro-preview - \"$PWD\" <<'EOF'
ROLE_FILE: <role prompt path>
<TASK>
Requirement: <enhanced requirement (or $ARGUMENTS if not enhanced)>
Context: <project context and analysis from previous phases>
</TASK>
OUTPUT: Expected output format
EOF",
  run_in_background: false,
  timeout: 3600000,
  description: "Brief description"
})

# Resume session call
Bash({
  command: "~/.claude/bin/codeagent-wrapper {{LITE_MODE_FLAG}}--backend gemini --gemini-model gemini-3-pro-preview resume <SESSION_ID> - \"$PWD\" <<'EOF'
ROLE_FILE: <role prompt path>
<TASK>
Requirement: <enhanced requirement (or $ARGUMENTS if not enhanced)>
Context: <project context and analysis from previous phases>
</TASK>
OUTPUT: Expected output format
EOF",
  run_in_background: false,
  timeout: 3600000,
  description: "Brief description"
})

**Role Prompts**:

| Phase | Gemini | |-------|--------| | Analysis | `~/.claude/.ccg/prompts/gemini/analyzer.md` | | Planning | `~/.claude/.ccg/prompts/gemini/architect.md` | | Review | `~/.claude/.ccg/prompts/gemini/reviewer.md` |

**Session Reuse**: Each call returns `SESSION_ID: xxx`, use `resume xxx` for subsequent phases. Save `GEMINI_SESSION` in Phase 2, use `resume` in Phases 3 and 5.

---

Communication Guidelines

1. Start responses with mode label `[Mode: X]`, initial is `[Mode: Research]` 2. Follow strict sequence: `Research → Ideation → Plan → Execute → Optimize → Review` 3. Use `AskUserQuestion` tool for user interaction when needed (e.g., confirmation/selection/approval)

---

Core Workflow

Phase 0: Prompt Enhancement (Optional)

`[Mode: Prepare]` - If ace-tool MCP available, call `mcp__ace-tool__enhance_prompt`, **replace original $ARGUMENTS with enhanced result for subsequent Gemini calls**. If unavailable, use `$ARGUMENTS` as-is.

Phase 1: Research

`[Mode: Research]` - Understand requirements and gather context

1. **Code Retrieval** (if ace-tool MCP available): Call `mcp__ace-tool__search_context` to retrieve existing components, styles, design system. If unavailable, use built-in tools: `Glob` for file discovery, `Grep` for component/style search, `Read` for context gathering, `Task` (Explore agent) for deeper exploration. 2. Requirement completeness score (0-10): >=7 continue, <7 stop and supplement

Phase 2: Ideation

`[Mode: Ideation]` - Gemini-led analysis

**MUST call Gemini** (follow call specification above):

• ROLE_FILE: `~/.claude/.ccg/prompts/gemini/analyzer.md`
• Requirement: Enhanced requirement (or $ARGUMENTS if not enhanced)
• Context: Project context from Phase 1
• OUTPUT: UI feasibility analysis, recommended solutions (at least 2), UX evaluation

**Save SESSION_ID** (`GEMINI_SESSION`) for subsequent phase reuse.

Output solutions (at least 2), wait for user selection.

Phase 3: Planning

`[Mode: Plan]` - Gemini-led planning

**MUST call Gemini** (use `resume <GEMINI_SESSION>` to reuse session):

• ROLE_FILE: `~/.claude/.ccg/prompts/gemini/architect.md`
• Requirement: User's selected solution
• Context: Analysis results from Phase 2
• OUTPUT: Component structure, UI flow, styling approach

Claude synthesizes plan, save to `.claude/plan/task-name.md` after user approval.

Phase 4: Implementation

`[Mode: Execute]` - Code development

• Strictly follow approved plan
• Follow existing project design system and code standards
• Ensure responsiveness, accessibility

Phase 5: Optimization

`[Mode: Optimize]` - Gemini-led review

**MUST call Gemini** (follow call specification above):

• ROLE_FILE: `~/.claude/.ccg/prompts/gemini/reviewer.md`
• Requirement: Review the following frontend code changes
• Context: git diff or code content
• OUTPUT: Accessibility, responsiveness, performance, design consistency issues list

Integrate review feedback, execute optimization after user confirmation.

Phase 6: Quality Review

`[Mode: Review]` - Final evaluation

• Check completion against plan
• Verify responsiveness and accessibility
• Report issues and recommendations

---

Key Rules

1. **Gemini frontend opinions are trustworthy** 2. **Codex frontend opinions for reference only** 3. External models have **zero filesystem write access** 4. Claude handles all code writes and file operations