add-image

Imported from aetos382/astro-site (.claude/skills/add-image/SKILL.md). Install upstream with npx skills add aetos382/astro-site --skill add-image. Copyright stays with the author.

記事に画像を追加する

引数: $ARGUMENTS

• 既存の記事:

!ls "${CLAUDE_PROJECT_DIR}/src/content/blog"

手順

ツール呼び出しは、下の node コマンド 1 回だけで済ませる。画像を Read したり、確認のためにコマンドを実行したりしない。

1. 引数を解釈する。

   • 1 つ目を slug、2 つ目を名前とする。名前は拡張子なしの小文字の kebab-case にする（拡張子は入力の形式から決まる）。
   • slug が上の既存の記事の一覧にない場合は、実行せずに、既存の記事の一覧を示して slug を指定し直すようユーザーに伝えて終わる。似た slug があっても、自分で読み替えない。
   • --max-width <px> があれば、スクリプトにそのまま渡す。
   • 残りの引数があれば、それを入力画像のパスとする。

2. 入力画像を決める。

   • パスが指定されていれば、それを使う。
   • パスがなければ、このメッセージに添付された画像を使う。添付された画像の保存先のパスは、メッセージ中の [Image: source: <パス>, original …] の、source: の後から最初の , の前まで。
   • 添付が 2 つ以上ある場合、またはパスも添付もない場合は、実行せずにその旨を報告して終わる。

3. 次のコマンドを実行する。引数はシングル クォートで囲み、引数中の ' は '\'' にする。

   node ${CLAUDE_SKILL_DIR}/optimize-image.mjs '<入力画像のパス>' '<slug>' '<名前>' [--max-width <px>]

4. 結果を報告する。

   • 成功した場合: 出力先のパス、縮小前後の寸法とファイル サイズ、本文に貼る macro の行（代替テキストはユーザーが入れる）を報告する。warnings があれば、その内容も伝える。出力が入力より大きくなった場合は、元の画像がすでに最適化済みの可能性があることを添える。
   • 失敗した場合: エラー メッセージをそのまま伝える。同名のファイルがある、記事がない、非対応の形式である、などの場合は、引数を変えて再実行するようユーザーに伝える。自分で名前を変えて再実行しない。

補足

• 本文の画像は Astro の最適化を通らないため、このスキルで事前に最適化する。既定の最大幅は、本文の幅（720px）の 2 倍の 1440px。拡大はしない。
• ヒーロー画像（:hero-image:）にはこのスキルを使わない。ヒーロー画像は schema の image() を通り、Astro が最適化する。
• 対応形式は JPEG・PNG・WebP・AVIF で、形式は変えない。アニメーション画像には対応しない。PNG は色数を減らして圧縮する（スクリーンショット向け）。
• EXIF などのメタデータ（位置情報を含む）は除く。回転の情報は、除く前に画素へ反映する。
• 記事の images/.gitkeep は、画像を置いた時点で不要になるので削除する。