コードベースの学習ガイドを洗練されたインタラクティブな Web エクスペリエンスに変換します。このスキルは、ユーザーが完成した学習ガイド マークダウン ファイル (codebase-study-guide などから) を持っていて、それをインタラクティブな教育アプリに変換したい場合に使用する必要があります。 「このスタディ ガイドをインタラクティブにする」、「これをインタラクティブなエクスペリエンスに変える」、「このスタディ ガイドを視覚化する」、「インタラクティブ バージョンを作成する」などのリクエスト、またはユーザーがスタディ ガイドの .md ファイルを持っていて、より充実したプレゼンテーションを望んでいる場合にトリガーされます。スクロール駆動のストーリーテリング、インタラクティブなアーキテクチャ図、アニメーション化されたコードのウォークスルー、および段階的な開示を備えた、Vite で提供されるシングルページ アプリを作成します。
コマンドラインで interactive-study-guide AI スキルを開発環境にすばやくインストール
ソース: petekp/agent-skills。
Transform a static study guide markdown file into an immersive, interactive learning experience served as a local web app. The output should feel like a NYT interactive feature or a Pudding.cool essay — editorial typography, generous whitespace, purposeful animation, and visualizations that reveal structure rather than decorate.
Accept a path to the study guide markdown file. Parse it into structured sections using the known template format from codebase-study-guide:
| Purpose | ## 1. Why This Exists | Prose with problem/approach/users | | Threshold Concepts | ## 2. The Big Ideas | Named concepts with code locations | | System Map | ## 3. System Map | Mermaid diagram + table | | Request Walkthrough | ## 4. Walking Through a Request | Sequence diagram + annotated code steps |
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/petekp/agent-skills --skill interactive-study-guideコードベースの学習ガイドを洗練されたインタラクティブな Web エクスペリエンスに変換します。このスキルは、ユーザーが完成した学習ガイド マークダウン ファイル (codebase-study-guide などから) を持っていて、それをインタラクティブな教育アプリに変換したい場合に使用する必要があります。 「このスタディ ガイドをインタラクティブにする」、「これをインタラクティブなエクスペリエンスに変える」、「このスタディ ガイドを視覚化する」、「インタラクティブ バージョンを作成する」などのリクエスト、またはユーザーがスタディ ガイドの .md ファイルを持っていて、より充実したプレゼンテーションを望んでいる場合にトリガーされます。スクロール駆動のストーリーテリング、インタラクティブなアーキテクチャ図、アニメーション化されたコードのウォークスルー、および段階的な開示を備えた、Vite で提供されるシングルページ アプリを作成します。 ソース: petekp/agent-skills。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/petekp/agent-skills --skill interactive-study-guide インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/petekp/agent-skills