Communitygithub.com

コードツアー

個人向けに特化した、実際のファイルと行アンカーを備えたステップバイステップのウォークスルーであるCodeTour `.tour` ファイルを作成します。オンボーディングツアー、アーキテクチャウォークスルー、PRツアー、RCAツアー、構造化された説明に使用します。

コードツアー とは?

コードツアー(code-tour)スキルは、VS Code の CodeTour 拡張機能と互換性のある `.tour` ファイルを作成するための専用スキルです。このスキルは、オンボーディング、アーキテクチャ説明、PRレビュー、根本原因分析(RCA)、セキュリティレビューなど、再利用可能でガイド付きのコードベースウォークスルーを生成するタスクに最適です。スキルは、実際のファイルパスと行範囲にアンカーされたステップを含む JSON ファイルを `.tours/` ディレクトリに作成します。ワークフローは、コードベースの調査、読者のペルソナの推測、アンカーの検証、`.tour` ファイルの作成、検証で構成されます。各ステップでは、状況、メカニズム、含意、落とし穴(SMIG)という記述ルールに従って、コード内の具体的なポイントを正確に指し示します。`ref` フィールドは、ツアーのステップが指すファイルが実際に存在するブランチやコミットに設定する必要があり、特にPRツアーでは、PRブランチを指すように設定しないと新しいファイルが開けないという落とし穴があります。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/affaan-m/everything-claude-code/tree/main/skills/code-tour

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

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

ドキュメント

コードツアー は何をしますか?

コードベースのウォークスルー用にCodeTour .tour ファイルを作成します。これらのファイルは実際のファイルと行範囲に直接リンクします。ツアーは .tours/ ディレクトリに保存され、CodeTour 形式専用であり、アドホックな Markdown ノートではありません。

優れたツアーは特定の読者に向けたナラティブです:

  • 何を見ているか
  • なぜそれが重要か
  • 次にどのパスをたどるべきか

.tour JSON ファイルのみを作成します。このスキルの一部としてソースコードを変更しないでください。

使用するタイミング

以下の場合にこのスキルを使用します:

  • ユーザーがコードツアー、オンボーディングツアー、アーキテクチャウォークスルー、またはPRツアーを依頼したとき
  • ユーザーが「Xがどのように動作するか説明して」と依頼し、再利用可能なガイド付きアーティファクトを希望するとき
  • ユーザーが新しいエンジニアやレビュワーのためのランプアップパスを希望するとき
  • タスクがフラットな概要よりもガイド付きシーケンスの方が適している場合

例:

  • 新しいメンテナーのオンボーディング
  • 1つのサービスまたはパッケージのアーキテクチャツアー
  • 変更されたファイルにアンカーされたPRレビューウォークスルー
  • 障害パスを示すRCAツアー
  • 信頼境界と主要なチェックのセキュリティレビューツアー

使用すべきでないタイミング

code-tour の代わりに使用するもの
チャットでの一回限りの説明で十分直接回答する
ユーザーが .tour アーティファクトではなく散文的なドキュメントを希望documentation-lookup またはリポジトリドキュメントの編集
タスクが実装またはリファクタリング実装作業を行う
ツアーアーティファクトなしでの広範なコードベースオンボーディングcodebase-onboarding

ワークフロー

1. 調査

何かを書く前にリポジトリを調査します:

  • README とパッケージ/アプリのエントリポイント
  • フォルダ構造
  • 関連する設定ファイル
  • PRに焦点を当てたツアーの場合は、変更されたファイル

コードの形状を理解する前にステップの作成を開始しないでください。

2. 読者を推測する

リクエストからペルソナと深さを決定します。

リクエストの形状ペルソナ推奨ステップ数
「オンボーディング」、「新規メンバー」new-joiner9-13 ステップ
「クイックツアー」、「雰囲気確認」vibecoder5-8 ステップ
「アーキテクチャ」architect14-18 ステップ
「このPRのツアー」pr-reviewer7-11 ステップ
「なぜこれが壊れたのか」rca-investigator7-11 ステップ
「セキュリティレビュー」security-reviewer7-11 ステップ
「この機能の動作を説明」feature-explainer7-11 ステップ
「このパスをデバッグ」bug-fixer7-11 ステップ

3. アンカーを読んで確認する

すべてのファイルパスと行アンカーは実際のものでなければなりません:

  • ファイルが存在することを確認する
  • 行番号が範囲内であることを確認する
  • 選択範囲を使用する場合は、正確なブロックを確認する
  • ファイルが変動しやすい場合は、パターンベースのアンカーを優先する

行番号を推測しないでください。

4. .tour を書く

以下に書き込みます:

.tours/<persona>-<focus>.tour

パスは決定的で読みやすいものにしてください。

5. 検証

終了する前に:

  • 参照されているすべてのパスが存在する
  • すべての行または選択範囲が有効である
  • 最初のステップが実際のファイルまたはディレクトリにアンカーされている
  • ref がツアーが参照するすべてのファイルが実際に存在するブランチまたはコミットを指している(下記参照)
  • ツアーがファイルを列挙するのではなく、一貫したストーリーを語っている

ref フィールド

ref はツアーを git ブランチまたはコミットに結び付けます。見た目以上に重要です:ref が読者がチェックアウトしているブランチでない場合、CodeTour は各ステップのファイルをディスク上のファイルではなく、そのリビジョンから git で開きます。そのリビジョンにファイルが存在しない場合、ステップは開きません。たとえファイルがすぐそこにあっても、読者には 「ファイルが見つからなかったため、エディターを開けませんでした」 と表示されます。ツアーとそのコメントは表示されるため、本当の原因を見逃しがちです。

ツアーのタイプに応じて ref を選択します:

ツアーのタイプref を設定する値
PRツアーPRブランチ — ベースブランチにはしない
オンボーディング / アーキテクチャ読者がいるであろうブランチ(多くの場合 main)、または省略する
わからないref を省略する。CodeTour はファイルをディスクから直接読み取る

PRのケースはよくある落とし穴です:PRは通常新しいファイルを追加し、新しいファイルはベースブランチにはまだ存在しません。ref をベース(例 develop)に設定すると、新しいファイル上のすべてのステップが開けなくなります。

終了する前に、選択した ref に各ステップのファイルが実際に存在することを確認してください。

ステップの種類

コンテンツ

控えめに使用し、通常は終了ステップにのみ使用します:

{ "title": "次のステップ", "description": "これでリクエストパスを最初から最後まで追跡できます。" }

最初のステップをコンテンツのみにしないでください。

ディレクトリ

読者をモジュールに導くために使用します:

{ "directory": "src/services", "title": "サービス層", "description": "コアのオーケストレーションロジックはここにあります。" }

ファイル + 行

これがデフォルトのステップタイプです:

{ "file": "src/auth/middleware.ts", "line": 42, "title": "認証ゲート", "description": "保護されたリクエストはすべて最初にここを通過します。" }

選択範囲

ファイル全体よりも特定のコードブロックが重要な場合に使用します:

{
  "file": "src/core/pipeline.ts",
  "selection": {
    "start": { "line": 15, "character": 0 },
    "end": { "line": 34, "character": 0 }
  },
  "title": "リクエストパイプライン",
  "description": "このブロックは、検証、認証、および下流の実行を結び付けます。"
}

パターン

正確な行が変動する可能性がある場合に使用します:

{ "file": "src/app.ts", "pattern": "export default class App", "title": "アプリケーションエントリ" }

URI

必要に応じて、PR、Issue、ドキュメントに使用します:

{ "uri": "https://github.com/org/repo/pull/456", "title": "このPR" }

記述ルール: SMIG

各記述は以下に答える必要があります:

  • 状況 (Situation):読者が何を見ているか
  • メカニズム (Mechanism):どのように動作するか
  • 含意 (Implication):このペルソナにとってなぜ重要なのか
  • 落とし穴 (Gotcha):賢い読者が見逃しがちなこと

記述は簡潔で具体的にし、実際のコードに基づいて記述してください。

ナラティブの形状

タスクが明確に異なるものを必要とする場合を除き、このアークを使用します:

  1. オリエンテーション
  2. モジュールマップ
  3. コア実行パス
  4. エッジケースまたは落とし穴
  5. クロージング / 次のアクション

ツアーはインベントリのようにではなく、パスのように感じられるべきです。

例

{
  "$schema": "https://aka.ms/codetour-schema",
  "title": "API サービスツアー",
  "description": "ペイメントサービス向けリクエストパスのウォークスルー。",
  "ref": "main",
  "steps": [
    {
      "directory": "src",
      "title": "ソースルート",
      "description": "サービスのすべてのランタイムコードはここから始まります。"
    },
    {
      "file": "src/server.ts",
      "line": 12,
      "title": "エントリポイント",
      "description": "サーバーはここで起動し、ルートに到達する前にミドルウェアを配線します。"
    },
    {
      "file": "src/routes/payments.ts",
      "line": 8,
      "title": "ペイメントルート",
      "description": "すべてのペイメントリクエストは、サービスロジックに到達する前にこのルーターを通過します。"
    },
    {
      "title": "次のステップ",
      "description": "これで、主要なアンカーを使用して任意のペイメントリクエストを最初から最後まで追跡できます。"
    }
  ]
}

アンチパターン

アンチパターン修正方法
フラットなファイル一覧ステップ間の依存関係を持つストーリーを語る
一般的な記述具体的なコードパスまたはパターンに名前を付ける
推測されたアンカー最初にすべてのファイルと行を確認する
クイックツアーにステップが多すぎる積極的に削減する
最初のステップがコンテンツのみ最初のステップを実際のファイルまたはディレクトリにアンカーする
ペルソナの不一致一般的なエンジニアではなく、実際の読者に向けて書く

ベストプラクティス

  • ステップ数はリポジトリのサイズとペルソナの深さに比例させる
  • オリエンテーションにはディレクトリステップを、実質的な内容にはファイルステップを使用する
  • PRツアーの場合、最初に変更されたファイルをカバーする
  • モノレポの場合、すべてをツアーするのではなく、関連するパッケージに範囲を絞る
  • 要約ではなく、読者が次に何ができるようになったかを示して締めくくる

関連スキル

  • codebase-onboarding
  • coding-standards
  • council
  • 公式アップストリーム形式: microsoft/codetour

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

accessibility

Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA. Use when building or auditing UI that must meet WCAG 2.2 Level AA, or when reviewing a change for keyboard, contrast, or screen-reader support.

affaan-m/claude-api

Anthropic Claude API patterns for Python and TypeScript. Covers Messages API, streaming, tool use, vision, extended thinking, batches, prompt caching, and Claude Agent SDK. Use when building applications with the Claude API or Anthropic SDKs.

affaan-m/everything-claude-code

Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

affaan-m/everything-claude-code-conventions

Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

affaan-m/gget

gget CLI and Python workflow for quick genomic database queries, sequence lookup, BLAST-style searches, enrichment checks, and reproducible bioinformatics evidence logs.

affaan-m/literature-review

Systematic literature-review workflow for academic, biomedical, technical, and scientific topics, including search planning, source screening, synthesis, citation checks, and evidence logging.

affaan-m/motion-ui

Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.

affaan-m/project-guidelines-example

Example project-specific skill template based on a real production application.

affaan-m/pubmed-database

Direct PubMed and NCBI E-utilities search workflows for biomedical literature, MeSH queries, PMID lookup, citation retrieval, and API-backed literature monitoring.

affaan-m/scholar-evaluation

Structured scholarly-work evaluation for papers, proposals, literature reviews, methods sections, evidence quality, citation support, and research-writing feedback.

affaan-m/uspto-database

USPTO patent and trademark data workflow for official record lookup, PatentSearch queries, TSDR checks, assignment data, and reproducible IP research logs.

agent-architecture-audit

Full-stack diagnostic for agent and LLM applications. Audits the 12-layer agent stack for wrapper regression, memory pollution, tool discipline failures, hidden repair loops, and rendering corruption. Produces severity-ranked findings with code-first fixes. Essential for developers building agent applications, autonomous loops, or any LLM-powered feature. Use when an agent or LLM feature misbehaves and the failing layer is unknown, or before shipping an agent stack.

agent-eval

Head-to-head comparison of coding agents (Claude Code, Aider, Codex, etc.) on custom tasks with pass rate, cost, time, and consistency metrics. Use when choosing between coding agents, or when a change to an agent setup needs measured pass rate, cost, and time rather than an impression.

agent-harness-construction

Design and optimize AI agent action spaces, tool definitions, and observation formatting for higher completion rates. Use when defining or revising an agent

agentic-engineering

Operate as an agentic engineer using eval-first execution, decomposition, and cost-aware model routing. Use when planning or executing engineering work that agents will carry out end to end.

agentic-os

Build persistent multi-agent operating systems on Claude Code. Covers kernel architecture, specialist agents, slash commands, file-based memory, scheduled automation, and state management without external databases. Use when building a persistent multi-agent system on Claude Code with its own memory, commands, and scheduling.

agent-introspection-debugging

Structured self-debugging workflow for AI agent failures using capture, diagnosis, contained recovery, and introspection reports. Use when an agent run fails and you need a reproducible diagnosis instead of a retry.

agent-payment-x402

Add x402 payment execution to AI agents with per-task budgets, spending controls, and non-custodial wallets. Supports Base through agentwallet-sdk and X Layer through OKX Payments / OKX Agent Payments Protocol. Use when an agent must pay for something itself and needs per-task budgets, spending controls, and a non-custodial wallet.

関連スキル