Menu
Flutter UI実装のアーキテクチャ規約・コンポーネント分割・状態管理ガイド（Bloc/Cubit版）
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
アプリのリリース（バージョン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)