extract-snippet

既存のプロジェクトコードから snippet を新規作成する skill。

トリガー

ユーザが「このコードを snippet にしたい」「テンプレート化したい」など、既存コードから snippet を切り出したい場合に使用する。

手順

1. ユーザに snippet として切り出したいコードの範囲を確認する

- 対象ファイル・ディレクトリ - snippet の名前 - snippet の用途・説明

1. 指定されたソースコードをプロジェクト全体から網羅的に探す

- 関連ファイル（型定義、テスト、設定ファイル等）も含めて収集する

1. プロジェクト固有の情報を特定し、variable として切り出すか削除する

- プロジェクト名、パッケージ名 → {{ project-name }} 等の変数に置換 - 固有のパス、URL → 変数化 - ハードコードされた設定値 → 変数化（default 値を元の値に設定）

1. .mir/ の管理方針をユーザに確認する:

- チームで共有する: .mir/ を git に含める - 自分だけ使う: .mir/ を git に含めない（private-mir skill を案内）

1. mir create <name> で snippet の雛形を作成する

``bash npx mir create <name> ``

1. テンプレートファイルを .mir/snippets/<name>/ に配置する

- Handlebars テンプレート構文で変数部分を置換 - ファイル名にも変数を使用（例: {{ kebabCase name }}.ts） - テンプレートヘルパーを活用（camelCase, pascalCase, kebabCase 等）

1. .mir/snippets/<name>.yaml に変数定義を記述する

- 各変数に description, schema (type, default, enum), suggests を設定 - 他の変数から派生する値は default にテンプレート式を使う（例: default: "{{ replace packageDir '/' '.' }}") - 利用可能なヘルパー: lowercase, uppercase, capitalize, uncapitalize, camelCase, pascalCase, snakeCase, kebabCase, dotCase, pathCase, replace, concat, slice, trim, contains, startsWith, endsWith, length

1. snippet 定義 YAML の末尾に保守用コメントを追加する

- 各テンプレートファイルの元となったファイルパスを記録する - snippet の意図や設計判断の経緯を残す - 例: ``yaml # 参考にしたファイル # <name>/component.tsx ... from src/components/Button.tsx # <name>/styles.css ... from src/styles/button.css # # 設計メモ # - コンポーネント名を変数化して再利用可能にした ``

1. mir sync <name> で変数定義を同期する

``bash npx mir sync <name> ``

1. 動作確認: 一時ディレクトリにインストールして展開結果を確認する

``bash npx mir install <name> --out-dir=/tmp/mir-test-<name> ``

注意事項

• プロジェクト固有の import パスやモジュール名は必ず変数化する
• テンプレートヘルパーを使い、命名規則の変換を自動化する
• 元のコードが動作する状態を保つ（生成されたコードがそのままビルド・実行できること）
• snippet 名は英数字とハイフンのみ (^[a-zA-Z0-9][a-zA-Z0-9-]*$)