diff --git a/.claude/skills/creating-visual-explainers/SKILL.md b/.claude/skills/creating-visual-explainers/SKILL.md index ab0010c..d31b627 100644 --- a/.claude/skills/creating-visual-explainers/SKILL.md +++ b/.claude/skills/creating-visual-explainers/SKILL.md @@ -93,8 +93,6 @@ node --version 以下のスクリプトを**実行する**（中身を読む必要はない）。 -**重要: 第1引数には図解本体のファイル（`output/{スラッグ}.html`）を指定する。`output/index.html`（サンプル一覧）ではない。** - **macOS / Git Bash（Windows）の場合:** ```bash diff --git a/.claude/skills/creating-visual-explainers/references/node-install-guide.md b/.claude/skills/creating-visual-explainers/references/node-install-guide.md index 857b8d9..7e4bf23 100644 --- a/.claude/skills/creating-visual-explainers/references/node-install-guide.md +++ b/.claude/skills/creating-visual-explainers/references/node-install-guide.md @@ -6,7 +6,7 @@ SKILL.md の Step 5 で Node.js が未インストールだった場合に参照 以下をユーザーに伝え、インストールの許可を求める: -> 図解の作成は完了しました。`output/index.html` をブラウザにドラッグ＆ドロップすれば、今すぐ確認できます。 +> 図解の作成は完了しました。`output/` フォルダ内の HTML ファイルをブラウザにドラッグ＆ドロップすれば、今すぐ確認できます。 > > URLで公開するには「Node.js」のインストールが必要です。 > Node.js は、パソコン上でプログラムを動かすための土台で、世界中で使われている安全な道具です。 @@ -14,7 +14,7 @@ SKILL.md の Step 5 で Node.js が未インストールだった場合に参照 > > 今からインストールしてもよいですか？ -ユーザーが許可しなかった場合 → ファイルの確認方法（`output/index.html` をブラウザで開く）を伝えて終了。 +ユーザーが許可しなかった場合 → ファイルの確認方法（生成された HTML ファイルをブラウザで開く）を伝えて終了。 ## macOS の場合 diff --git a/.claude/skills/creating-visual-explainers/scripts/deploy-diagram.sh b/.claude/skills/creating-visual-explainers/scripts/deploy-diagram.sh index 25df023..636cf5f 100644 --- a/.claude/skills/creating-visual-explainers/scripts/deploy-diagram.sh +++ b/.claude/skills/creating-visual-explainers/scripts/deploy-diagram.sh @@ -1,7 +1,7 @@ #!/bin/bash set -e -HTML_FILE="${1:-output/index.html}" +HTML_FILE="${1:?使い方: deploy-diagram.sh [スラッグ]}" SLUG="${2:-}" GREEN='\033[0;32m' diff --git a/.gitignore b/.gitignore index ecbc70c..2431bdc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,2 @@ output/*.html -!output/index.html -!output/git.html -!output/llm.html -!output/cursor.html deploy-history.log diff --git a/README.md b/README.md index c0a4913..f2c3501 100644 --- a/README.md +++ b/README.md @@ -12,9 +12,9 @@ ## まず見てみる -`output/index.html` が図解ライブラリ（一覧ページ）です。 -ブラウザ（Chrome、Safari など）にドラッグ＆ドロップして開いてみてください。 -サンプルの図解が 3 つ入っているので、完成品のイメージがわかります。 +`output/sample/` フォルダにお手本の図解が 3 つ入っています。 +どれかひとつをブラウザ（Chrome、Safari など）にドラッグ＆ドロップして開いてみてください。 +完成品のイメージがわかります。 - **Gitの仕組み** — 開発の土台になるバージョン管理ツール - **LLM（大規模言語モデル）の仕組み** — AI 時代の中核技術 @@ -56,8 +56,7 @@ APIについて図解して AI が図解を作り、`output/` フォルダに保存します。 完成すると自動でブラウザが開きます。 -作った図解は上書きされず、どんどん溜まっていきます。 -`output/index.html`（図解ライブラリ）を開けば、過去の図解を一覧で確認できます。 +作った図解は上書きされず、`output/` フォルダにどんどん溜まっていきます。 ## 使い方の例 @@ -99,7 +98,7 @@ URL を発行して他の人にも共有したい場合は、以下の 2 つが ``` 手元で見るだけ → 準備不要 - output/index.html をブラウザで開くだけ + output/ 内の HTML をブラウザで開くだけ URL で共有する → Node.js + Surge が必要 初回だけセットアップが必要（AI が案内します） @@ -152,8 +151,11 @@ AI-Driven School 運営が動作確認済みですので、安心してくださ ├── .claude/skills/creating-visual-explainers/ ← AI への指示書（通常は非表示） ├── README.md ← この説明書 └── output/ ← 図解の保存先 - ├── index.html ← 一覧ページ（自動生成） - └── ○○.html ← 個別の図解（どんどん増える） + ├── sample/ ← お手本の図解（3つ） + │ ├── cursor.html + │ ├── git.html + │ └── llm.html + └── ○○.html ← 自分で作った図解（どんどん増える） ``` 「.claude」で始まるフォルダは通常は非表示です。表示されなくても問題ありません。 @@ -162,7 +164,8 @@ AI がすべて自動で処理します。 | ファイル / フォルダ | 説明 | 触る必要 | |---|---|---| -| `output/` | 図解ライブラリ。`index.html` で一覧、各図解は個別ファイル | 見るだけ | +| `output/` | 図解の保存先。`sample/` にお手本、自分で作った図解は直下に保存される | 見るだけ | +| `output/sample/` | お手本の図解3つ（Git・LLM・Cursor） | 見るだけ | | `README.md` | この説明書 | 読むだけ | | `.claude/skills/` | AI への指示書とテンプレート。AI が自動で読み込みます（通常は非表示） | なし | diff --git a/output/.gitkeep b/output/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/output/index.html b/output/index.html deleted file mode 100644 index ad50a95..0000000 --- a/output/index.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - - - 図解ライブラリ - - - - - - - - -
-
-

図解ライブラリ

-

チャット欄で「○○を図解して」と依頼すると、ここに追加されます

-
- -
- -

Gitの仕組み

-

Gitの仕組みを、身近なたとえとビジュアルでわかりやすく図解します。

- - -

LLM（大規模言語モデル）の仕組み

-

LLMの仕組みを、身近な例とビジュアルでわかりやすく図解します。

- - -

Cursorの仕組み

-

AIが組み込まれたコードエディタ「Cursor」の仕組みを、身近な例とビジュアルでわかりやすく図解します。

- -
- -
-

こんなことを聞いてみよう

-
-
「API とは何か、図解して」
-
「Git の rebase と merge の違いを図解して」
-
「クラウドとは何か、図解して」
-
「KPI と KGI の違いを図解して」
-
「HTML と CSS の関係を図解して」
-
「UI と UX の違いを図解して」
-
-
-
- - - diff --git a/output/cursor.html b/output/sample/cursor.html similarity index 100% rename from output/cursor.html rename to output/sample/cursor.html diff --git a/output/git.html b/output/sample/git.html similarity index 100% rename from output/git.html rename to output/sample/git.html diff --git a/output/llm.html b/output/sample/llm.html similarity index 100% rename from output/llm.html rename to output/sample/llm.html