Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
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.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/K9i-0/ccpocket --skill flutter-ui-designThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
App Store Connect・Google Playの現在の公開版をAPIで調べ、既存の最新安定ビルドとの差分から4言語のリリースノートを作成し、CLI/APIで審査へ提出・再提出する。新しいビルドを作るrelease-appとは分離し、「最新を審査提出して」「ストア審査へ提出して」「App Reviewに出して」「Google Playの審査を進めて」「却下対応して再提出して」と依頼されたときに使用する。
アプリのリリース（バージョン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」と言われたときに使用する。
Based on SOC occupation classification
| 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)