Initial: Claude config with agents, skills, commands, rules and scripts
This commit is contained in:
158
commands/multi-frontend.md
Normal file
158
commands/multi-frontend.md
Normal file
@@ -0,0 +1,158 @@
|
||||
# Frontend - Frontend-Focused Development
|
||||
|
||||
Frontend-focused workflow (Research → Ideation → Plan → Execute → Optimize → Review), Gemini-led.
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
/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**
|
||||
|
||||
### 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
|
||||
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
|
||||
Reference in New Issue
Block a user