Flutterプロジェクトの画面定義書（screen specification）を作成・管理するスキル。
Sets up and manages Flutter screen specification documents. Triggers when creating or updating screen specs, automatically analyzing project structure and generating documentation with interactive configuration.
/plugin marketplace add xtone/ai_development_tools/plugin install flutter-screen-spec-generator@xtone-ai-development-toolsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
templates/base_template.mdtemplates/screen_spec_command.mdtemplates/sections/display_items.mdtemplates/sections/event_items.mdtemplates/sections/navigation_events.mdtemplates/sections/process_flow.mdこのスキルは、Flutterプロジェクトにおける画面定義書の作成環境をセットアップし、個別の画面定義書を生成・更新する機能を提供します。
以下のような発言で発動します：
このスキルは以下を行います：
各ステップで必ずユーザーの回答を待ってから次のステップに進むこと。
これにより、ユーザーが混乱せず、段階的に設定を進められます。
このスキルには3つの動作モードがあります：
プロジェクトに docs/screen_specs/template.md が存在しない場合、セットアップモードで動作します。
プロジェクトに docs/screen_specs/template.md が存在し、対象画面の定義書が存在しない場合、新規生成モードで動作します。
対象画面の定義書が既に存在する場合、更新モードで動作します。コードを再解析し、差分を検出してユーザーに提示します。
まず、プロジェクトの構造を解析します。
CLAUDE.md を読み込み、以下の情報を取得：
具体的なパス構造を自動解析：
lib/ui/, lib/presentation/ など）解析結果を簡潔に確認：
「CLAUDE.mdを確認しました。Flutter + Riverpod + auto_route のプロジェクトですね。
プロジェクト構造を解析したところ、以下のようになっています：
- UI層: lib/ui/{module}/widgets/
- ViewModel: lib/ui/{module}/view_models/
- ルーター: lib/routing/routes/app_router.dart
この認識で合っていますか？」
ここでユーザーの回答を待つ。次のステップに進まない。
pubspec.yaml を読み込み、以下を検出：
ディレクトリ構造を解析：
# UI層を探索
ls lib/ui/ または lib/presentation/ または lib/features/
# ルーターファイルを探索
find lib -name "*router*.dart"
# API定義を探索
find lib -name "*api*.dart"
※ Claude Codeの場合は、Bashコマンドではなく専用ツール（Glob, Grep等）の使用を推奨します。
検出結果をすべてユーザーに確認：
「画面定義書の作成をお手伝いします。
プロジェクトの構造を解析しました。
pubspec.yaml から以下を検出しました：
- フレームワーク: Flutter
- 状態管理: flutter_riverpod
- ルーティング: auto_route
ディレクトリ構造から以下を推測しました：
- UI層: lib/ui/{module}/widgets/
- ViewModel: lib/ui/{module}/view_models/
- ルーター: lib/routing/routes/app_router.dart
この認識で合っていますか？修正点があれば教えてください。」
ここでユーザーの回答を待つ。次のステップに進まない。
ステップ1でユーザーが「はい」「OK」などと回答したら、このステップに進む。
画面定義書に含めるセクションを会話で選択します。
「では、画面定義書に含めるセクションを選びましょう。
デフォルトは以下の通りです：
1. ✅ 基本情報（必須）- 画面ID、画面名、ファイルパス、最終更新日
2. ✅ スクリーンショット - 画面キャプチャの配置領域
3. ✅ 表示項目 - 静的な表示要素の一覧
4. ✅ イベント項目 - ユーザー操作によるイベント
5. ⬜ 本画面遷移時イベント - 画面表示時の自動イベント
6. ⬜ 処理フロー - API通信等の詳細フロー
7. ✅ 備考 - 特記事項
変更したい項目はありますか？」
ここでユーザーの回答を待つ。次のステップに進まない。
ステップ2でユーザーが回答したら、このステップに進む。
「他に追加したいセクションや、テーブルの列をカスタマイズしたい点はありますか？
例：
- イベント項目に analytics 列を追加
- 表示項目にデザイントークン列を追加
- 独自のセクションを追加
」
ここでユーザーの回答を待つ。次のステップに進まない。
ステップ3でユーザーが回答したら、このステップに進む。
確認が完了したら、以下のファイルを生成します：
.claude/commands/screen-spec.md - カスタムコマンドdocs/screen_specs/template.md - テンプレートdocs/screen_specs/README.md - 使い方ガイド「以下のファイルを生成しました：
- .claude/commands/screen-spec.md
- docs/screen_specs/template.md
- docs/screen_specs/README.md
これで `/screen-spec lib/ui/xxx/widgets/xxx_page.dart` で
画面定義書を生成できるようになりました。
是非、実際に1つ画面定義書を作成してみてください。
作成後、修正点があったら教えてください。」
docs/screen_specs/template.md が存在すること.claude/commands/screen-spec.md が存在することユーザーが以下のように発言した場合：
docs/screen_specs/template.md を読み込み.claude/commands/screen-spec.md の手順に従って生成ユーザーが以下のように発言した場合：
/screen-spec lib/ui/xxx/widgets/xxx_page.dart（既存ファイルに対して）既存の定義書を無視して新規作成したい場合：
/screen-spec lib/ui/xxx/widgets/xxx_page.dart --new
セクション別テンプレートは以下を参照：
templates/base_template.mdtemplates/screen_spec_command.mdtemplates/sections/display_items.mdtemplates/sections/event_items.mdtemplates/sections/navigation_events.mdtemplates/sections/process_flow.mdCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.