plz

English | 한국어 | 日本語 | 简体中文

codekongdev が公開している、Claude Code と Codex 向けの AI コーディングエージェント用スキル集です。最初のスキル plz-3d-explain は、あらゆる技術的な概念を、操作しながら学べる 3D 学習ページにします。

plz-<task> という名前には、エージェントに「この作業をお願い」と頼む意味を込めています。

ライブデモ · インストール · 使い方 · スキル一覧

![works with Claude Code

Codex](https://img.shields.io/badge/works%20with-Claude%20Code%20%7C%20Codex-0a0a0a.svg?labelColor=000000)

上部に OS サンドボックスの 3D モデル、下部に解説を表示したスマートフォン画面

デスクトップ: 韓国語デモの第 4 章。コンテナはプロセスを分離しますが、ホストのカーネルは共有します。スマートフォン: 第 8 章の OS サンドボックス。英語版のデモは下のスキル一覧にあります。

https://github.com/user-attachments/assets/eb09c80d-4260-46b4-ae61-092b9f979167

次のような一文の依頼で始められます。上のデモは、こうしたテーマの一つを扱っています。例は英語ですが、日本語で依頼しても構いません。

Explain how an AI agent code sandbox works in 3D.

インストール

npx skills でインストールするには、Node.js 22.20 以降（npm と npx を含む）、Git、利用する Claude Code または Codex が必要です。まずターミナルで確認してください。

node --version
npm --version
git --version

利用するエージェントに対応するコマンドを実行します。以下は plz-3d-explain をグローバルにインストールし、複数のプロジェクトで使えるようにするコマンドです。

Claude Code:

npx skills add codekongdev/plz --skill plz-3d-explain -a claude-code -g

Codex:

npx skills add codekongdev/plz --skill plz-3d-explain -a codex -g

一つのプロジェクトだけにインストールする場合は、そのプロジェクトのディレクトリで上のコマンドから -g を外して実行します。Claude Code は .claude/skills/、Codex は .agents/skills/ を使用します。インストーラーが確認を求めたら、案内に従ってください。

利用するエージェントのインストール済みスキルを確認します。

npx skills list -g -a claude-code
npx skills list -g -a codex

対応する一覧に plz-3d-explain があればインストールできています。プロジェクトだけにインストールした場合は、同じプロジェクトのディレクトリで一覧コマンドからも -g を外してください。

スキルの一覧表示、すべてインストール

利用できるスキルを一覧表示します。 ```sh npx skills add codekongdev/plz -l ``` すべてのスキルをグローバルにインストールします。エージェントの選択を求められたら、利用するツールを選んでください。 ```sh npx skills add codekongdev/plz --skill '*' -g ```

手動インストール（Claude Code）

Claude Code に手動でインストールする場合は、リポジトリを clone し、`skills/plz-3d-explain` を `~/.claude/skills/plz-3d-explain` にコピーするか、シンボリックリンクを作成します。コピーする場合のコマンドは次のとおりです。 ```sh git clone https://github.com/codekongdev/plz.git mkdir -p ~/.claude/skills cp -R plz/skills/plz-3d-explain ~/.claude/skills/plz-3d-explain ```

skills.sh の plz-3d-explain ページも参照できます。

使い方

ページを作成するプロジェクトで、エージェントの新しいセッションを開始します。スキルを明示して依頼できます。

Claude Code: /plz-3d-explain コンテナの分離がどのように働くのかを 3D で解説して。
Codex: $plz-3d-explain コンテナの分離がどのように働くのかを 3D で解説して。

普段の言葉で依頼することもできます。

「コンテナの分離がどのように働くのかを 3D で解説して。」
「TCP ハンドシェイクの流れを 3D モデルで見せて。」

英語、韓国語、簡体字中国語で依頼することもでき、ページは依頼した言語で作成されます。

スキルが見つからない場合は、上の一覧コマンドでエージェントとインストール範囲を確認し、新しいセッションを開始してください。プロジェクトだけにインストールしたスキルは、そのプロジェクトで使います。npx が見つからない場合や Node.js のバージョンエラーが出た場合は、上の要件を確認してください。

動作の流れ

ページを依頼すると、plz-3d-explain は次の 4 ステップで作業します。

素材の確認。 題材やリポジトリの内容を確認し、出典と確認日を記録して、未確認の内容はその旨を明示します。
章の設計。 ページで扱う章を設計し、章ごとにモデル上で原因と結果を見せる動作を決めます。
テンプレートへの記入。 テンプレートに文章とシーンを記入します。出力はビルド不要の単一 HTML ファイルです。
ブラウザでの検証。 完成したページで、コンソールエラー、ラベルの重なりやはみ出し、横方向のスクロール、自動再生、タッチ操作を確認します。

対象範囲と動作要件

向いていること: 技術的な概念、仕組み、システム構成を 3D モデルで学ぶこと。
対象外: 静的なアーキテクチャ図やシーケンス図、データのグラフ、Blender によるモデリング、製品のランディングページ、アプリの UI デザイン。
ページを開くとき: three.js r170 と Web フォントを CDN から読み込むため、インターネット接続が必要です。
ページを作成するとき: ローカル HTTP サーバー（スキルの例では Python 3）と、エージェントが使える Playwright などのブラウザ自動化ツールが必要です。

スキルのインストールでは Python やブラウザ自動化ツールはインストールされません。ツールがない場合は、検証前にエージェントに準備を依頼してください。HTML が生成されてもブラウザ検証に合格したとは限らないため、結果の報告で実施した検証を確認してください。

詳しくはスキルの READMEを参照してください。

スキル一覧

スキル	作成するもの	デモ
plz-3d-explain	技術的な概念やシステム構成を three.js の 3D モデルで学べる、単一 HTML ファイルの学習ページ。	コードサンドボックス（英語） · 韓国語
plz-setup-issues	GitHub リポジトリの Issue ラベル、バグ・機能リクエストフォーム、トリアージ規則を設定します。	—
plz-quiz	資料にもとづくクイズで学習し、理解度を確認して間違いを復習します。	—

コントリビュート

コントリビュートや翻訳を歓迎します。詳しくは CONTRIBUTING.md を参照してください。

ライセンス

MIT。

This site is open source. Improve this page.