Communityコーディング&開発github.com

axelv/claude-skill-code-walkthrough

Claude Codeスキル:コードスニペット、ファイルリンク、Mermaidアーキテクチャ図を含む教育的なreveal.jsコードツアーを生成します。

claude-skill-code-walkthrough とは?

このスキルは、Claude Codeを使用して、ソースコードの教育的なウォークスルーをreveal.jsプレゼンテーション形式で自動生成します。生成されるプレゼンテーションには、コードスニペット、関連ファイルへのリンク、Mermaid.jsによるアーキテクチャ図が含まれ、開発者がコードベースの構造や動作を視覚的かつ段階的に理解するのに役立ちます。主にClaude Code上で動作し、プロジェクトのファイルを解析してスライドを構成するため、複雑なコードベースのドキュメント化やチーム内共有に有用です。コードレビューやオンボーディング、技術的な解説資料の作成を効率化したい開発者やテックリードに適しています。

対応✓Claude Code~Codex CLI~Cursor
npx skills add axelv/claude-skill-code-walkthrough

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

claude-skill-code-walkthrough は何をしますか?

Claude Codeスキル:コードスニペット、ファイルリンク、Mermaidアーキテクチャ図を含む教育的なreveal.jsコードツアーを生成します。

概要

このスキルは、Claude Codeの機能を活用して、指定されたコードベースの教育的なウォークスルーをreveal.jsプレゼンテーションとして生成します。生成されたプレゼンテーションは、以下の要素を含みます:

  • コードスニペット:重要なコード部分をハイライト表示
  • ファイルリンク:ソースコードファイルへの直接リンク
  • Mermaidアーキテクチャ図:システム全体の構造を視覚化

使用方法

Claude Code上で以下のように呼び出します:

claude code --skill axelv/claude-skill-code-walkthrough

または、Claude Codeのチャットインターフェースで「コードウォークスルーを生成して」と指示します。

必要要件

  • Claude Codeがインストールされていること
  • 対象のプロジェクトがローカルにクローンされていること
  • Node.js(reveal.jsの実行に必要)

出力

スキルを実行すると、code-walkthroughディレクトリが作成され、以下のファイルが生成されます:

  • index.html:メインのreveal.jsプレゼンテーションファイル
  • slides/:各スライドのMarkdownファイル
  • assets/:画像やその他のリソース

プレゼンテーションはブラウザで開いて表示できます。

カスタマイズ

生成されるプレゼンテーションのテーマやレイアウトをカスタマイズするには、スキルの設定ファイル(skills.json)を編集してください。

サポート

問題が発生した場合は、GitHubリポジトリのIssueセクションで報告してください。

関連スキル