📱
FrontendDart

Flutter UI Design

by K9i-0

Flutter UI Design is a Frontend skill for Claude Code, published by K9i-0 in ccpocket.

1K stars97 forkson K9i-0/ccpocketAdded 2026/08/21Repository updated 2026/08/20
androidapp-serverbridge-serverclaude-codeclicodexflutteriosmobileopenairemote-controltypescriptwebsocket
Install in seconds
Install Flutter UI Design
Copy Flutter UI Design into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/flutter-ui-design ~/.claude/skills/flutter-ui-design

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/K9i-0/ccpocket.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
.claude/skills/flutter-ui-design/SKILL.md in K9i-0/ccpocket
Installs to
~/.claude/skills/flutter-ui-design
Collection
One of 18 skills cataloged from this repository
Category
Frontend567 skills

What Flutter UI Design does

Flutter UI Design defines architecture rules for Flutter UI implementation, including feature-first structure, widget splitting, and Bloc/Cubit state management. Use it when building or reviewing Flutter screens and components.

Flutter UI Design is cataloged under Frontend on DirSkills. Flutter UI Design comes from a repository tagged android, app-server, bridge-server, claude-code and cli.

Documentation

README

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状態

Widget 分割ルール

禁止パターン

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

推奨パターン

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Flutter UI Design

  • What else does K9i-0 publish alongside Flutter UI Design?

    Flutter UI Design is one of 18 skills that DirSkills catalogs from K9i-0/ccpocket, the repository it ships in. Its siblings there include App Release, Branch Merge Cleanup and Codex Guide. Each one is a separate skill with its own page in this directory, installs the same way Flutter UI Design does, and is maintained by K9i-0 in that same repository. The rest of the collection is listed on the K9i-0/ccpocket page.

  • How does Flutter UI Design compare to other Frontend skills?

    Flutter UI Design ranks #323 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Flutter UI Design against them. Open each page to compare what they document and how they install.

More from K9i-0/ccpocket

Flutter UI Design is one of 18 skills cataloged on DirSkills from K9i-0/ccpocket.

See all 18 skills