From tsumiki
Generates and updates screen spec Markdown docs from source code changes via git diff or acceptance plans. Supports init/full, update/diff, from-plan modes for webtest pipelines.
npx claudepluginhub classmethod/tsumiki --plugin tsumikiThis skill uses the workspace's default tool permissions.
ソースコードから画面仕様ドキュメント(Screen Spec)を生成・差分更新するスキル。
references/diff-analyze-prompt-template.mdreferences/diff-update-prompt-template.mdreferences/explore-pages-prompt-template.mdreferences/explore-routes-prompt-template.mdreferences/from-plan-analyze-prompt-template.mdreferences/from-plan-generate-prompt-template.mdreferences/generate-prompt-template.mdreferences/screen-spec-format.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
ソースコードから画面仕様ドキュメント(Screen Spec)を生成・差分更新するスキル。
docs/dev/screen-specs/ 配下に画面ごとの Markdown with frontmatter 形式で出力する。
webtest 計画の差分更新パイプラインにおいて、ソースコード変更を画面・機能単位の変更に翻訳する中間レイヤーとして機能する。
[ソースコード変更] ← dev-impl / 手作業 / 何でも
│
│ git diff (last_synced_commit → HEAD)
▼
[dev-screen-spec] ← 手動実行(本スキル)
│
│ 画面仕様の差分
▼
[dev-webtest-plan] ← 既存の受け入れ要件 + 画面仕様を入力に
│
▼
[dev-webtest] ← 既存のまま
/dev-screen-spec # 自動判定(初回 or 差分更新)
/dev-screen-spec init # 強制的に初回生成モード
/dev-screen-spec update # 強制的に差分更新モード
/dev-screen-spec update login # 特定画面のみ更新
/dev-screen-spec from-plan # AC変更のある plan を自動検出
/dev-screen-spec from-plan <plan-name> # 特定の plan を明示指定
docs/dev/screen-specs/_index.md の存在で自動判定する(ユーザー質問不要):
| モード | 判定条件 | 特徴 |
|---|---|---|
| from-plan | 引数が from-plan で始まる | 受け入れ条件(AC + plan.md)から画面仕様を生成。ソースコード不要 |
| 初回生成 | _index.md が存在しない、または引数 init | ソースコード全体を解析して一括生成 |
| 差分更新 | _index.md が存在する、または引数 update | git diff で影響画面のみ更新 |
サブエージェントは Task ツールを使用できない(ネスト不可のアーキテクチャ制約)。そのため:
メインコンテキストの肥大化を防ぐため、中間ファイルとパス参照 を使用する:
tmp/screen-spec/)tmp/screen-spec/
├── explore-routes.md # Phase 1: ルーティング探索結果
├── explore-pages.md # Phase 1: ページコンポーネント一覧
├── group-<group-name>.md # Phase 3: グループサマリー(初回生成)
├── diff-<screen_id>.md # 差分更新 Phase 2: 各画面の変更サマリー
├── sync-<screen_id>.md # 差分更新 Phase 1.5: from-plan ソース同期分析
└── from-plan/
└── screen-analysis.md # from-plan Phase 2: 画面構成分析結果
| 信号 | 基準 |
|---|---|
| 🔵 | ソースコードから直接読み取れた情報(HTML要素、バリデーション属性、ルーティング定義等) |
| 🟡 | ソースコードから推測した情報(コンポーネント名から画面名を推定、import関係からの推論等) |
| 🔴 | AI推論補完(ソースに明示されていないが、一般的なWebアプリとして必要と判断した項目) |
from-plan モードでの信号機基準:
| 信号 | 基準 |
|---|---|
| 🔵 | ACに明示されている情報 |
| 🟡 | plan.md から推測した情報 |
| 🔴 | AI推論補完 |
docs/dev/context.md の存在を確認する。存在しない場合は /dev-context の実行を案内して終了するdocs/dev/context.md を Read して技術スタック(フレームワーク、言語)を把握するmkdir -p "$(git rev-parse --show-toplevel)/tmp/screen-spec"
references/explore-routes-prompt-template.md を Read で読み込む{{CONTEXT_MD_PATH}} ← docs/dev/context.md の絶対パス{{TMP_DIR}} ← tmp/screen-spec/ の絶対パスEXPLORE_ROUTES_SUCCESS → 次へEXPLORE_ROUTES_FAILED → エラー理由をユーザーに報告して終了references/explore-pages-prompt-template.md を Read で読み込む{{CONTEXT_MD_PATH}} ← docs/dev/context.md の絶対パス{{TMP_DIR}} ← tmp/screen-spec/ の絶対パスEXPLORE_PAGES_SUCCESS → 次へEXPLORE_PAGES_FAILED → エラー理由をユーザーに報告して終了tmp/screen-spec/explore-routes.mdtmp/screen-spec/explore-pages.mdグループ単位で general-purpose サブエージェントを起動(並列)。1サブエージェントが「グループ内の全画面」を担当する:
references/generate-prompt-template.md を Read で読み込む{{GROUP_NAME}} ← グループ名{{SCREENS}} ← グループ内の画面情報一覧(画面ID, 画面名, パス, 認証要否, related_files){{SCREEN_SPEC_FORMAT_PATH}} ← references/screen-spec-format.md の絶対パス{{CONTEXT_MD_PATH}} ← docs/dev/context.md の絶対パス{{OUTPUT_DIR}} ← docs/dev/screen-specs/ の絶対パス{{TMP_DIR}} ← tmp/screen-spec/ の絶対パスtmp/screen-spec/group-<group-name>.mdGENERATE_SCREEN_SPEC_SUCCESS → 完了GENERATE_SCREEN_SPEC_FAILED → エラー理由を記録複数グループがある場合は並列で実行する(Agent ツールを複数同時起動)。
_index.md を組み立てる:
last_synced_commit を現在の HEAD に設定、updated_at を今日の日付に設定、groups を設定_index.md の frontmatter にグループ情報を含める:
---
last_synced_commit: abc1234
updated_at: "2026-03-10"
groups:
- name: user-management
screens: [user-list, user-detail, user-create]
- name: auth
screens: [login, forgot-password]
- name: settings
screens: [user-settings]
---
last_synced_commit を現在の HEAD(短縮形)に設定する:
git rev-parse --short HEAD
## dev-screen-spec 完了レポート(初回生成)
### 生成概要
- 画面数: N
- グループ数: N
- 生成ファイル数: N + 1(_index.md 含む)
- last_synced_commit: <commit hash>
### 生成ファイル一覧
| ファイル | 画面名 | パス | グループ | 項目数 | 🔵 | 🟡 | 🔴 |
|---------|--------|------|---------|--------|-----|-----|-----|
| _index.md | 画面一覧 | - | - | - | - | - | - |
| login.md | ログイン | /login | auth | 4 | 3 | 1 | 0 |
| ...
### ⚠️ 🔴 警告
以下の項目はソースコードに根拠がなく、AI が推論で追加しました。内容を確認してください:
- <ファイル名> <セクション>: <項目名>
### ⚠️ 到達不能画面
- <画面ID>: いずれの遷移フローにも含まれていません
### 次のステップ
- 画面仕様の内容を確認してください
- 差分更新: ソースコード変更後に `/dev-screen-spec` を再実行
- テスト計画生成: `/dev-webtest-plan` で画面仕様を入力としてテスト計画を生成
rm -rf "$(git rev-parse --show-toplevel)/tmp/screen-spec/"
docs/dev/screen-specs/_index.md の last_synced_commit を Grep で取得するlast_synced_commit が現在の git history に存在するか確認する:
git cat-file -t <last_synced_commit>
存在しない場合 → ユーザーに「初回生成モードで再生成」を提案して終了git diff --name-only <last_synced_commit>..HEAD で変更ファイル一覧を取得するrelated_files を Grep で取得し、変更ファイル一覧と突き合わせる:
影響判定ロジック:
- related_files に含まれるファイルが変更されている → 影響あり
- related_files に含まれないが、ルーティング定義が変更されている → 新画面追加の可能性
- related_files のファイルが削除されている → 画面削除の可能性
screen-id 指定時)の場合は、その画面のみを対象にするmkdir -p "$(git rev-parse --show-toplevel)/tmp/screen-spec"
source: from-plan かつ last_synced_commit: null の画面を Grep で検出するrelated_files が空なので、ルーティング情報から対応するソースファイルを特定する
b. ソースファイルが見つかった画面について、general-purpose サブエージェントで分析(画面数分並列):
tmp/screen-spec/sync-<screen_id>.mdSYNC_ANALYZE_SUCCESS / SYNC_ANALYZE_FAILED
c. 各画面について AskUserQuestion で解決方法を選ばせる:source: from-source, last_synced_commit: HEAD に変更影響のある画面が属するグループ単位で general-purpose サブエージェントを起動(並列):
references/diff-analyze-prompt-template.md を Read で読み込む{{SCREEN_ID}} ← 画面ID{{LAST_SYNCED_COMMIT}} ← last_synced_commit{{RELATED_FILES}} ← その画面の related_files 一覧{{EXISTING_SCREEN_SPEC_PATH}} ← 既存の画面仕様ファイルパス{{TMP_DIR}} ← tmp/screen-spec/ の絶対パスDIFF_ANALYZE_SUCCESS → Phase 3 へDIFF_ANALYZE_FAILED → エラー理由を記録グループ単位で general-purpose サブエージェントを起動(並列):
references/diff-update-prompt-template.md を Read で読み込む{{SCREEN_ID}} ← 画面ID{{DIFF_SUMMARY_PATH}} ← tmp/screen-spec/diff-<screen_id>.md の絶対パス{{EXISTING_SCREEN_SPEC_PATH}} ← 既存の画面仕様ファイルパス{{SCREEN_SPEC_FORMAT_PATH}} ← references/screen-spec-format.md の絶対パス{{OUTPUT_DIR}} ← docs/dev/screen-specs/ の絶対パスUPDATE_SCREEN_SPEC_SUCCESS → 完了UPDATE_SCREEN_SPEC_FAILED → エラー理由を記録_index.md を更新する:
last_synced_commit を HEAD に更新、updated_at を今日の日付に更新last_synced_commit を更新する## dev-screen-spec 完了レポート(差分更新)
### 更新概要
- 前回同期: <last_synced_commit> → 今回: <HEAD>
- 変更ファイル数: N
- 影響画面数: N
### 更新画面一覧
| 画面ID | 画面名 | 変更セクション | 変更概要 |
|--------|--------|-------------|---------|
| login | ログイン | バリデーション | パスワード最低文字数を6→8に変更 |
### 新規追加画面
- <画面ID>: <画面名>
### 削除画面
- <画面ID>: <画面名>(ユーザー確認済み)
### ⚠️ 🔴 警告
以下の項目はソースコードに根拠がなく、AI が推論で追加しました:
- <ファイル名> <セクション>: <項目名>
### ⚠️ 到達不能画面
- <画面ID>: いずれの遷移フローにも含まれていません
rm -rf "$(git rev-parse --show-toplevel)/tmp/screen-spec/"
plan-name が明示指定されている場合はそのまま Phase 1 へ進む。省略されている場合は自動検出する:
docs/dev/screen-specs/_index.md が存在する場合:
a. last_synced_commit を Grep で取得する
b. 以下のコマンドで AC が変更された plan を検出する:
git diff --name-only <last_synced_commit>..HEAD -- docs/dev/plans/*/acceptance-criteria.md
c. 結果のパスから plan 名を抽出する(例: docs/dev/plans/auth/acceptance-criteria.md → auth)_index.md が存在しない場合:
a. Glob で docs/dev/plans/*/acceptance-criteria.md を取得する
b. 全 plan を候補にする以下の plan の acceptance-criteria.md が変更されています。対象を選んでください:
1. auth
2. user-management
(all で全部、カンマ区切りで複数選択可)
docs/dev/context.md の存在を確認する。存在しない場合は /dev-context の実行を案内して終了するdocs/dev/plans/<plan-name>/acceptance-criteria.md の存在を確認する。存在しない場合は「Full-spec モードの /dev-plan で受け入れ条件を作成してください」と案内して終了するdocs/dev/plans/<plan-name>/plan.md の存在を確認する(任意だが推奨)docs/dev/screen-specs/_index.md がある場合、既存画面仕様への追加になることを通知するmkdir -p tmp/screen-spec/from-plan/references/from-plan-analyze-prompt-template.md を Read で読み込む{{ACCEPTANCE_CRITERIA_PATH}} ← acceptance-criteria.md の絶対パス{{PLAN_MD_PATH}} ← plan.md の絶対パス(存在しない場合は「なし」){{EXISTING_INDEX_PATH}} ← 既存の _index.md の絶対パス(存在しない場合は「なし」){{TMP_DIR}} ← tmp/screen-spec/from-plan/ の絶対パスtmp/screen-spec/from-plan/screen-analysis.md(画面一覧、各画面の要件、グループ案)FROM_PLAN_ANALYZE_SUCCESS / FROM_PLAN_ANALYZE_FAILEDグループ単位でサブエージェントを起動(並列):
references/from-plan-generate-prompt-template.md を Read で読み込む{{GROUP_NAME}} ← グループ名{{SCREEN_ANALYSIS_PATH}} ← tmp/screen-spec/from-plan/screen-analysis.md の絶対パス{{ACCEPTANCE_CRITERIA_PATH}} ← acceptance-criteria.md の絶対パス{{PLAN_MD_PATH}} ← plan.md の絶対パス{{SCREEN_SPEC_FORMAT_PATH}} ← references/screen-spec-format.md の絶対パス{{PLAN_NAME}} ← plan 名{{OUTPUT_DIR}} ← docs/dev/screen-specs/ の絶対パスsource: from-plan, source_plan: <plan-name>, last_synced_commit: null を設定related_files は空(ソースがまだないため)FROM_PLAN_GENERATE_SUCCESS / FROM_PLAN_GENERATE_FAILED_index.md を生成または更新する:
last_synced_commit は現在の HEAD、updated_at は今日の日付## dev-screen-spec 完了レポート(from-plan)
### 生成概要
- Source Plan: <plan-name>
- 画面数: N
- グループ数: N
### 生成ファイル一覧
| ファイル | 画面名 | パス | グループ | 🔵 | 🟡 | 🔴 |
|---------|--------|------|---------|-----|-----|-----|
| login.md | ログイン | /login | auth | 3 | 1 | 0 |
### ⚠️ 注意
これらの画面仕様は受け入れ条件から生成されたものです。
実装後に `/dev-screen-spec update` を実行してソースコードと同期してください。
### 次のステップ
- 画面仕様の内容をレビューしてください
- `/dev-webtest-plan <plan-name>` でテスト計画を生成
- `/dev-impl <plan-name>` で実装を開始
- 実装後: `/dev-screen-spec update` でソースコードと同期
| Phase | タイプ | 用途 | 並列 |
|---|---|---|---|
| 初回 1a | general-purpose | ルーティング探索 | 1b と並列 |
| 初回 1b | general-purpose | ページコンポーネント探索 | 1a と並列 |
| 初回 3 | general-purpose | グループ単位で画面仕様生成 | グループ数分並列 |
| 差分 1.5 | general-purpose | from-plan ソース同期分析 | 画面数分並列 |
| 差分 2 | general-purpose | git diff の分析と変更サマリー出力 | グループ単位並列 |
| 差分 3 | general-purpose | 画面仕様ファイル更新 | グループ単位並列 |
| from-plan 2 | general-purpose | 画面構成分析 | 単独 |
| from-plan 4 | general-purpose | グループ単位で画面仕様生成 | グループ数分並列 |
以下の場合は自動処理を停止し、ユーザーに確認する:
/dev-context を案内して終了/dev-plan で受け入れ条件を作成してください」と案内して終了| マーカー | 意味 |
|---|---|
EXPLORE_ROUTES_SUCCESS | ルーティング探索成功 |
EXPLORE_ROUTES_FAILED | ルーティング探索失敗 |
EXPLORE_PAGES_SUCCESS | ページコンポーネント探索成功 |
EXPLORE_PAGES_FAILED | ページコンポーネント探索失敗 |
GENERATE_SCREEN_SPEC_SUCCESS | 画面仕様ファイル生成成功 |
GENERATE_SCREEN_SPEC_FAILED | 画面仕様ファイル生成失敗 |
DIFF_ANALYZE_SUCCESS | 差分分析成功 |
DIFF_ANALYZE_FAILED | 差分分析失敗 |
UPDATE_SCREEN_SPEC_SUCCESS | 画面仕様更新成功 |
UPDATE_SCREEN_SPEC_FAILED | 画面仕様更新失敗 |
FROM_PLAN_ANALYZE_SUCCESS | from-plan 画面構成分析成功 |
FROM_PLAN_ANALYZE_FAILED | from-plan 画面構成分析失敗 |
FROM_PLAN_GENERATE_SUCCESS | from-plan 画面仕様生成成功 |
FROM_PLAN_GENERATE_FAILED | from-plan 画面仕様生成失敗 |
SYNC_ANALYZE_SUCCESS | from-plan ソース同期分析成功 |
SYNC_ANALYZE_FAILED | from-plan ソース同期分析失敗 |
/dev-context を案内して終了するdocs/dev/screen-specs/ が存在しない場合は自動作成する$(git rev-parse --show-toplevel) でルートを取得)tmp/screen-spec/)経由references/screen-spec-format.md — 画面仕様ドキュメントの出力フォーマット定義references/explore-routes-prompt-template.md — Phase 1: ルーティング探索用プロンプトテンプレートreferences/explore-pages-prompt-template.md — Phase 1: ページコンポーネント探索用プロンプトテンプレートreferences/generate-prompt-template.md — Phase 3: 画面仕様ファイル生成用プロンプトテンプレートreferences/diff-analyze-prompt-template.md — 差分更新 Phase 2: 変更分析用プロンプトテンプレートreferences/diff-update-prompt-template.md — 差分更新 Phase 3: 画面仕様更新用プロンプトテンプレートreferences/from-plan-analyze-prompt-template.md — from-plan Phase 2: 画面構成分析用プロンプトテンプレートreferences/from-plan-generate-prompt-template.md — from-plan Phase 4: 画面仕様ファイル生成用プロンプトテンプレート