flutter-dev

Flutter 개발 마스터 허브 — 의도(Feature 생성·UI 구현·BLoC·테스트·Figma 분석·픽셀 검증)에 따라 cc-flutter의 커맨드와 스킬로 라우팅합니다

/flutter-dev — Flutter 개발의 "안내 데스크"#

항목	내용
실행 명령	`/cc-flutter:flutter-dev`
난이도	●○○ 간단

한마디로#

Flutter 앱에서 무엇을 만들지 말하면, 알맞은 커맨드·스킬로 연결해주는 안내 데스크입니다. Feature 생성, UI 구현, 상태 관리, 테스트 작성 중 어디로 가야 할지 여기서 정합니다.

누가·언제 쓰나요#

Flutter 기능을 만들려는데 어느 커맨드부터 시작할지 모를 때
Feature 전체 생성 / 레이어 하나 / UI만 / 테스트만 — 작업 범위별 진입점이 헷갈릴 때

의도 → 진입점 결정 테이블#

하려는 일	진입점
백엔드~프론트 Feature 전체 생성	`/cc-flutter:feature:create`
레이어 하나만 (도메인/데이터/프레젠테이션)	`/cc-flutter:feature:domain` `/cc-flutter:feature:data` `/cc-flutter:feature:presentation`
Figma 프레임 분석 → 요구사항/이슈	`/cc-flutter:figma:analyze`
Figma → CoUI UI 구현	`/cc-flutter:ui` (스킬: `figma-to-coui` , `coui-flutter-rules` ; 컴포넌트 선택: cc-coui `coui-index` )
BLoC/Cubit 상태 관리	`/cc-flutter:bloc`
테스트 작성 (unit/widget/BLoC)	`/cc-flutter:test`
BDD 시나리오·Step 생성/리팩토링	`/cc-flutter:bdd:generate` `/cc-flutter:bdd:refactor-steps`
픽셀 퍼펙트 검증	`/cc-pixel-loop:loop` (cc-pixel-loop)

스킬 라우팅 (자동 트리거 지식)#

그룹	스킬	용도
BDD	`bdd-canonical-steps` `bdd-step-reuse` `bdd-test-patterns` `patrol-bdd-conventions`	Gherkin step 표준·재사용·Patrol 컨벤션
UI/CoUI	`coui-flutter-rules` `figma-to-coui` `viewer-side-panels`	CoUI 사용 규칙·Figma 변환·뷰어 패널 패턴
데이터	`client-cache` `data-mapper` `swr-pattern`	클라이언트 캐시·매퍼·SWR 패턴
도구 선택	`mcp-tool-selection` `patrol-mcp-guide` `flutter-skill-mcp-guide`	런타임 MCP 4종 중 선택 가이드
테스트	`golden-test-guide` `flutter-dev-pixel-loop`	골든 테스트·픽셀 루프 연동

경계 (다른 플러그인으로)#

실행 중인 앱 런타임 디버깅 → cc-inspector (/inspector)
E2E 시나리오 저작·박제 → cc-e2e (/cc-e2e:explore)
어떤 런타임 MCP를 쓸지 고민 → mcp-tool-selection 스킬
CoUI 컴포넌트 고르기 → cc-coui coui-index
이슈~머지 사이클 자동화 → cc-dev (/dev-cycle)
전체 도구 지도 → cc-compass (/compass)

⚙️ 상세 명세 (개발자 / AI 에이전트용)

Triggers#

cc-flutter의 커맨드 중 무엇을 쓸지 불명확할 때
Flutter 기능 개발의 진입점 탐색이 필요할 때

Context Trigger Pattern#

/flutter-dev [의도 설명]

인자 없이 부르면 위 결정 테이블을 보여주고, 의도를 설명하면 해당 커맨드로 바로 라우팅합니다.

Command Namespaces#

네임스페이스	커맨드	역할
`feature`	create / domain / data / presentation	Clean Architecture Feature 생성
`bdd`	generate / refactor-steps	BDD 시나리오·Step
`figma`	analyze	Figma 프레임 분석
`flutter`	ui / bloc / test / pixel-loop	UI·상태·테스트·픽셀 루프 핸드오프

Agents#

에이전트 정의는 agents/** 참고 — /cc-flutter:feature:create 오케스트레이터가 subagent_type 이름으로 디스패치하는 내부 워커(app/shared/test 그룹)이며 직접 호출 대상이 아닙니다.

Typical Flow#

/cc-flutter:figma:analyze  < frame >      # 요구사항 추출
→ /cc-flutter:feature:create         # 백엔드~프론트 Feature 생성
→ /cc-flutter:test           # 테스트 작성
→ /cc-pixel-loop:loop        # 픽셀 퍼펙트 검증 (cc-pixel-loop)

References#

의사결정 매트릭스: references/DECISION_MATRIX*
의존성 그래프: references/DEPENDENCY_GRAPH*