메뉴
Flutterプロジェクトの画面定義書（screen specification）を作成・管理するスキル。 「画面定義書を作成したい」「〇〇画面の定義書を作って」などの発言で発動し、 プロジェクト構造を解析してテンプレートをセットアップし、個別の画面定義書を生成します。
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/xtone/ai_development_tools --skill screen-spec-generator명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
SOC 직업 분류 기준
| name | screen-spec-generator |
| description | Flutterプロジェクトの画面定義書（screen specification）を作成・管理するスキル。 「画面定義書を作成したい」「〇〇画面の定義書を作って」などの発言で発動し、 プロジェクト構造を解析してテンプレートをセットアップし、個別の画面定義書を生成します。 |
このスキルは、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 を読み込み、以下を検出：
ディレクトリ構造を解析：
検出結果をすべてユーザーに確認：
「画面定義書の作成をお手伝いします。
プロジェクトの構造を解析しました。
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.md