| name | imgedit-sharp |
| license | MIT |
| description | 既存の画像ファイル（写真・スクリーンショット・バナー・アイコン等）を編集・変換する作業全般で使用する。 対象操作: リサイズ／サムネイル化（幅や px 指定、「縮小」「小さくする」も含む）、切り抜き（crop）、 回転・反転、フォーマット変換（PNG/JPEG/WebP/AVIF/GIF/TIFF 間、例: tiff→png、png→jpg）、 圧縮・軽量化（ファイルサイズを落とす、重い画像を小さくする）、ロゴ/透かしの合成、色調・明るさ調整、 そしてスクリーンショットへの注釈（赤枠・矢印・ハイライトで特定領域を囲む、バグ報告用画像の作成）。 ユーザーが具体的な画像ファイルパスや「この画像」「このスクリーンショット」を指しつつ、上記のような変更を求めたら （日本語・英語問わず、"resize" "crop" "rotate" "compress" "shrink" "convert to webp/png/jpg" のような表現でも）発動する。 画像の新規生成（イラスト・写真風ビジュアルをゼロから作る）は対象外で delegate-imagegen を使う。 チャート/グラフを SVG から新規生成してラスタライズする場合は dataviz-svg を使う。
|
| allowed-tools | Bash(bash .claude/skills/imgedit-sharp/scripts/edit-image.sh:*) |
imgedit-sharp
既存画像の加工・編集を JSON spec で宣言し、同梱の sharp（libvips の WebAssembly ビルド）で実行する。
scripts/vendor/ に sharp の wasm32 ビルドを同梱しており、追加インストール不要・オフラインで動作する。native binary を含まないため platform 非依存。
本スキルの独自コードは MIT ライセンスで提供する。同梱する third-party runtime asset のライセンスは THIRD_PARTY_NOTICES.md を参照する。
前提条件
- Node.js >= 23.6（TypeScript を追加ツールなしで直接実行するため）
実行フロー
1. 加工要件を把握する
ユーザーの要求から以下を確認する:
- 入力画像のパスとフォーマット（不明なら
--info で確認する）
- 必要な操作（resize / crop / rotate / 合成 / 色調 / フォーマット変換）と順序
- 出力パスと出力フォーマット（拡張子から自動判定される）
入力画像の実寸が必要な場合（crop 座標の決定等）は先にメタデータを取得する:
bash .claude/skills/imgedit-sharp/scripts/edit-image.sh --info <image>
2. 編集 spec (JSON) を書く
操作パイプラインを JSON で記述し、ファイルとして保存する（一時的な spec は .temp/ 配下に置く）:
{
"input": "screenshot.png",
"output": "assets/hero.webp",
"ops": [
{ "type": "crop", "left": 0, "top": 80, "width": 1200, "height": 630 },
{ "type": "resize", "width": 800 },
{ "type": "format", "format": "webp", "quality": 80 }
]
}
input / output のパスは 実行時の cwd 基準で解決される（絶対パスも可）ops は先頭から順に適用されるformat op を省略した場合、出力フォーマットは output の拡張子から自動判定される- 出力ディレクトリは自動作成される
3. 実行する
Claude Code では:
bash .claude/skills/imgedit-sharp/scripts/edit-image.sh <spec.json>
Codex では:
bash .agents/skills/imgedit-sharp/scripts/edit-image.sh <spec.json>
成功時は Image written: <output> (<format> <width>x<height>, <bytes> bytes) が出力される。
exit code: 2 = spec の形式エラー（メッセージに従って spec を修正）、1 = 画像処理エラー（sharp のエラーメッセージを確認）、3 = Node.js バージョン不足。
allowed-tools は Claude Code 向けの権限指定であり、Codex では本文の実行例に従って実行する。
4. 結果を確認する
出力の寸法・サイズを確認し、必要に応じて spec を調整して再実行する:
bash .claude/skills/imgedit-sharp/scripts/edit-image.sh --info <output>
ops リファレンス
| op | 主なパラメータ | 説明 |
|---|
resize | width, height, fit (cover/contain/fill/inside/outside), background, withoutEnlargement | リサイズ。片方だけ指定でアスペクト比維持 |
crop / extract | left, top, width, height（すべて必須） | 矩形の切り抜き |
rotate | angle, background | 回転。90 の倍数以外は background で余白色を指定 |
flip / flop | - | 上下反転 / 左右反転 |
extend | top, bottom, left, right, background | 余白の追加（パディング） |
trim | threshold | 縁の単色領域を自動トリム |
flatten | background | アルファチャンネルを背景色に合成 |
grayscale | - | グレースケール化 |
negate | - | 色反転 |
blur | sigma (0.3-1000) | ガウスぼかし |
sharpen | sigma | シャープ化 |
tint | color（必須） | 色調を指定色に寄せる |
modulate | brightness, saturation, hue, lightness | 明度・彩度・色相の調整（1.0 が等倍） |
composite | input（必須）, gravity または left + top, blend | 画像の合成（透かし・ロゴ等）。input は画像パス（SVG も可） |
format | format（必須: jpeg/png/webp/avif/gif/tiff）, quality, lossless, compressionLevel, effort, progressive | 出力フォーマットとエンコードオプションの明示指定 |
色（background / color）は CSS 色文字列（"#rrggbb", "rgba(0,0,0,0.5)", "white" 等）で指定する。
よく使う spec 例
サムネイル生成（アスペクト比を保って収める）:
{
"input": "photo.jpg",
"output": "thumb.webp",
"ops": [{ "type": "resize", "width": 320, "height": 320, "fit": "inside" }]
}
透かしを右下に合成:
{
"input": "photo.jpg",
"output": "out.jpg",
"ops": [{ "type": "composite", "input": "logo.png", "gravity": "southeast" }]
}
PNG スクリーンショットの軽量化（AVIF 化）:
{
"input": "screenshot.png",
"output": "screenshot.avif",
"ops": [{ "type": "format", "format": "avif", "quality": 60 }]
}
特定領域を赤枠で囲んで強調（スクリーンショット注釈）:
枠線だけの SVG（fill="none"）を作り、composite で座標指定して重ねる。囲みたい領域の座標が不明な場合は先に --info で画像寸法を確認する。
<svg xmlns="http://www.w3.org/2000/svg" width="208" height="208">
<rect x="2" y="2" width="204" height="204" fill="none" stroke="red" stroke-width="4" rx="6"/>
</svg>
{
"input": "screenshot.png",
"output": "annotated.png",
"ops": [{ "type": "composite", "input": "red-box.svg", "left": 96, "top": 46 }]
}
- SVG の
stroke は辺の中心線に描かれるため、キャンバスを stroke-width ぶん大きめに取り、x/y を stroke-width / 2 オフセットするとはみ出さない
- 同じ要領で円囲み（
<circle>）・矢印（<line> / <path>）・注釈テキスト（<text>）も合成できる。複数箇所の注釈は、入力画像と同寸の SVG 1 枚に絶対座標で描いて left: 0, top: 0 で重ねる方が spec がシンプルになる
制約
- 操作は 1 つの sharp パイプラインに連結される。同種の操作を複数回適用する場合（例: resize → composite → resize）は spec を分けて 2 段階で実行する
- アニメーション GIF の全フレーム処理は対象外（先頭フレームのみ処理される）
- WASM 実行のため native 版 sharp より数倍遅いが、通常の画像 1 枚の処理は数十〜数百 ms で完了する
- SVG 入力のテキストはフォールバックフォントで描画される。特定フォントの再現はできず、実行時に
Fontconfig error が stderr に出るが動作に影響はない
リファレンス
設計意図・sharp wasm32 選定の経緯・vendoring 方式の詳細は references/design-plan.md を参照。
