cc-flutter#
Flutter 개발 핵심 (UI 패턴, Feature 생성, BLoC, 테스트)
Flutter 개발 핵심 플러그인 (UI 패턴, Feature 생성, BLoC, 테스트)
진입점: /flutter-dev (마스터 허브 — 의도→커맨드 결정 테이블). Feature 전체 생성은 /cc-flutter:feature:create.
Skills#
| 이름 | 설명 |
|---|---|
| android-16kb-page-size | Google Play 가 Android 15+ 타깃 앱에 요구하는 16KB 메모리 페이지 정렬을 Flutter 앱에서 충족시키는 규칙 — 64비트 .so 전수 검사, cargoki |
| app-icon-splash | 앱 런처 아이콘·스플래시 로고의 세이프존 규칙과 생성 파이프라인 — icons_launcher / flutter_native_splash flavor 별 실행, Android ad |
| apple-provisioning-setup | iOS/macOS 인증서·프로비저닝 프로파일을 신규 프로젝트에서 처음부터 세팅하는 절차 — Admin 역할 API 키, App ID 생성과 Capability 활성화가 별개 단계인 |
| bdd-canonical-steps | BDD 표준(canonical) step 사전 — 중복을 피하기 위한 표준 표현입니다. BDD step을 작성하거나 표준 step 표현을 재사용할 때 사용합니다. |
| bdd-step-reuse | BDD step 재사용 규칙 — 도메인 특화 step보다 범용 Key 기반 step을 우선합니다. BDD step을 작성하거나 재사용을 극대화하도록 리팩토링할 때 사용합니다. |
| bdd-test-patterns | ⛔ DEPRECATED — BDD 시나리오는 더 이상 위젯 테스트를 생성하지 않습니다. bdd_widget_test 기반 안내를 찾고 있다면 이 스킬은 폐지되었으니 cc-flutt |
| bdd-testing | TestDriver 추상화를 활용한 BDD .feature 기반 Patrol E2E 테스트 작성. BDD 시나리오는 위젯 테스트를 생성하지 않고 Patrol E2E로만 실행합니다. |
| card-surface-tokens | 카드·타일·섹션 컨테이너의 배경을 무엇으로 칠할지의 규약 — 카드 표면은 surface + outlineVariant 테두리이고 surfaceContainer 회색 fill 은 입 |
| client-cache | 클라이언트 캐시 아키텍처 구현 가이드 — SWR/CacheFirst/NetworkFirst 전략, Drift 캐시 DAO, repository 캐싱 mixin. Flutter fe |
| client-cache Reference | --- |
| console-table-contract | 어드민 콘솔 목록 화면의 4축 계약 — 검색(지움도 상태다, ?? 병합 금지) · 필터 팝오버(버튼 앵커·뒤로가기 닫힘·showDialog 이중 중첩 금지) · 필터 적용(1페이지 |
| coui-flutter-rules | CoUI Flutter 빠른 참조 — context.textStyles, Material 3 시맨틱 스타일. CoUI 텍스트 스타일과 Material 3 시맨틱 스타일로 Flutt |
| data-mapper | OpenAPI Response를 Domain Entity로 변환하는 Data Mapper 패턴입니다. OpenAPI 응답을 도메인 엔티티로 매핑할 때 사용합니다. |
| desktop-windows-msix | Flutter 데스크톱 Windows 배포 규약 — EXE 를 기본 경로로 두고 MSIX 를 고급 경로로 남기는 이유, msix_version 4파트 단조 증가를 CI 가 주입하는 |
| feature-flag-scenarios | 기능 플래그로 진입점을 끌 때 그 위젯을 단언하는 BDD 시나리오를 함께 처리하는 절차 — 기능 전체 off 면 태그 skip(사양 보존), 게이팅 조건만 바뀌면 단언 갱신(sho |
| figma-to-coui | 12가지 Use Case로 구성된 Flutter UI 컴포넌트·패턴 구현 가이드 — 페이지 구조, 상태 관리, 폼, 로딩, 오버레이. Figma 디자인을 CoUI Flutter 컴 |
| figma-to-coui Reference | Provides detailed descriptions, example code, and precautions for each Use Case. |
| figma-to-coui Templates | Ready-to-use code templates that can be copied directly (v0.127 bare-widget standard). |
| figma-widgetbook-alignment | Figma 화면과 Widgetbook 화면을 기계가 대조할 수 있게 만드는 계약 — 결합(node ID↔Dart 클래스)·정렬(3자리 번호)·표기(자유 한글)를 분리, Projec |
| figma-widgetbook-alignment Reference | SKILL.md 의 참조 자료입니다. 레지스트리 컬럼 스키마와 검증 항목 전체를 담습니다. |
| flutter-a11y | Flutter 접근성 구현 가이드 — 시맨틱 레이블, 최소 터치 타깃(실효 히트영역 · theme.scaling 곱셈), WCAG 준수 대비(contrast). 접근성 속성을 추가 |
| flutter-dev-pixel-loop |
cc-flutter feature 워크플로우를 cc-pixel-loop 플러그인으로 연결해 주는 핸드오프 스킬입니다.
/cc-flutter:feature:presentation
|
| flutter-patterns | Flutter Clean Architecture 개발 패턴. Flutter에서 feature, 레이어, 의존성 규칙을 구성할 때 사용합니다. |
| flutter-skill-mcp-guide | flutter_skill MCP의 설치, 사용법, 트러블슈팅, 리스크 관리입니다. flutter_skill MCP를 설치, 사용, 트러블슈팅할 때 사용합니다. |
| flutter-web-mcp-verification | Flutter Web 앱을 chrome-devtools / playwright MCP 로 로그인부터 기능 동작까지 자동 시각검증하는 절차 — debug 웹은 ERR_INSUFFIC |
| golden-test-guide | feature 모듈을 위한 Alchemist 골든(비주얼 회귀) 테스트 가이드입니다. feature 모듈에 Alchemist 골든/비주얼 회귀 테스트를 작성할 때 사용합니다. |
| illegal-states-unrepresentable | 반복 버그를 타입으로 차단하는 설계 기법 — 식별자 공간 분리, 인덱스 base 타입화, 파라미터 객체, 파생 상태 금지, 동시성 기본값 명시, 게이트 목적 분리. 새 식별자·인덱 |
| integration-testing | Dart/Flutter 통합 테스트 작성(Patrol E2E + Serverpod). E2E 테스트나 서버 통합 테스트를 작성할 때 사용합니다. |
| mcp-tool-selection | 공존하는 Flutter 앱 측 MCP(patrol, marionette, flutter-inspector, flutter-skill)와 백엔드 측 Serverpod MCP를 위한 |
| package-layers | 모노레포 워크스페이스 패키지의 의존 방향 규약 — 계층 정의, 순환(SCC) 해소 패턴(계약 인터페이스 + 런타임 등록), 래칫 베이스라인 가드, 유령 pubspec 의존 제거, |
| patrol-bdd-conventions | Patrol + BDD 테스트 컨벤션 — 테스트 레이어, 위치, 태그, CI 실행, canonical shared_step 기반 시나리오 작성, 그리고 아무것도 검증하지 않는 테스 |
| patrol-mcp-guide | 로컬 풀스택 백엔드를 대상으로 실제 기기에서 AI 기반 E2E 테스트를 수행하는 patrol_mcp 가이드입니다. patrol_mcp로 Patrol E2E 테스트를 실행·디버깅하거 |
| performance-testing | Flutter 성능 테스트 및 프로파일링. 프레임 시간, 메모리, 시작 성능을 측정할 때 사용합니다. |
| responsive-available-width | 반응형 분기를 화면 폭이 아니라 실제 가용 폭으로 판정하는 규칙 — 본문 위젯은 LayoutBuilder(constraints.maxWidth), 셸만 MediaQuery 화이트리 |
| scale-invariant-layout | 글꼴·간격 배율(theme.scaling × textScaler)이 올라가도 깨지지 않는 Flutter 레이아웃 규칙 — 고정 픽셀 예산 금지, 콘텐츠 주도 높이, 무음 텍스트 클 |
| swr-pattern | SWR(Stale-While-Revalidate) 데이터 페칭 패턴입니다. SWR(stale-while-revalidate) 데이터 페칭을 구현할 때 사용합니다. |
| unit-testing | Dart 단위 테스트 작성. mock과 Either 단언(assertion)을 사용해 UseCase/Repository 단위 테스트를 작성할 때 사용합니다. |
| viewer-side-panels | 도서 뷰어 사이드 패널 컨벤션(Resizable split, 768px breakpoint)입니다. Resizable split 레이아웃으로 도서 뷰어 사이드 패널을 만들 때 사용 |
| wasm-conditional-imports | 조건부 import/export 의 웹 판별 조건 규약 — dart.library.js_interop 이 정본이고 dart.library.js·html 은 dart2wasm 에서 |
| wide-screen-parity | 태블릿·데스크톱 전용 분기가 폰 기준선보다 열등해지지 않도록 막는 규칙 — 폰-vs-와이드 비교 표 첨부 의무, 오버레이·코너 위치는 부모 anatomy 파생식(브레이크포인트 상수 |
| widget-testing | Flutter 위젯 테스트 작성(Golden + BLoC). BDD(Gherkin) 시나리오는 위젯 테스트를 생성하지 않습니다 — 이 스킬은 그와 무관한 일반 위젯 렌더링, Gol |
| widgetbook-conventions | Widgetbook use_case 규약 — use_case 는 feature 패키지가 소유하고 app/{{project_name}}_widgetbook 은 조립만 하는 sink, |
Commands#
| 이름 | 설명 |
|---|---|
| /cc-flutter:bloc — 화면 상태 관리 코드 자동 생성기 |
기능 폴더에 BlocSignal/CubitSignal 상태 관리 파일 3종(
_bloc
·
_event
·
_state
)을 회사 표준(초기·로딩·완료·오류 4상태, 비동기 작업
|
| /cc-flutter:test — 테스트 코드 작성 도우미 |
요청한 종류의 테스트 코드를 만듭니다 — UseCase 단위·BLoC·Widget·BDD(
.feature
→Patrol E2E)·Patrol E2E 중 선택하며, 커버리지 80%
|
| /cc-flutter:ui — 피그마 디자인을 화면 코드로 | Figma 디자인을 Flutter UI 컴포넌트로 변환 (CoUI 디자인 시스템) |
| bdd-generate | BDD Feature 파일과 Step Definition 생성 |
| bdd-refactor-steps |
프로젝트에 흩어진 BDD step 문장의 중복·유사 표현을 찾아 재사용성 보고서를 내고,
--fix
로
.feature
를 표준 표현으로 바꾸고 중복 step 파일을 정리한
|
| feature-create | Serverpod 백엔드부터 Flutter 프론트엔드까지 전체 Feature 생성 오케스트레이션 |
| feature-data | 기능의 Clean Architecture 데이터 레이어를 만듭니다 — Repository, 서버 통신용 Serverpod Mixin, 캐시/DAO/테이블 파일을 생성하고 이어서 돌 |
| feature-domain | 기능의 Clean Architecture 도메인 레이어를 만듭니다 — Entity, Repository 인터페이스, CRUD UseCase 와 각 UseCase 테스트, 실패·예외 |
| feature-presentation | Clean Architecture 프레젠테이션 레이어 생성 (BLoC, Page, Widget, 테스트, Widgetbook) |
| figma-analyze | Figma 프레임 분석과 요구사항 정의, BDD 시나리오 생성, ZenHub 이슈 생성, Feature 생성 |
| flutter-dev | Flutter 개발 마스터 허브 — 의도(Feature 생성·UI 구현·BLoC·테스트·Figma 분석·픽셀 검증)에 따라 cc-flutter의 커맨드와 스킬로 라우팅합니다 |
Agents#
| 이름 | 설명 |
|---|---|
| bdd-scenario-agent | BDD 시나리오 생성 전문가입니다. Gherkin 문법과 Step Definition 작성에 사용합니다. |
| bdd-step-reuse-agent | BDD step reuse and normalization specialist. Used for step deduplication, expression standardization |
| bloc | BlocSignal/CubitSignal state management specialist. Used for Freezed, Event/State definition, and Us |
| bloc-test-agent | BlocSignal 상태 전이 테스트 전문가입니다. bloc_signals_test 패키지와 상태 검증에 사용합니다. |
| config-agent | 환경 설정 관리 전문가입니다. Envied 어노테이션과 flavor 전환 패턴 구현에 사용합니다. |
| console-feature | Console Feature module pattern specialist. Used for KPI cards, table sorting, filtering, and other c |
| console-presentation-agent | 관리자 콘솔 프레젠테이션 레이어 생성 전문가입니다. 테이블, 검색, 필터 UI 구현에 사용합니다. |
| data-layer-agent | Clean Architecture 데이터 레이어 전문가입니다. Repository 구현, 캐싱, Drift DAO 작업에 사용합니다. |
| dcm-fixer | DCM lint issue fix specialist. Safely fixes one rule at a time while maintaining zero Flutter analyz |
| di-agent | BlocSignal Provider 구성과 의존성 배선 전문가입니다. 전역/페이지 컨테이너 생성과 bootstrap 설정에 사용합니다. |
| domain-layer-agent | Clean Architecture 도메인 레이어 전문가입니다. Entity, UseCase, Repository 인터페이스 작업에 사용합니다. |
| feature | Clean Architecture Feature module generation specialist |
| feature-orchestrator-agent | 풀스택 Feature 오케스트레이션 전문가입니다. 백엔드부터 프론트엔드까지 전체 Feature 생성에 사용합니다. |
| figma-analyzer-agent | Figma 디자인 분석 전문가입니다. 요구사항 추출과 UI 구조 분석에 사용합니다. |
| flutter-image-optimizer | Image memory optimization specialist. Used for applying cacheWidth/cacheHeight and reducing memory u |
| flutter-ui | Figma to Flutter UI conversion specialist. Used for CoUI design system and component implementation |
| i18n-agent | Slang 기반 국제화 전문가입니다. 번역 키 추가와 다국어 지원 작업에 사용합니다. |
| presentation-layer-agent | Clean Architecture 프레젠테이션 레이어 전문가입니다. BLoC, Page, Widget, Route 작업에 사용합니다. |
| resources-agent | UI 컴포넌트, 테마, 확장 메서드 생성 전문가입니다. CoUI 커스터마이징과 공통 위젯 구현에 사용합니다. |
| route-agent | GoRouter TypedRoute 설정 생성 전문가입니다. 라우트 정의와 내비게이션 패턴 구현에 사용합니다. |
| test | Flutter test specialist. Used for unit/BLoC/widget/golden/BDD/Patrol test writing |
| unit-test-agent | UseCase와 Repository 단위 테스트 전문가입니다. Mockito 패턴과 Either 결과 검증에 사용합니다. |
| widget-test-agent | Widget 렌더링 테스트 전문가입니다. WidgetTester, pump 패턴, find matcher 작업 시 호출됩니다. |
| widgetbook-agent | Widgetbook 컴포넌트 쇼케이스 전문가입니다. UseCase 작성과 컴포넌트 카탈로그 구성에 사용합니다. |
Rules#
| 이름 | 설명 |
|---|---|
| BDD Test Patterns | This project uses BDD (Behavior-Driven Development) style tests with TestDriver abstraction. |
| BlocSignal-UseCase DI Pattern: Optional Constructor Injection |
Standard DI pattern for improving testability when using UseCase in a
BlocSignal
/
CubitSignal
.
|
| Client Cache Conventions | Client cache architecture rules for this project. |
| CoUI Flutter Quick Reference (v0.127 bare-widget standard) | All signatures below are verified against the kobic-vendored CoUI: |
| Data Mapper Pattern | Rules for writing Mapper classes that convert OpenAPI Response to Domain Entity. |
| HTTP Logging Rules | TalkerDioLogger configuration and security guide for HTTP request/response logging. |
| Incremental Build Rules | An incremental build system guide that saves time by only building changed packages in local develop |
| SWR (Stale-While-Revalidate) Pattern | SWR strategy implementation guide for fast UI responsiveness when fetching data in projects. |
| Unit Test Patterns | Standard patterns for writing BLoC and UseCase unit tests. |
References#
| 이름 | 설명 |
|---|---|
| Agent Dependency Graph | Visualizes workflows and dependencies between agents, skills, and commands. |
| Agent Improvement Requirements | --- |
| BlocSignal Patterns |
State management for Flutter uses
bloc_signals
— BLoC's structural discipline (Event/State/han
|
| Caching Strategy Patterns | Optimizes user experience and network efficiency through data caching strategies. |
| Claude Code Context Management Guide | A guide for maximizing context window efficiency. |
| Dependency Wiring Checklist | Removed: |
| Module Refactoring Patterns | A guide for module renaming and refactoring. |
| Pattern Selection Guide | A decision guide for selecting optimal patterns based on the situation. |
| Repository Patterns | Repository abstracts data sources and handles data access from the Domain Layer. |
| UseCase Patterns | UseCase is a core component of Clean Architecture that encapsulates business logic. |
관련 플러그인#
| 플러그인 | 설명 |
|---|---|
| cc-bricks | cob(co-bricks) 기반 브릭 생성 가이드. kobic Clean Architecture feature 모듈 11종 + 그린필드 프로젝트 초기 세팅(project-init |
| cc-compass | 코코드 스킬 저장소 나침반 — 작업 유형(워크플로우/도구/규칙/레퍼런스)에 따라 알맞은 플러그인·커맨드·스킬로 안내 |
| cc-coui | CoUI 컴포넌트 라이브러리 (크로스플랫폼 컴포넌트 128종) + 조합/확장 가이드 |
| cc-dcm | DCM(Dart Code Metrics) 코드 품질 분석 및 자동 수정 툴킷 |
| cc-designer | 디자인 실무 레퍼런스 + 의사결정 스킬 (UI 디자인, 인터랙션 디자인, 디자인 시스템, 디자인 옵스, 비주얼 크리틱). owl-listener/designer-skills에서 v |
| cc-dev | 개발 사이클 자동화 (이슈 사이클, 버그 사이클, 세션, ZenHub, Agent Teams) |
| cc-e2e | flutter-skill 탐색 → Gherkin 초안 → Patrol 박제로 이어지는 E2E 시나리오 저작 파이프라인 |
| cc-inspector | Flutter Inspector 디버깅 (Master + 9 전문 Inspectors) |
| cc-jaspr-web | Jaspr Web 자동화 + Flutter Web 임베드 검증. CoUI Web 페이지를 점검하고, Web↔Flutter 듀얼 라이브 프리뷰를 구동하며, VM Service를 통해 |
| cc-pixel-loop | Figma + Marionette + Dart MCP를 활용한 픽셀 퍼펙트 Flutter UI 에이전틱 루프 (Read → Write → Reload → Capture → Comp |
| cc-product | 통합 제품개발 파이프라인 (Discovery → Specification → Planning → Design → Scaffold → Epic → Development → Launc |
| cc-quality | 코드 품질 (코드 리뷰, 체크리스트, 버그 리포트, QA Health Score) |
| cc-security | 보안 통합 — API/앱 보안, 보안 감사, CI 시크릿, 결제/IAP 엔드포인트 보안, 도서 PDF DRM (구 cc-uiux-security 확장) |
| cc-serverpod | Serverpod 백엔드 — 모델/엔드포인트 생성, 마이그레이션 + 심화 패턴(아키텍처, 인증, 캐싱, DB, IAP, 테스트; 구 cc-backend 통합) |
| cc-spec | 스펙 명확성 검증 (소크라테스식 인터뷰, Seed spec, 모호성 스코어링, contrarian/simplifier 에이전트, 3단계 평가) |
설치#
claude plugins install coco-de/skills/plugins/cc-flutter