wheresryan22/anatomy

これは何？

主な機能

• 01技術的な概念を、等角投影図で描かれた物理的な機械に置き換えます。
• 024段階の陰影とリアルタイム表示を備えたSVG図を生成します。
• 03炎・水・光・蒸気向けのWebGLシェーダーレイヤーを追加します。
• 04可動部品を毎フレーム再描画するベータ版の3Dモードを利用できます。
• 05単体で動作するHTML、SVGファイル単体、またはReact/Next.jsコンポーネントとして出力できます。
• 06ジオメトリ監査とヘッドレスChromeによるスクリーンショットチェックを実行します。

ユースケース

• 技術ドキュメントやブログ記事向けの解説イラストを作成する。
• ランディングページやコース向けのインタラクティブな解説コンテンツを作る。
• レートリミッターやコネクションプールなど、システムの仕組みを図解する。
• プロセスを可視化するReactコンポーネントをNext.jsサイトに埋め込む。

トピック

よくある質問

anatomy とは？

技術的な概念を説明する、機械のインタラクティブな等角投影イラストを生成するClaude Agent Skillです。 Anatomyは、技術的な概念を、仕組みがその概念を反映した物理的なオブジェクトに置き換えて説明するようClaudeに依頼し、それを等角投影図として描くエージェントスキルです。たとえば、変更がなければ処理をスキップするキャッシュキーは、すべてのピンが一致したときだけ回るピンタンブラー錠として表現できます。出力は、タイトル、ヒント、リアルタイム表示を備えた枠付きカードの中に、小さな陰影付きパーツを多数配置したもので、ポインターとキーボードの入力に反応します。

anatomy は無料で使えますか？ライセンスは？

anatomy は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

anatomy は今もメンテナンスされていますか？

活発にメンテナンス中。anatomy の最終コミットは 2026年10月15日 です。

anatomy は何に使えますか？

技術ドキュメントやブログ記事向けの解説イラストを作成する。 ランディングページやコース向けのインタラクティブな解説コンテンツを作る。 レートリミッターやコネクションプールなど、システムの仕組みを図解する。 プロセスを可視化するReactコンポーネントをNext.jsサイトに埋め込む。

anatomy はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/wheresryan22/anatomy