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.

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:

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
• V