Communitygithub.com

CodeTour 程式碼導覽

建立 CodeTour `.tour` 檔案 — 針對特定角色、逐步引導的程式碼走查,並帶有真實檔案與行號錨點。適用於入門導覽、架構走查、PR 導覽、RCA 導覽等結構化場景。

CodeTour 程式碼導覽 是什麼?

CodeTour 技能可讓 AI 代理建立結構化的 `.tour` 檔案,用於引導開發者逐步探索程式碼庫。這些導覽會直接開啟到真實的檔案和行範圍,非常適合新成員入職、架構說明、程式碼審查或根本原因分析。支援 VS Code 的 CodeTour 擴充功能,透過 JSON 格式定義步驟,每個步驟可錨定到檔案、行號、程式碼區塊或目錄。`ref` 欄位將導覽綁定到特定分支或提交,避免因檔案不存在而導致步驟無法開啟的常見陷阱。SMIG 寫作規則(情境、機制、影響、陷阱)確保每個描述既具體又實用。技能明確規定了何時使用(使用者要求導覽或結構化解釋)以及何時不使用(單純問答、純文件、實作任務),並根據請求類型推薦不同的人物角色和步驟數量。最後,它會進行自動驗證,確保所有檔案和行號錨點有效,導覽敘述連貫一致。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/affaan-m/ECC/tree/main/skills/code-tour

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

CodeTour 程式碼導覽 是做什麼的?

建立 CodeTour .tour 檔案,用於程式碼庫走查,這些檔案會直接開啟到真實的檔案和行範圍。導覽檔案存放在 .tours/ 目錄中,採用 CodeTour 格式,而非臨時的 Markdown 筆記。

一個好的導覽是針對特定讀者的敘事:

  • 他們在看什麼
  • 為什麼重要
  • 接下來該走哪條路

僅建立 .tour JSON 檔案。請勿在本技能範圍內修改原始碼。

使用時機

在以下情況使用此技能:

  • 使用者要求程式碼導覽、入門導覽、架構走查或 PR 導覽
  • 使用者說「解釋 X 如何運作」,且希望得到可重複使用的引導式產出
  • 使用者希望為新工程師或審查者建立上手路徑
  • 比起平鋪直敘的摘要,引導式的序列更適合該任務

範例:

  • 新維護者入職
  • 某個服務或套件的架構導覽
  • 錨定到變更檔案的 PR 審查走查
  • 展示失敗路徑的 RCA 導覽
  • 審查信任邊界與關鍵檢查的安全性導覽

何時不該使用

不要用 code-tour改用
在聊天中一次性解釋就夠了直接回答
使用者想要散文式文件,而不是 .tour 產出documentation-lookup 或編輯 repo 文件
任務是實作或重構執行實作工作
任務是廣泛的程式碼庫入門,但不需要導覽產出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、議題或文件(視情況使用):

{ "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 導覽,先涵蓋變更的檔案
  • 對於 monorepo,將範圍限定在相關套件,而非導覽所有內容
  • 結尾處告訴讀者他們現在可以做什麼,而不是總結

相關技能

  • 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/content-engine

Create platform-native content systems for X, LinkedIn, TikTok, YouTube, newsletters, and repurposed multi-platform campaigns. Use when the user wants social posts, threads, scripts, content calendars, or one source asset adapted cleanly across platforms.

affaan-m/ECC

Multi-platform content distribution across X, LinkedIn, Threads, and Bluesky. Adapts content per platform using content-engine patterns. Never posts identical content cross-platform. Use when the user wants to distribute content across social platforms.

affaan-m/fal-ai-media

Unified media generation via fal.ai MCP — image, video, and audio. Covers text-to-image (Nano Banana), text/image-to-video (Seedance, Kling, Veo 3), text-to-speech (CSM-1B), and video-to-audio (ThinkSound). Use when the user wants to generate images, videos, or audio with AI.

affaan-m/manim-video

日本語翻訳:このファイルは manim-video 用の日本語翻訳が必要です

affaan-m/remotion-video-creation

Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。

affaan-m/video-editing

AI-assisted video editing workflows for cutting, structuring, and augmenting real footage. Covers the full pipeline from raw capture through FFmpeg, Remotion, ElevenLabs, fal.ai, and final polish in Descript or CapCut. Use when the user wants to edit video, cut footage, create vlogs, or build video content.

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.

agent-self-evaluation

Use after completing any non-trivial task. The agent self-rates its output on 5 axes — accuracy, completeness, clarity, actionability, conciseness — with concrete evidence per criterion. Produces a structured 1-5 scorecard with specific improvement suggestions.

agent-sort

Build an evidence-backed ECC install plan for a specific repo by sorting skills, commands, rules, hooks, and extras into DAILY vs LIBRARY buckets using parallel repo-aware review passes. Use when ECC should be trimmed to what a project actually needs instead of loading the full bundle.

ai-first-engineering

Engineering operating model for teams where AI agents generate a large share of implementation output. Use when setting team process, review gates, or ownership rules for a codebase largely written by agents.

ai-regression-testing

Regression testing strategies for AI-assisted development. Sandbox-mode API testing without database dependencies, automated bug-check workflows, and patterns to catch AI blind spots where the same model writes and reviews code. Use when adding regression coverage to AI-assisted code, or when the same model both wrote and reviewed a change.

android-clean-architecture

Clean Architecture patterns for Android and Kotlin Multiplatform projects — module structure, dependency rules, UseCases, Repositories, and data layer patterns. Use when structuring modules, layers, or data flow in an Android or KMP project.

angular-developer

Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.

相關技能