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:

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