프론트엔드 집중 개발

언제 쓰나

컴포넌트, 레이아웃, 애니메이션, UI 개선 등 프론트엔드 개발에 집중하고 싶을 때

---
description: 컴포넌트, 레이아웃, 애니메이션 및 UI 개선을 위한 프론트엔드 중심의 멀티모델 워크플로우를 실행합니다.
---

# 프론트엔드 - 프론트엔드 중심 개발

프론트엔드 중심 워크플로우 (리서치 → 아이디어 구상 → 계획 → 실행 → 최적화 → 검토), Gemini 주도.

## 사용법

```bash
/frontend <UI 작업 설명>
```

## 컨텍스트

- 프론트엔드 작업: $ARGUMENTS
- Gemini 주도, 보조 참조를 위한 Codex
- 적용 가능 범위: 컴포넌트 디자인, 반응형 레이아웃, UI 애니메이션, 스타일 최적화

## 당신의 역할

당신은 **프론트엔드 오케스트레이터**로서 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'\nROLE_FILE: <role prompt path>\n<TASK>\nRequirement: <향상된 요구사항 (또는 향상되지 않은 경우 $ARGUMENTS)>\nContext: <이전 단계의 프로젝트 컨텍스트 및 분석>\n</TASK>\nOUTPUT: 예상 출력 형식\nEOF",
  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'\nROLE_FILE: <role prompt path>\n<TASK>\nRequirement: <향상된 요구사항 (또는 향상되지 않은 경우 $ARGUMENTS)>\nContext: <이전 단계의 프로젝트 컨텍스트 및 분석>\n</TASK>\nOUTPUT: 예상 출력 형식\nEOF",
  run_in_background: false,
  timeout: 3600000,
  description: "간략한 설명"
})
```

**역할 프롬프트**: 

| 단계 | Gemini |
|-------|--------|
| 분석 | `~/.claude/.ccg/prompts/gemini/analyzer.md` |
| 계획 | `~/.claude/.ccg/prompts/gemini/architect.md` |
| 검토 | `~/.claude/.ccg/prompts/gemini/reviewer.md` |

**세션 재사용**: 각 호출은 `SESSION_ID: xxx`를 반환하며, 후속 단계를 위해 `resume xxx`를 사용합니다. Phase 2에서 `GEMINI_SESSION`을 저장하고, Phase 3 및 5에서 `resume`을 사용하세요.

---

## 커뮤니케이션 가이드라인

1. 응답은 항상 모드 레이블 `[Mode: X]`로 시작하세요. 초기 모드는 `[Mode: Research]`입니다.
2. 엄격한 순서 준수: `Research → Ideation → Plan → Execute → Optimize → Review`
3. 필요한 경우 `AskUserQuestion` 도구를 사용하여 사용자 상호작용 (예: 확인/선택/승인)을 수행하세요.

---

## 핵심 워크플로우

### Phase 0: 프롬프트 향상 (선택 사항)

`[Mode: Prepare]` - ace-tool MCP를 사용할 수 있다면, `mcp__ace-tool__enhance_prompt`를 호출하고, **후속 Gemini 호출을 위해 원본 $ARGUMENTS를 향상된 결과로 교체하세요**. 사용할 수 없다면 `$ARGUMENTS`를 그대로 사용합니다.

### Phase 1: 리서치

`[Mode: Research]` - 요구사항을 이해하고 컨텍스트를 수집합니다.

1. **코드 검색** (ace-tool MCP 사용 가능 시): `mcp__ace-tool__search_context`를 호출하여 기존 컴포넌트, 스타일, 디자인 시스템을 검색합니다. 사용할 수 없다면, 내장 도구를 사용하세요: 파일 검색은 `Glob`, 컴포넌트/스타일 검색은 `Grep`, 컨텍스트 수집은 `Read`, 심층 탐색은 `Task` (Explore agent).
2. 요구사항 완전성 점수 (0-10): 7 이상이면 계속 진행, 7 미만이면 중단하고 보충합니다.

### Phase 2: 아이디어 구상

`[Mode: Ideation]` - Gemini 주도 분석

**Gemini를 반드시 호출하세요** (위 호출 사양 따름):
- ROLE_FILE: `~/.claude/.ccg/prompts/gemini/analyzer.md`
- Requirement: 향상된 요구사항 (또는 향상되지 않은 경우 $ARGUMENTS)
- Context: Phase 1의 프로젝트 컨텍스트
- OUTPUT: UI 실현 가능성 분석, 권장 솔루션 (최소 2개), UX 평가

**SESSION_ID** (`GEMINI_SESSION`)를 저장하여 후속 단계에 재사용하세요.

솔루션 (최소 2개)을 출력하고 사용자 선택을 기다립니다.

### Phase 3: 계획 수립

`[Mode: Plan]` - Gemini 주도 계획 수립

**Gemini를 반드시 호출하세요** (`resume <GEMINI_SESSION>`을 사용하여 세션 재사용):
- ROLE_FILE: `~/.claude/.ccg/prompts/gemini/architect.md`
- Requirement: 사용자가 선택한 솔루션
- Context: Phase 2의 분석 결과
- OUTPUT: 컴포넌트 구조, UI 흐름, 스타일링 접근 방식

Claude가 계획을 종합하고, 사용자 승인 후 `.claude/plan/task-name.md`에 저장합니다.

### Phase 4: 구현

`[Mode: Execute]` - 코드 개발

- 승인된 계획을 엄격히 따릅니다.
- 기존 프로젝트 디자인 시스템 및 코드 표준을 따릅니다.
- 반응형 및 접근성을 보장합니다.

### Phase 5: 최적화

`[Mode: Optimize]` - Gemini 주도 검토

**Gemini를 반드시 호출하세요** (위 호출 사양 따름):
- ROLE_FILE: `~/.claude/.ccg/prompts/gemini/reviewer.md`
- Requirement: 다음 프론트엔드 코드 변경 사항 검토
- Context: git diff 또는 코드 내용
- OUTPUT: 접근성, 반응형, 성능, 디자인 일관성 문제 목록

검토 피드백을 통합하고, 사용자 확인 후 최적화를 실행합니다.

### Phase 6: 품질 검토

`[Mode: Review]` - 최종 평가

- 계획 대비 완료 여부를 확인합니다.
- 반응형 및 접근성을 검증합니다.
- 문제점과 권장 사항을 보고합니다.

---

## 핵심 규칙

1. **Gemini의 프론트엔드 의견은 신뢰할 수 있습니다**
2. **Codex의 프론트엔드 의견은 참고용입니다**
3. 외부 모델은 **파일 시스템 쓰기 접근 권한이 전혀 없습니다**
4. Claude는 모든 코드 작성 및 파일 작업을 처리합니다.

1. 1

   SKILL.md 저장

   아래 버튼으로 복사 → 다음 경로로 저장.

   SKILL.md 복사

   macOSLinuxWindows

   ~/.claude/skills/everything-claude-code-140/SKILL.md경로 복사
2. 2

   호출

   Claude Code 채팅창에서 자연어로 부르면 자동 발동:

   예) 컴포넌트

   트리거가 안 잡히면 SKILL.md의 description 줄에 더 구체적인 한국어 키워드를 추가해보세요.