Agent skill

Flutter UI Design

Flutter UI実装のアーキテクチャ規約・コンポーネント分割・状態管理ガイド（Bloc/Cubit版）. An agent skill from K9i-0/ccpocket.

MITAuto-check passedMobile

Install Flutter UI Design

skills CLI

$ npx skills add K9i-0/ccpocket --skill flutter-ui-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install K9i-0/ccpocket flutter-ui-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/K9i-0/ccpocket.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/flutter-ui-design .claude/skills/flutter-ui-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "flutter-ui-design" agent skill from https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/flutter-ui-design into .claude/skills/flutter-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flutter-ui-design", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/flutter-ui-design

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add K9i-0/ccpocket --skill flutter-ui-design -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install K9i-0/ccpocket flutter-ui-design --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/K9i-0/ccpocket.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/flutter-ui-design .agents/skills/flutter-ui-design && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "flutter-ui-design" agent skill from https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/flutter-ui-design into .agents/skills/flutter-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flutter-ui-design", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add K9i-0/ccpocket --skill flutter-ui-design -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install K9i-0/ccpocket flutter-ui-design --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/K9i-0/ccpocket.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/flutter-ui-design .cursor/skills/flutter-ui-design && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "flutter-ui-design" agent skill from https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/flutter-ui-design into .cursor/skills/flutter-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flutter-ui-design", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/K9i-0/ccpocket.git --path .claude/skills/flutter-ui-design

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add K9i-0/ccpocket --skill flutter-ui-design -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install K9i-0/ccpocket flutter-ui-design --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/K9i-0/ccpocket.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/flutter-ui-design .gemini/skills/flutter-ui-design && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "flutter-ui-design" agent skill from https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/flutter-ui-design into .gemini/skills/flutter-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flutter-ui-design", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install K9i-0/ccpocket flutter-ui-design

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add K9i-0/ccpocket --skill flutter-ui-design -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/K9i-0/ccpocket.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/flutter-ui-design .github/skills/flutter-ui-design && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "flutter-ui-design" agent skill from https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/flutter-ui-design into .github/skills/flutter-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flutter-ui-design", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add K9i-0/ccpocket --skill flutter-ui-design -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install K9i-0/ccpocket flutter-ui-design --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/K9i-0/ccpocket.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/flutter-ui-design .opencode/skills/flutter-ui-design && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "flutter-ui-design" agent skill from https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/flutter-ui-design into .opencode/skills/flutter-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flutter-ui-design", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: flutter-ui-design
GitHub stars: 1.1k
Token cost: ~1.2k tokens
SKILL.md length: 207 words
Files: 1
Skills in repo: 17
Repo updated: Oct 3, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Flutter UI実装のアーキテクチャ規約・コンポーネント分割・状態管理ガイド（Bloc/Cubit版）. An agent skill from K9i-0/ccpocket.

Tasks that involve Cross-platform mobile apps
SKILL.md covers アーキテクチャ概要, Widget 分割ルール, 状態管理 and ファイル構成, plus 4 more sections
Calls dart and flutter
Tasks that involve UI design

What it does

Flutter UI Design is an agent skill from K9i-0/ccpocket. Flutter UI実装のアーキテクチャ規約・コンポーネント分割・状態管理ガイド（Bloc/Cubit版）

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering Cross-platform mobile apps and UI design. It works with Flutter. The repository describes itself as: Mobile client for Codex and Claude — control coding agents from your phone via WebSocket bridge. The licence is MIT.

When your agent uses it

Tasks that involve Cross-platform mobile apps
Tasks that involve UI design

Example prompts

“/flutter-ui-design”

Requirements

Pre-approved tools (allowed-tools): Bash(flutter:*), Bash(dart:*), Read, Write, Edit, Glob, Grep

What it can do on your machine

Read from SKILL.md and the folder at commit 8354ffd. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
- Bash(flutter:*)
- Bash(dart:*)
- Read
- Write
- Edit
- Glob
- Grep
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- dart
- flutter
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Flutter UI Design loads about 1.2k tokens when it runs. Until then it costs about 18 tokens; SKILL.md has 207 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~18
When it runs · the whole SKILL.md, loaded when a task matches: ~1.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from K9i-0/ccpocket at commit 8354ffd, republished under its MIT licence (© K9i-0). 207 words, ~1,214 tokens.

Download SKILL.mdSave it as .claude/skills/flutter-ui-design/SKILL.md (or your agent's skills folder).

name: flutter-ui-design
description: Flutter UI実装のアーキテクチャ規約・コンポーネント分割・状態管理ガイド（Bloc/Cubit版）
allowed-tools: Bash(flutter:*), Bash(dart:*), Read, Write, Edit, Glob, Grep

Flutter UI 実装規約

アーキテクチャ概要

SSOT (Single Source of Truth) + UDF (Unidirectional Data Flow) に基づく設計。

データフローパターン

Path A (Query): Cubit/Bloc → Widget (BlocBuilder/BlocListener)
- サーバー状態、永続化データ、共有状態
- BlocProvider を通じて単方向に流れる
Path B (Command): Widget → Cubit method → State emit
- ユーザーアクション、API呼び出し
- Cubit のメソッド経由で状態を変更
Path C (Local): StatefulWidget / useState
- テキスト入力、スクロール位置、展開状態等の一時的UI状態

禁止パターン

dart

// NG: プライベートメソッドでのWidget分割
class MyScreen extends StatefulWidget {
  Widget _buildHeader() { ... }
  Widget _buildBody() { ... }
  Widget _buildFooter() { ... }
}

推奨パターン

dart

// OK: 独立したWidgetクラスに分割
class MyScreenHeader extends StatelessWidget { ... }
class MyScreenBody extends StatelessWidget { ... }
class MyScreenFooter extends StatelessWidget { ... }

分割の判断基準

20行以上のbuildメソッド内ブロック → 独立Widgetに
独自のCubitを持つ → 独立Widget + BlocProvider
BlocBuilder を含む → 独立Widget
表示のみ → StatelessWidget

状態管理

Cubit パターン

dart

class ChatSessionCubit extends Cubit<ChatSessionState> {
  ChatSessionCubit() : super(const ChatSessionState());

  void sendMessage(String text) {
    // Command (Path B)
    emit(state.copyWith(/* ... */));
  }
}

BridgeCubit パターン（Stream購読）

dart

class ConnectionCubit extends BridgeCubit<BridgeConnectionState> {
  ConnectionCubit(super.initialState, super.stream);
}

Freezed State

dart

@freezed
class ChatSessionState with _$ChatSessionState {
  const factory ChatSessionState({
    @Default([]) List<ChatEntry> entries,
    @Default(SessionStatus.idle) SessionStatus status,
  }) = _ChatSessionState;
}

全ての状態クラスは Freezed で定義
sealed union で排他的状態を表現
@Default で初期値を明示

ファイル構成

feature-first 構造

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`

ValueKey 命名規約（MCP自動テスト対応）

UI要素にはValueKeyを付与し、Marionette MCPでの自動テストを可能にする。

命名パターン

{要素の機能}_{要素タイプ}

例

dart

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 ベストプラクティス

Flutter公式AIルール (flutter/flutter docs/rules) から、本プロジェクトに適用可能なものを抜粋。

パフォーマンス

build()内で重い処理をしない: ネットワーク呼び出し・複雑な計算はbuild()の外で行う
ListView.builder / SliverList: 長いリストは必ずbuilder系コンストラクタで遅延生成する
constコンストラクタ: Widget・build()内で可能な限り const を使いリビルドを削減する
Isolate: JSON解析等の重い処理は compute() で別Isolateに逃がす

Dartコーディング

Null Safety: ! (bang operator) は値がnon-nullと保証できる場合のみ使用。安易に使わない
exhaustive switch: switch文/式は網羅的に書く。breakは不要
パターンマッチング: コードを簡潔にできる箇所ではパターンマッチングを活用する
アロー関数: 1行で済む関数はアロー構文 (=>) を使う
関数の長さ: 1関数20行未満を目指す。超える場合は分割を検討

レイアウト

Expanded / Flexible: 同一Row/Column内での混在禁止
Wrap: Row/Columnで溢れる要素はWrapで折り返す
SingleChildScrollView: 固定サイズでビューポートを超えるコンテンツに使用
FittedBox: 子Widgetを親のサイズに合わせてスケーリング
LayoutBuilder: レスポンシブレイアウトでの利用可能スペースに基づく分岐

テーマ・スタイリング

ThemeExtension: 標準ThemeDataに無いカスタムスタイルはThemeExtensionで定義する
ColorScheme.fromSeed(): シードカラーからLight/Dark両テーマを生成
WidgetStateProperty: ボタン等の状態別スタイルは resolveWith で定義

アクセシビリティ

コントラスト比: テキストは背景に対して4.5:1以上（大きいテキストは3:1以上）
Semantics: スクリーンリーダー向けに Semantics Widgetで説明ラベルを付与
動的テキストスケーリング: システムフォントサイズ変更時にUIが崩れないことを確認

build_runner

状態クラスの変更後は必ず実行:

bash

cd apps/mobile && dart run build_runner build --delete-conflicting-outputs

チェックリスト

実装完了時に確認:

_buildXxx() メソッドが残っていないこと
全状態がFreezedクラスで管理されていること
BlocBuilder/BlocListenerが適切に使い分けられていること
新規UI要素にValueKeyが付与されていること
dart analyze apps/mobile がクリーン
dart format apps/mobile が適用済み
既存テストがパス (flutter test)
新規Cubitのユニットテストが追加されていること
build()内に重い処理（ネットワーク、複雑な計算）がないこと
長いリストがListView.builder/SliverListで実装されていること
可能な箇所でconstコンストラクタが使われていること

Files

Just SKILL.md in .claude/skills/flutter-ui-design of K9i-0/ccpocket.

Open the folder on GitHubat commit 8354ffd

Compare with similar skills

Flutter UI Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Flutter UI Design compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Flutter UI Design this skillK9i-0/ccpocket	1.1k	—	~1.2k	Automated safety check: Pass	MIT	6 days ago
Mobile App UI Designceorkm/mobile-app-ui-design	400	—	~2k	Automated safety check: Pass	None	3 mo ago
Apple Designvrcm-team/VRCM	179	1 repos	~6.2k	Automated safety check: Pass	MIT	7 days ago
UI Designmhmzdev/the-holy-quran-app	889	—	~1.2k	Automated safety check: Pass	MIT	28 days ago
UI UX Pro Maxsaoudi-h/solar-icons	184	18 repos	~11k	Automated safety check: Notes	Custom licence	yesterday
Add Flutter Docusaurus Localematthiasn/lotti	1.2k	—	~1.2k	Automated safety check: Pass	GPL-3.0	yesterday

Similar skills

Mobile App UI Design
ceorkm/mobile-app-ui-design
Design high-quality mobile app UI/UX screens, flows, and components.
400 GitHub stars~2k tokensUpdated 3 mo ago
MobileAuto-check passed
Apple Design
vrcm-team/VRCM
Cross-platform UI/UX design reviewer grounded in Apple's Human Interface Guidelines (122 pages pulled from developer.apple.com, including 57 component pages) plus a design-craft lens for…
179 GitHub starsUsed in 1 repo~6.2k tokens
MobileAuto-check passed
UI Design
mhmzdev/the-holy-quran-app
Design Flutter UI screens and widgets for The Holy Qur'an app.
889 GitHub stars~1.2k tokensUpdated 28 days ago
Frontend & DesignAuto-check passed
UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
184 GitHub starsUsed in 18 repos~11k tokens
Frontend & DesignAuto-check: notes
Add Flutter Docusaurus Locale
matthiasn/lotti
Add, complete, or audit a locale across a Flutter application's ARB catalogs and a localized Docusaurus manual, including generated localization code, locale selectors, native platform declarations…
1.2k GitHub stars~1.2k tokensUpdated yesterday
MobileAuto-check passed
Tm Launcher Design
Far-Se/tabame
Create or revise Tabame's Flutter launcher designs: frames, search bars, result rows, palettes, typography, and action dialogs.
372 GitHub stars~3.1k tokensUpdated yesterday
MobileAuto-check passed

Questions about Flutter UI Design

What does Flutter UI Design do?

Flutter UI実装のアーキテクチャ規約・コンポーネント分割・状態管理ガイド（Bloc/Cubit版）. An agent skill from K9i-0/ccpocket. Flutter UI Design is an agent skill from K9i-0/ccpocket.

When should I use Flutter UI Design?

Flutter UI Design fits situations like: tasks that involve Cross-platform mobile apps; tasks that involve UI design.

How do I install Flutter UI Design in Claude Code?

Run `npx skills add K9i-0/ccpocket --skill flutter-ui-design -a claude-code`. Or copy the skill folder (.claude/skills/flutter-ui-design in K9i-0/ccpocket) into .claude/skills/flutter-ui-design in your project. Claude Code loads it when a task matches its description.

How do I install Flutter UI Design in Codex?

Run `npx skills add K9i-0/ccpocket --skill flutter-ui-design -a codex`. Or copy the skill folder (.claude/skills/flutter-ui-design in K9i-0/ccpocket) into .agents/skills/flutter-ui-design in your project. Codex loads it when a task matches its description.

Can I use Flutter UI Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add K9i-0/ccpocket --skill flutter-ui-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/flutter-ui-design, .gemini/skills/flutter-ui-design, .github/skills/flutter-ui-design and .opencode/skills/flutter-ui-design in your project.

What does Flutter UI Design need to run?

Going by SKILL.md and its folder, Flutter UI Design needs the command-line tools its instructions call (dart and flutter). Its frontmatter pre-approves these tools: Bash(flutter:*), Bash(dart:*), Read, Write, Edit, Glob, Grep.

Does Flutter UI Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Flutter UI Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Flutter UI Design use?

Flutter UI Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Flutter UI Design use?

About 1.2k tokens (SKILL.md is roughly 4.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Flutter UI Design?

Skills that share tags, products or a category with Flutter UI Design: Mobile App UI Design (ceorkm/mobile-app-ui-design, 400 stars), Apple Design (vrcm-team/VRCM, 179 stars), UI Design (mhmzdev/the-holy-quran-app, 889 stars) and UI UX Pro Max (saoudi-h/solar-icons, 184 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Flutter UI Design?

K9i-0 (a GitHub user) maintains it in K9i-0/ccpocket, which has 1,083 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 3, 2026.

Source: K9i-0/ccpocket on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Flutter UI Design

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Flutter UI 実装規約

アーキテクチャ概要

データフローパターン

Widget 分割ルール

禁止パターン

推奨パターン

分割の判断基準

状態管理

Cubit パターン

BridgeCubit パターン（Stream購読）

Freezed State

ファイル構成

feature-first 構造

命名規約

ValueKey 命名規約（MCP自動テスト対応）

命名パターン

例

要素タイプ一覧

Flutter ベストプラクティス

パフォーマンス

Dartコーディング

レイアウト

テーマ・スタイリング

アクセシビリティ

build_runner

チェックリスト

Files

Compare with similar skills

Similar skills

More from K9i-0/ccpocket

Related

Questions about Flutter UI Design