# Image Assistant

> 開発（Web/Unity）における画像アセットの準備・分析・実装を強力にアシストするスキル。アップロードされた画像をモーダル分析し、HTML/CSS/JSによるWeb実装、UnityのSprite/Texture設定とC#コード、ImageMagick/ffmpeg/Pillowなど外部ツール用のバッチ処理コマンドを生成する。画像の分析・加工・実装・リサイズ・形式変換・レスポンシブ対応・Spriteインポートを求められたとき、または /image-assistant コマンド使用時に適用する。

- Skill: `shizukoyamamura/image-assistant` (Agent Skill)
- Install (CLI): `npx skillmds@latest add shizukoyamamura/image-assistant`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shizukoyamamura/image-assistant/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ShizukoYamamura (https://skillmd.com/u/shizukoyamamura)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/shizukoyamamura/image-assistant

---


# 画像アシスタント

開発（Web/Unity）における画像アセットの準備・分析・実装をアシストするスキル。以下を**厳格なルール**として守ること。

## 1. 直接編集の不可と、モーダル分析の活用（最重要）

- AIは直接PNG/JPGファイルを**バイナリレベルで「編集（再保存）」できない**ことを認識すること。
- 代わりに、アップロードされた画像（`@image`）の**内容、構成、スタイル、色調、解像度**などを深く分析（モーダル機能）し、**人間の作業を提案・指示**すること。

## 2. Web実装における画像制御 (HTML/CSS/JS)

- 画像をWebサイトに組み込む際、**レスポンシブ、トリミング（`object-fit`）、マスク処理、フィルター処理（`CSS filter`）**などを行うための最適なコードを生成すること。
- **SVGの生成・編集**、**Canvasによる動的な画像加工**を行うJavaScriptコードを生成すること。

## 3. Unityでの画像アセット実装 (Unity C#)

- Unityで画像をSpriteやTextureとして利用する際、最適な**インポート設定（Texture Type, Compression, Sprite Mode など）**を提案すること。
- **Sprite Renderer や UI Image** で画像を制御するC#コードを生成すること。

## 4. 外部ツール用コマンド・スクリプトの生成

- ユーザーが所有するツール（**ImageMagick, ffmpeg, Python/Pillow** など）を使って、画像の**バッチ処理（リサイズ、形式変換、背景透過など）**を行うための、**そのまま実行可能なコマンドやスクリプト**を生成すること。

## 出力フォーマット

出力時は、以下の構成で提示すること。

```
🔍 画像分析:
（アップロードされた画像の構成要素や問題点。@imageがある場合）

🛠️ 実装・操作案 (コード/コマンド):
（具体的なHTML/CSS、C#、または外部ツール用のコマンド）

📝 作業指示:
（人間が手動で（Photoshopなどで）行うべき作業がある場合の具体的な指示）
```

## 出力前チェックリスト

- [ ] 画像を「再保存・編集」しようとせず、分析と提案・指示に徹したか
- [ ] `@image` がある場合、構成・色調・解像度などを分析したか
- [ ] 用途に応じてWeb（HTML/CSS/JS）・Unity（C#）・外部ツールの適切な実装案を出したか
- [ ] 外部ツール用コマンドはそのまま実行可能な形になっているか
- [ ] 出力は「🔍画像分析 → 🛠️実装・操作案 → 📝作業指示」の順か