문서 목차
이 페이지에서목차

cc-flutter

Flutter 개발 핵심 (UI 패턴, Feature 생성, BLoC, 테스트)

Flutter 개발 핵심 (UI 패턴, Feature 생성, BLoC, 테스트)

Flutter 개발 핵심 플러그인 (UI 패턴, Feature 생성, BLoC, 테스트)

진입점: /flutter-dev (마스터 허브 — 의도→커맨드 결정 테이블). Feature 전체 생성은 /cc-flutter:feature:create.

Skills#

이름설명
6개 플랫폼 앱 아이콘 재생성 Figma 원본 → PNG export → icons_launcher → 프로젝트별 경로 연결 → 산출물 검사 순서다.
Feature 소유 구조 — 소스 · 테스트 · 카탈로그 .cob/feature-layout.json 과 배치 계약 이
Patrol iOS 네이티브 검증 계약 스마트폰에서 원하는 테스트가 실제로 실행됐는지, 다음 입력이 준비되면 즉시 진행하는지,
android-16kb-page-size Android 앱의 16KB 메모리 페이지 호환성을 확인하거나 스토어 업로드 거부를 해결할 때 사용합니다. 네이티브 라이브러리의 정렬, 빌드 도구와 CI 검사 조건을 점검합니다.
app-icon-splash 앱 아이콘과 시작 화면 로고를 만들거나 잘림·배경 문제를 고칠 때 사용합니다. 플랫폼별 여백·투명도 기준과 이미지 생성 설정을 확인합니다.
apple-provisioning-setup iOS·macOS 앱의 서명 환경을 처음 준비하거나 권한 오류를 해결할 때 사용합니다. 인증서, 프로비저닝 프로파일, App ID·앱 기능과 CI 비밀값을 설정하는 절차를 안내합니
bdd-canonical-steps BDD 시나리오에 사용할 표준 단계 표현을 찾을 때 사용합니다. 이미 등록된 Given·When·Then 문구를 재사용해 같은 동작의 중복 구현을 줄입니다.
bdd-step-reuse BDD 테스트 단계를 새로 작성하거나 중복을 정리할 때 사용합니다. 위젯 키를 사용하는 범용 단계를 우선해 여러 기능에서 재사용할 수 있게 합니다.
bdd-test-patterns ⛔ DEPRECATED — BDD 시나리오는 더 이상 위젯 테스트를 생성하지 않습니다. bdd_widget_test 기반 안내를 찾고 있다면 이 스킬은 폐지되었으니 cc-flutt
bdd-testing 수기 Patrol BDD 규칙을 사용하는 기존 저장소에서 E2E 테스트를 작성할 때 사용합니다. Gherkin 시나리오를 TestDriver와 연결합니다. 새 앱의 co_bdd 생
card-surface-tokens Flutter 카드·타일·섹션의 배경과 테두리를 정할 때 사용합니다. CoUI 기본 스타일과 색상 토큰을 기준으로 화면의 면을 구분하고 중복 배경 처리나 콘텐츠 침범을 피하도록 안
client-cache Flutter 기능에 로컬 캐시를 추가하거나 캐시 전략을 선택할 때 사용합니다. 캐시 우선·네트워크 우선·SWR 방식을 비교하고 Drift DAO와 Repository에 저장·갱신
client-cache Reference ---
console-table-contract 관리자 목록 화면의 검색·필터·정렬·페이지 이동을 구현하거나 오류를 고칠 때 사용합니다. 검색 초기화, 필터 적용 후 페이지 재설정과 서버 전체 데이터 기준의 정렬 규칙을 확인합니
coui-flutter-rules CoUI 위젯으로 Flutter 화면을 만들거나 수정할 때 사용합니다. 텍스트 스타일, 입력창·버튼 크기, 로딩·빈 상태와 색상 토큰의 기본 사용법을 빠르게 확인합니다.
data-mapper OpenAPI 응답을 앱의 도메인 객체로 변환할 때 사용합니다. API 모델과 도메인 모델을 분리하고 Data Mapper에서 필드와 타입을 변환합니다.
demo-brand-theme 새 Flutter 앱이나 데모에 고유한 브랜드 테마를 적용할 때 사용합니다. 색·글꼴·형태·간격 등을 CoUI 토큰에 연결하고 밝은·어두운 화면과 접근성 대비를 확인합니다.
desktop-windows-msix Flutter Windows 앱을 패키징·서명·배포하거나 설치 오류를 조사할 때 사용합니다. EXE와 MSIX 경로를 구분하고 버전, 인증서·게시자 정보와 스토어 제출 조건을 확인
desktop-windows-vm-debug macOS의 Parallels Windows 가상 머신에서 Flutter 앱을 재현·디버깅할 때 사용합니다. 화면 제어로 Windows 빌드를 실행하고 파일 선택창·플랫폼 통신 등
feature-flag-scenarios 기능 플래그로 버튼·메뉴를 숨기거나 다시 켤 때 사용합니다. 영향을 받는 BDD 시나리오의 실행·검증 조건을 함께 조정하고 재활성화 조건을 기록합니다.
feature-verification Flutter 기능의 구현 완료 여부를 검증하거나 PR을 준비할 때 사용합니다. 단위·위젯·화면 비교·Widgetbook·BDD 검증의 소유 위치와 실행 결과를 확인하고 미검증 항
figma-to-coui 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 (bare-widget standard).
figma-widgetbook-alignment Figma 화면과 Widgetbook 구현의 대응 관계를 관리할 때 사용합니다. 화면 ID, 상태 이름과 designLink를 연결해 설계나 코드에만 있는 화면과 누락된 상태를 찾
figma-widgetbook-alignment Reference SKILL.md 의 참조 자료입니다. 레지스트리 컬럼 스키마와 검증 항목 전체를 담습니다.
flutter-a11y Flutter 화면의 접근성을 개선하거나 작은 요소가 눌리지 않는 문제를 고칠 때 사용합니다. 스크린 리더용 의미 정보, 실제 터치 영역과 색상 대비를 확인합니다.
flutter-app-baseline 새 Flutter 앱·기능·화면의 기본 개발 규칙을 정할 때 사용합니다. HookWidget·signals_hooks, 타입 안전 라우팅, 파일 구조와 co_golden·co_bd
flutter-dev-pixel-loop Flutter 화면 구현 후 Figma 대조나 화면 수정 반복으로 이어갈 때 사용합니다. 화면 레지스트리와 Widgetbook의 designLink에서 시안을 찾아 pixel-lo
flutter-patterns Flutter 기능의 코드 구조와 의존성을 설계할 때 사용합니다. Clean Architecture에 따라 화면·도메인·데이터 계층의 역할과 연결 방식을 정리합니다.
flutter-skill-mcp-guide flutter_skill MCP로 Flutter 앱 자동화를 준비하거나 문제를 해결할 때 사용합니다. 설치, 연결, 주요 조작과 실행 중 오류의 확인 방법을 안내합니다.
flutter-web-mcp-verification Flutter Web 앱의 로그인과 기능 동작을 브라우저로 검증할 때 사용합니다. ego-browser를 기본으로 화면 요소·입력·네트워크·다운로드를 확인하고 실행 환경에 맞는 대
golden-test-guide Flutter 화면의 골든 테스트를 추가하거나 Figma와 비교할 때 사용합니다. co_golden으로 기기·테마·언어·글자 배율별 화면을 검증하고 결과 갤러리를 배포합니다. 기존
illegal-states-unrepresentable 잘못된 값이나 상태 조합 때문에 버그가 반복될 때 사용합니다. 식별자·인덱스·필터 등을 별도 타입으로 표현해 유효하지 않은 조합을 코드 작성 단계에서 줄입니다.
integration-testing 앱의 전체 사용자 흐름이나 서버 기능을 통합 검증할 때 사용합니다. Patrol E2E와 Serverpod 통합 테스트에서 실제 구성 요소가 함께 동작하는지 확인합니다.
linux-desktop-ci Flutter Linux 앱의 빌드·실행 검증을 CI에 구성하거나 실패를 고칠 때 사용합니다. CMake·시스템 라이브러리 의존성과 코드 생성을 확인하고 앱이 실제로 시작됐는지 로
mcp-tool-selection Flutter·Serverpod 작업에 맞는 MCP 도구를 선택할 때 사용합니다. Patrol, Marionette, flutter-inspector와 flutter-skill의
package-layers 새 패키지나 의존성을 추가하고 풀스택 기능 번들의 경계를 설계할 때 사용합니다. 역할별 패키지 계층과 허용 의존 방향, 번역·Widgetbook·테스트의 소유 위치를 정합니다.
patrol-bdd-conventions 수기 Patrol 기반 BDD 시나리오를 작성하거나 정리할 때 사용합니다. 테스트 위치·태그·공통 단계와 실행 환경을 맞추고, 공유 준비 과정을 묶어 실행하며 실제 검증 누락을 점
patrol-mcp-guide 실제 기기에서 Patrol E2E 테스트를 실행·디버깅할 때 사용합니다. patrol_mcp로 실행과 캡처를 반복하며 앱 준비 실패, 테스트 미발견과 입력·정리 단계의 오류를 조사
performance-testing Flutter 앱의 속도와 자원 사용량을 측정할 때 사용합니다. 프레임 시간, 메모리와 시작 시간을 프로파일링해 병목을 찾고 개선 효과를 확인합니다.
responsive-available-width 사이드바·패널이 있는 화면의 반응형 배치를 정할 때 사용합니다. 전체 기기 폭 대신 본문에 실제로 주어진 폭을 기준으로 열 수와 레이아웃 전환 조건을 계산합니다.
scale-invariant-layout 글자나 테마 배율을 키웠을 때 Flutter 화면이 잘리거나 넘칠 때 사용합니다. 콘텐츠에 맞춘 크기와 배치를 적용하고 큰 글꼴에서도 내용이 보이는지 검증합니다.
store-console-handoff 앱을 스토어에 등록하거나 콘솔 작업을 화면 제어 봇에 맡길 때 사용합니다. App Store Connect·Play Console 작업을 API·봇·사람의 역할로 나누고 권한, 입
store-iap-sync 인앱 상품·구독을 스토어에 등록하거나 프로젝트 설정과 맞출 때 사용합니다. YAML 상품 목록과 API 도구로 App Store Connect·Google Play를 동기화하고 등
swr-pattern 캐시 데이터를 먼저 보여주고 서버의 새 데이터로 갱신할 때 사용합니다. SWR 데이터 조회 흐름을 구성해 초기 표시와 백그라운드 갱신을 연결합니다.
unit-testing Dart의 UseCase나 Repository를 단위 테스트할 때 사용합니다. 외부 의존성을 mock으로 분리하고 Either의 성공·실패 결과와 호출 조건을 검증합니다.
viewer-side-panels 도서 뷰어에 크기 조절 가능한 사이드 패널을 만들 때 사용합니다. 분할 레이아웃과 화면 폭에 따른 패널 표시·배치 규칙을 적용합니다.
wasm-conditional-imports 웹·네이티브 구현을 조건부로 불러오거나 Wasm에서 기능이 사라지는 문제를 고칠 때 사용합니다. dart.library.js_interop 기준으로 분기를 확인하고 CI와 실제 W
wide-screen-parity 태블릿·데스크톱용 Flutter 배치를 추가하거나 수정할 때 사용합니다. 휴대폰 화면과 기능·정보를 대조하고 넓은 화면의 오버레이 위치와 실제 표시 결과를 확인합니다.
widget-testing Flutter 위젯의 렌더링과 상태별 동작을 직접 테스트할 때 사용합니다. 일반 위젯·BLoC 테스트를 작성하며 새 앱의 BDD 생성과 골든 매트릭스는 co_bdd·co_golde
widgetbook-conventions Widgetbook 화면을 등록하거나 상태 선택을 바꿔도 화면이 갱신되지 않을 때 사용합니다. 기능 패키지의 use_case, 상태 Knob과 BLoC 주입을 구성하고 Figma
값 시트 — .claude/store-handoff.json SKILL.md §4 의 형식과 조회 명령이다. 앱마다 스토어에 넣을 값을 그 앱 기준으로 적고, 값마다 출처와 확정 여부를 붙인다. 스토어 작업
런북 — App Store App Privacy (asc-app-privacy) App Store Connect 의 App Privacy(수집하는 데이터 종류·용도·사용자 연결·추적 여부)를 입력하거나 고칠 때. 공개 API 키로는 할 수 없다.
런북 — App Store Connect 앱 레코드 만들기 (asc-create-app) Bundle ID 는 있는데 App Store Connect 에 이 앱의 레코드가 없고, CLI 경로를 쓸 수 없을 때.
런북 — Play Console 새 앱 만들기 (play-create-app) 이 앱의 Play 앱이 아직 없을 때. Play Developer API 는 이미 있는 앱만 다루므로 이 단계는 화면으로 한다.
런북 — Play 스토어 설정: API 에 없는 칸만 (play-store-settings) Play 스토어 설정에서 API 에 칸이 없는 것 만 넣거나 고칠 때 — 앱 카테고리, 태그.
런북 — Play 앱 콘텐츠 선언 (play-app-content) Play 앱 콘텐츠(App content)의 선언을 채우거나 고칠 때 — 광고 포함 여부, 앱 액세스, 콘텐츠 등급 설문, 타깃층과 콘텐츠, 뉴스 앱, 정부 앱, 금융 기능, 건강
첫 구현에서 Figma와 어긋나는 자리 — 측정으로 드러난 점검표 화면을 처음 만들 때 보는 점검표다. 한 제품의 전 화면 Figma 일치 작업(수백 건의 PR, 4천 장이 넘는 골든 이미지,
풀스택 데모 제작·완료 검토 SONAX CARE 제작 회고를 반영한 feature-verification의 실행 순서다. 기존 5종 검증을

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 feature/ 번들에 Serverpod 모듈과 Flutter app·console을 생성합니다. 풀스택 기능을 한 번에 만들 때 사용합니다.
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 작업에 사용합니다.
di-agent BlocSignal Provider 구성과 의존성 배선 전문가입니다. 전역/페이지 컨테이너 생성과 bootstrap 설정에 사용합니다.
domain-layer-agent Clean Architecture 도메인 레이어 전문가입니다. Entity, UseCase, Repository 인터페이스 작업에 사용합니다.
feature Clean Architecture full-stack bundle generation specialist. Use for feature app/console packages
feature-orchestrator-agent 풀스택 번들 Feature 오케스트레이션 전문가입니다. feature/의 app·console·server·client 생성에 사용합니다.
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 Flutter 국제화 요청을 cc-i18n의 공통 에이전트에 연결합니다. 기존 i18n-agent 호출과 기능 모듈의 번역 작업에 사용합니다.
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 (bare-widget standard) All signatures below are checked against the coui release named in
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-blueprint 피그마 디자인·화면 개발 워크플로우 — CoUI Figma 라이브러리로 페이지 저작(/design), 프레젠테이션 온리 화면 개발 + 위젯북(/build), Figma↔Widget
cc-bricks cob(co-bricks) 기반 브릭 생성 가이드. kobic Clean Architecture feature 모듈 11종 + 그린필드 프로젝트 초기 세팅(project-init
cc-compass 코코드 스킬 저장소 나침반 — 작업 유형(워크플로우/도구/규칙/레퍼런스)에 따라 알맞은 플러그인·커맨드·스킬로 안내
cc-coui CoUI 컴포넌트 라이브러리 (크로스플랫폼 컴포넌트 128종) + 조합/확장 가이드
cc-coui-upgrade 앱이 참조하는 coui 버전 올리기(Flutter 앱·Jaspr 웹 앱) — 형제 패키지를 한 커밋으로 고정하는 핀 계산·검사(coui_pin.py), 홉 계획, 시각 회귀 게이트
cc-deeplink 딥링크 & Universal Links 설정 관리 (AASA, assetlinks.json, GoRouter 연동, 도메인 마이그레이션)
cc-designer 디자인 실무 레퍼런스 + 의사결정 스킬 (UI 디자인, 인터랙션 디자인, 정보 구조, 디자인 시스템, 디자인 옵스, 비주얼 크리틱). owl-listener/designer-ski
cc-dev 개발 사이클 자동화 (이슈 사이클, 버그 사이클, 세션, ZenHub, Agent Teams)
cc-e2e flutter-skill 탐색 → Gherkin 초안 → Patrol 박제로 이어지는 E2E 시나리오 저작 파이프라인
cc-flutter-docs Flutter 토픽별 레퍼런스 스킬 모음 (공식 문서 기반, 21개 스킬)
cc-i18n국제화 (Slang 기반 i18n)
cc-inspector Flutter Inspector 디버깅 (Master + 9 전문 Inspectors)
cc-jaspr-web Jaspr Web 자동화 + Flutter Web 임베드 검증. CoUI Web 페이지를 점검하고, Web↔Flutter 듀얼 라이브 프리뷰를 구동하며, VM Service를 통해
cc-marionette Marionette MCP 래퍼 — CoUI 컴포넌트에 맞춘 위젯 트리 단위 Flutter 자동화 (Widgetbook 회귀 테스트, 커스텀 인터랙티브 위젯 감지, 인프로세스 탭/
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-product-auto 서비스 채팅·기획 파일을 HTML PRD → CoUI Figma → cob 조립 → 화면 개발 → app·console·widgetbook GitHub Pages 배포로 연결하는
cc-quality 코드 품질 (코드 리뷰, 체크리스트, 버그 리포트, QA Health Score)
cc-security 보안 통합 — API/앱 보안, 보안 감사, CI 시크릿, 결제/IAP 엔드포인트 보안, 도서 PDF DRM (구 cc-uiux-security 확장)
cc-serverpod Serverpod 백엔드 — 모델/엔드포인트 생성, 마이그레이션 + 심화 패턴(아키텍처, 인증, 캐싱, DB, IAP, 테스트; 구 cc-backend 통합)
cc-spec Jev 판정 게이트 — Seed spec 을 쓰고 TypeSafe Jev(판정 전용 모델)로 모호성·3관점 패널·드리프트를 보정 확률로 판정해 잠금

설치#

curl -fsSL https://skills.cocode.im/install.sh | bash -s -- --plugin cc-flutter

도구별 설치 안내 · 설치 옵션과 업데이트

검색어를 입력하면 문서를 찾습니다.

↑ ↓ 이동 · Enter 열기Esc 닫기