Repolode
投稿する
ywEdAi

ywEdAi/teachable-figures

授業の主張を、学習者が結果を予測し、原因を変え、新たな事例を説明するインタラクティブな図に変換するエージェントスキルです。

GitHub で見る公式サイト
スター
288
フォーク
38
未解決の Issue
0
最終コミット
5 日前

これは何？

Teachable figuresは、単一の因果関係に関する主張を軸に、インタラクティブな教材用の図を作成するエージェントスキルです。学習者は結果を予測し、標準コントロールで原因を変えて効果を観察し、最後に応用問題を説明します。このスキルは、主張、よくある誤解、原因、観察可能な効果、根底にある真理モデルを明記した教材仕様から始め、その後に図形とレンダラーを選びます。

このリポジトリには、スキルの手順書、2つの上流スキルをもとにしたレンダリングキット（機械的な立体と3D表示向けのAnatomy、アイソメトリックSVG向けのiso-figure）、オフラインでスタンドアロンHTMLとして動作する6つの完成済みレッスン例、ブラウザーとモデルのテストスイートが含まれています。ホストアプリケーションのレッスンスキーマに対応するほか、スタンドアロンのHTML図としても利用でき、Claude CodeまたはCodexのスキルディレクトリにインストールできます。

レッスン例では、ギア比、円錐の断面、人間の胸部の3D表示、ロケットのカットアウェイ、Transformerのattentionのデータフロー、明朝時代のローブを扱います。生成された図は教材として設計されたものであり、学習者を対象とした評価は行われていないと、プロジェクトは明記しています。

主な機能

  • 011つの教材上の主張を、「予測・試行・説明」のインタラクションに変換します。
  • 022D SVG、アイソメトリックSVG、機械のカットアウェイ、回転する3D表示向けのレンダリングキットを提供します。
  • 03標準コントロール、リセット機能、バイリンガル対応ページを備えた、オフラインで使える完成済みHTMLレッスンを6つ収録しています。
  • 04モデルとブラウザーのテストスイートに加え、3Dジオメトリの監査スクリプトも含まれています。
  • 05Claude CodeまたはCodexのスキルとしてインストールでき、通常のHTML図からも利用できます。

ユースケース

  • 入力を1つ変えると出力がどう変わるかを示す、物理や力学のインタラクティブなデモを作成する。
  • 誤解が生じやすい内容を扱う授業向けに、スタンドアロンのHTML教材図を作成する。
  • 既存の教育用Webアプリに、予測して説明するインタラクションを追加する。
  • attentionや歯車列などの抽象的なモデルを、生徒向けに可視化する方法を探る。

クイックスタート

  1. 1

    リポジトリをスキルディレクトリにクローンして、Claude Codeにインストールします

    git clone https://github.com/ywEdAi/teachable-figures.git ~/.claude/skills/teachable-figures
  2. 2

    Claude Codeを再起動し、/teachable-figures と入力して、教えたい内容を説明します

  3. 3

    必要に応じて開発用依存関係をインストールし、チェックを実行します

    npm ci

使う前に知っておきたいこと

  • メタデータにライセンスが記載されていないため、再利用条件が不明です。
  • 学習者を対象とした図の評価が行われていないため、教育効果は実証されていません。
  • 同梱されているサンプルの一部には自動再生ツアーが含まれており、レッスンに組み込む前に無効化する必要があります。
  • ブラウザのチェックには、Google Chromeのインストール、またはPlaywrightのChromium環境が必要です。

収録されている特集

Claude Code のツール・スキル・プラグインAI コーディングアシスタントとエージェントAI エージェントのスキル集オープンソースの教育・学習ツール

トピック

#agent-skill#education#interactive-learning#svg#webgl#html#claude-code#codex

よくある質問

teachable-figures とは？
授業の主張を、学習者が結果を予測し、原因を変え、新たな事例を説明するインタラクティブな図に変換するエージェントスキルです。 Teachable figuresは、単一の因果関係に関する主張を軸に、インタラクティブな教材用の図を作成するエージェントスキルです。学習者は結果を予測し、標準コントロールで原因を変えて効果を観察し、最後に応用問題を説明します。このスキルは、主張、よくある誤解、原因、観察可能な効果、根底にある真理モデルを明記した教材仕様から始め、その後に図形とレンダラーを選びます。
teachable-figures は無料で使えますか？ライセンスは？
teachable-figures にはライセンスが明記されていません。コードは公開されていますが、ライセンスがない場合は再利用の許諾がないため、利用前に作者に確認することをおすすめします。
teachable-figures は今もメンテナンスされていますか？
活発にメンテナンス中。teachable-figures の最終コミットは 2026年11月3日 です。
teachable-figures は何に使えますか？
入力を1つ変えると出力がどう変わるかを示す、物理や力学のインタラクティブなデモを作成する。 誤解が生じやすい内容を扱う授業向けに、スタンドアロンのHTML教材図を作成する。 既存の教育用Webアプリに、予測して説明するインタラクションを追加する。 attentionや歯車列などの抽象的なモデルを、生徒向けに可視化する方法を探る。
teachable-figures のインストール方法は？
リポジトリをスキルディレクトリにクローンして、Claude Codeにインストールします: git clone https://github.com/ywEdAi/teachable-figures.git ~/.claude/skills/teachable-figures Claude Codeを再起動し、/teachable-figures と入力して、教えたい内容を説明します 必要に応じて開発用依存関係をインストールし、チェックを実行します: npm ci
teachable-figures はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/ywEdAi/teachable-figures

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト