Flutter UI実装のアーキテクチャ規約・コンポーネント分割・状態管理ガイド（Bloc/Cubit版）
npx skills add https://github.com/K9i-0/ccpocket --skill flutter-ui-designCopy and paste this command into Claude Code to install the skill
アプリのリリース（バージョンbump + CHANGELOG + タグ → GH Actions で自動ビルド・配布）。iOS / Android / macOS / Linux / Windows の任意の組み合わせでリリースできる。「リリース」「バージョン上げて」「リリースして」と言われたときに使う。
ccpocket の X 向けリリース告知カード画像を作成・更新する。最新の iOS/Android/macOS リリースタグ、App Store release_notes、既存の scripts/release-card/generate.mjs を使って英語・日本語の告知PNGを生成し、画像を目視確認して不備があれば生成スクリプトを修正する。「リリースカード」「X告知画像」「リリース報告用画像」「release-card」と言われたときに使用する。
ストア情報の更新自動化 — スクリーンショット撮影（シミュレーター × モック画面 × Marionette MCP）とメタデータテキスト更新。ストア更新、スクショ更新、App Store / Google Play のメタデータ更新、リリースノート作成の際に使用すること。
Codex の使い方、CLI/app/IDE、rules・hooks・AGENTS.md・skills・subagents・config などを案内する。Codex や OpenAI 製品の仕様を答える前に必ず公式ドキュメントを確認し、rules/approval は `codex execpolicy check` で実検証すること。
MCP (dart-mcp + Marionette) を使ったFlutterアプリのE2E自動化・UI検証ガイド。シミュレーターでのUI動作確認、モックプレビュー検証、Bridge経由のE2Eテスト、スクリーンショット撮影など、アプリの動作検証が必要なときに使う。「動作確認して」「UIを検証して」「E2Eテスト」「シミュレーターで確認」「モックで確認」と言われたときや、UI変更後の検証フェーズで使用すること。
GitHub Issue・PRのトリアージ。番号を渡すと、要望の要約・実現難易度・既存機能との重複チェック・対応判断を調査してレポートする。Issue/PRの番号が出てきたとき、トリアージ、優先度判断、対応判断と言われたときに使用する。
| name | flutter-ui-design |
| description | Flutter UI実装のアーキテクチャ規約・コンポーネント分割・状態管理ガイド（Bloc/Cubit版） |
| disable-model-invocation | true |
| allowed-tools | Bash(flutter:*), Bash(dart:*), Read, Write, Edit, Glob, Grep |
SSOT (Single Source of Truth) + UDF (Unidirectional Data Flow) に基づく設計。
// NG: プライベートメソッドでのWidget分割
class MyScreen extends StatefulWidget {
Widget _buildHeader() { ... }
Widget _buildBody() { ... }
Widget _buildFooter() { ... }
}
// OK: 独立したWidgetクラスに分割
class MyScreenHeader extends StatelessWidget { ... }
class MyScreenBody extends StatelessWidget { ... }
class MyScreenFooter extends StatelessWidget { ... }
class ChatSessionCubit extends Cubit<ChatSessionState> {
ChatSessionCubit() : super(const ChatSessionState());
void sendMessage(String text) {
// Command (Path B)
emit(state.copyWith(/* ... */));
}
}
class ConnectionCubit extends BridgeCubit<BridgeConnectionState> {
ConnectionCubit(super.initialState, super.stream);
}
@freezed
class ChatSessionState with _$ChatSessionState {
const factory ChatSessionState({
@Default([]) List<ChatEntry> entries,
@Default(SessionStatus.idle) SessionStatus status,
}) = _ChatSessionState;
}
@Default で初期値を明示lib/features/<feature>/
├── <feature>_screen.dart # 画面Widget
├── state/
│ ├── <feature>_state.dart # Freezed state classes
│ ├── <feature>_cubit.dart # Cubit
│ └── <feature>_state.freezed.dart # 生成ファイル
└── widgets/
├── <component_a>.dart # 独立Widget
└── <component_b>.dart
| 種別 | 命名 | 例 |
|---|---|---|
| 画面 | *_screen.dart | chat_screen.dart |
| 状態 | *_state.dart | chat_session_state.dart |
| Cubit | *_cubit.dart | chat_session_cubit.dart |
| Widget | 機能を表す名前 | chat_app_bar.dart |
UI要素にはValueKeyを付与し、Marionette MCPでの自動テストを可能にする。
{要素の機能}_{要素タイプ}
ElevatedButton(
key: const ValueKey('approve_button'),
onPressed: _approve,
child: const Text('Approve'),
)
TextField(
key: const ValueKey('message_input'),
controller: _controller,
)
| タイプ | 用途 |
|---|---|
_button | ボタン |
_field | テキスト入力 |
_input | テキスト入力（短い） |
_list | リスト |
_fab | FloatingActionButton |
_toggle | トグル |
_chip | チップ |
_badge | バッジ |
_indicator | インジケーター |
Flutter公式AIルール (flutter/flutter docs/rules) から、本プロジェクトに適用可能なものを抜粋。
const を使いリビルドを削減するcompute() で別Isolateに逃がす=>) を使うresolveWith で定義Semantics Widgetで説明ラベルを付与状態クラスの変更後は必ず実行:
cd apps/mobile && dart run build_runner build --delete-conflicting-outputs
実装完了時に確認:
_buildXxx() メソッドが残っていないことdart analyze apps/mobile がクリーンdart format apps/mobile が適用済みflutter test)