ビジネスユーザに利用してもらうために、コンテナで実行されるSkillを作成して、Claude Code PluginをMarketplaceで配布する

mkdir -p sample-claude-plugin
cd sample-claude-plugin

sample-claude-plugin
└── sample-image-files
    ├── after_sample_01.jpg
    ├── after_sample_02.jpg
    ├── origin_sample_01.jpg
    └── origin_sample_02.jpg

claude

> skillを作成したいです。

## 作成するskillの説明

作成するskillは以下の処理を実施します。

- 与えられた画像から人物を切り出す
- 背景を #e1e1e1 に塗り潰す
- 顔周辺が統一されたサイズになるようリサイズ（正解画像を参考に）
- 明るさを標準化します（正解画像を参考に）
- 顔の位置を調整します（正解画像を参考に）

参考としてサンプルの入力画像と、正解の処理結果の画像を与えます。

入出力としてはフォルダ単位、ファイル単位の双方に対応します。スキル実行前にユーザに確認を求めるようなスキルにします。

## skill実行環境について

ユーザに開発者向けのソフトウェアのインストールをさせるのを最小限にとどめるため、Dockerコンテナを実行環境とします。

必要なコンテナ実行環境がわかるように、Skill作成にDockerfileを作成し、ユーザ実行時はコンテナをビルドしてその中でPythonなどを実行しましょう。

もしユーザがコンテナ実行環境を持っていないように見える場合は、Rancher Desktopなどをユーザにインストールするよう促すskillにします。

sample-claude-plugin
+ ├── profile-photo-processor
+ │   ├── Dockerfile
+ │   ├── process_photo.py
+ │   ├── requirements.txt
+ │   └── SKILL.md
  └── sample-image-files
      ├── after_sample_01.jpg
      ├── after_sample_02.jpg
      ├── origin_sample_01.jpg
      └── origin_sample_02.jpg

> 顔の部分が白すぎます、あと顔のサイズが小さすぎると思います。
> あと明るさの調整が明るすぎます。正解画像をチェックしてください。

> 背景切り出しが少し荒いようです。もう少し細かくしましょう。正解画像を確認してください。

> 作成したskillをpluginとして配布したいです。以下に従ってpluginにしてください。

- https://github.com/anthropics/skills

sample-claude-plugin
+ ├── .claude-plugin
+ │   └── marketplace.json
  ├── profile-photo-processor
  │   ├── Dockerfile
  │   ├── process_photo.py
  │   ├── requirements.txt
  │   └── SKILL.md
  └── sample-image-files
      ├── .gitignore
      ├── after_sample_01.jpg
      ├── after_sample_02.jpg
      ├── origin_sample_01.jpg
      └── origin_sample_02.jpg

{
  "name": "profile-photo-skills",
  "owner": {
    "name": "Your Name",
    "email": "your-email@example.com"
  },
  "metadata": {
    "description": "Profile photo processing skills for standardizing profile photos",
    "version": "1.0.0"
  },
  "plugins": [
    {
      "name": "profile-photo-processor",
      "description": "Process profile photos: remove background, standardize face position/size, and apply gray background (#e1e1e1). Supports batch processing.",
      "source": "./",
      "strict": false,
      "skills": [
        "./profile-photo-processor"
      ]
    }
  ]
}

mkdir -p sample-use-profile-processor
cd sample-use-profile-processor

sample-use-profile-processor
├── origin_sample_01.jpg
└── origin_sample_02.jpg

claude

❯ /plugin marketplace add cm-nakamura-shogo/sample-claude-plugin 
  ⎿  Successfully added marketplace: profile-photo-skills

❯ /plugin install profile-photo-processor@profile-photo-skills 
─────────────────────────────────────────
 Plugins  Discover   Installed   Marketplaces  (←/→ or tab to cycle)

 Plugin Details

 profile-photo-processor

 Process profile photos: remove background, standardize face position/size, and apply gray background (#e1e1e1). Supports batch processing.

 Will install:
 • Components will be discovered at installation

 ⚠Make sure you trust a plugin before installing, updating, or using it. Anthropic does not control what MCP servers, files, or other software are included in plugins and 
  cannot verify that they will work as intended or that they won't change. See each plugin's homepage for more information.

 > Install for you (user scope)
   Install for all collaborators on this repository (project scope)
   Install for you, in this repo only (local scope)
   Back to plugin list

  Enter to select · escape to back

❯ /plugin install profile-photo-processor@profile-photo-skills 
  ⎿  ✓ Installed profile-photo-processor. Restart Claude Code to load new plugins.

> /exit

claude

> /skills
─────────────────────────────────────────
Skills
14 skills

User skills (~/.claude/skills, ~/.claude/commands)

（省略）

Plugin skills (plugin)
profile-photo-processor • ~30 tokens

> /profile-photo-processor

⏺ Profile Photo Processor

  プロフィール写真を標準化するスキルを実行します。

  まず、Docker環境を確認させてください。

⏺ Bash(docker --version)
  ⎿  Docker version 28.1.1-rd, build 4d7f01e

⏺ Bash(docker ps 2>&1)
  ⎿ CONTAINER ID   IMAGE                        COMMAND                  CREATED        STATUS        PORTS     NAMES                                                              
    b7e1d41736f6   8f80de43fbfe                 "/entrypoint.sh --gl…"   19 hours ago   Up 19 hours
    k8s_traefik_traefik-c98fdf6fb-542s4_kube-system_c002d80d-4d8e-4b0a-b6
    b4-c1e18c7aaf72_14
    … +20 lines (ctrl+o to expand)

⏺ Docker環境が正常に動作しています（Rancher Desktop使用中）。

  処理を開始する前に、以下を教えてください：

  1. 入力ファイル/フォルダのパス - 処理したいプロフィール写真のパス
  2. 出力先のパス - 処理後の画像を保存する場所

  これらの情報をお知らせください。

❯ カレントパスが入力フォルダのパスです 

⏺ 2枚の画像ファイルが見つかりました。出力先を確認させてください。

─────────────────────────────────────────
 ☐ 出力先 

出力先のフォルダをどこにしますか？

❯ 1. 同じフォルダ内に output/ を作成
     ~/repo/myapp/sample-photo-profile/output/
  2. 同じフォルダに上書き
     元のファイルを処理後の画像で置き換えます
  3. Type something.

⏺ User answered Claude's questions:
  ⎿  · 出力先のフォルダをどこにしますか？ → 同じフォルダ内に output/ を作成

⏺ 以下の内容でプロフィール写真を処理します：
  ┌──────────┬───────────────────────────────────────────────────────────────┐
  │   項目   │                             内容                              │
  ├──────────┼───────────────────────────────────────────────────────────────┤
  │ 入力     │ ~/repo/myapp/sample-photo-profile/        │
  ├──────────┼───────────────────────────────────────────────────────────────┤
  │ 出力     │ ~/repo/myapp/sample-photo-profile/output/ │
  ├──────────┼───────────────────────────────────────────────────────────────┤
  │ 処理対象 │ 2枚（origin_sample_01.jpg, origin_sample_02.jpg）             │
  └──────────┴───────────────────────────────────────────────────────────────┘
  処理内容：
  - 背景を #e1e1e1 に置換
  - 顔の位置・サイズを標準化
  - 出力サイズ: 2160 x 3840 px

  実行してよろしいですか？

❯ はい、お願いします。 

⏺ 処理を開始します。

⏺ Bash(mkdir -p ~/repo/myapp/sample-photo-profile/output)
  ⎿  (No content)

⏺ Bash(cd ~/.claude/plugins/cache/profile-photo-skills/profile-photo-processor/c47b58ca02c1/profile-photo-processor && docker build -t profile-phot…) timeout: 5m 0s
  ⎿  #0 building with "rancher-desktop" instance using docker driver             

     #1 [internal] load build definition from Dockerfile
     … +41 lines (ctrl+o to expand)
  ⎿  Shell cwd was reset to ~/repo/myapp/sample-photo-profile

⏺ Dockerイメージのビルドが完了しました。画像処理を実行します。

⏺ Bash(docker run --rm \                                                         timeout: 5m 0s
        -v "~/repo/myapp/sample-photo-profile:/input:ro" \…)
  ⎿  背景除去モデルを初期化中...  
     初期化完了
     … +9 lines (ctrl+o to expand)

⏺ 処理が完了しました。結果を確認します。

⏺ Bash(ls -la ~/repo/myapp/sample-photo-profile/output/)
  ⎿  total 3536                                                 
     drwxr-xr-x@ 4 nakamura.shogo  staff     128 Jan 11 17:35 .
     drwxr-xr-x  6 nakamura.shogo  staff     192 Jan 11 17:35 ..
     … +2 lines (ctrl+o to expand)

⏺ 処理が完了しました。

  結果
  ┌────────────────────────────────┬────────┐
  │            ファイル            │ サイズ │
  ├────────────────────────────────┼────────┤
  │ origin_sample_01_processed.jpg │ 879 KB │
  ├────────────────────────────────┼────────┤
  │ origin_sample_02_processed.jpg │ 929 KB │
  └────────────────────────────────┴────────┘
  出力先: ~/repo/myapp/sample-photo-profile/output/

  両方の画像で顔が正常に検出され、以下の処理が適用されました：
  - 背景を #e1e1e1（グレー）に置換
  - 顔の位置・サイズを標準化
  - 出力サイズ: 2160 x 3840 px

  出力フォルダの画像をご確認ください。

sample-use-profile-processor
├── origin_sample_01.jpg
├── origin_sample_02.jpg
└── output
    ├── origin_sample_01_processed.jpg
    └── origin_sample_02_processed.jpg