Communitygithub.com

code-tour

建立 CodeTour `.tour` 檔案 — 針對特定角色、逐步引導的程式碼導覽,包含實際檔案與行號錨點。適用於入門導覽、架構解說、PR 導覽、RCA 導覽等結構化逐步教學。

code-tour 是什麼?

Code Tour 技能讓 AI 助理能為開發者建立正式的 CodeTour `.tour` 導覽檔案,這些檔案可直接在編輯器中開啟,指向真實的檔案與行號。其核心價值在於將原本散亂的說明轉化為可重複使用、可協作的引導式體驗,特別適合新成員入職、架構解說、PR 審查、根本原因分析(RCA)或安全審查等場景。技能支援多種角色(如新進人員、架構師、PR 審查者)與深度設定,並提供嚴謹的產出流程:先探索專案結構、推斷讀者角色,接著驗證所有檔案路徑與行號錨點的精確性,最後依格式寫入 `.tours/` 目錄。每個導覽步驟都必須使用真實存在的檔案路徑,且可為目錄步驟、檔案+行號步驟、程式碼區塊選取步驟等。此外,技能特別強調 `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 中提問

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

說明文件

程式碼導覽 (Code Tour)

建立 CodeTour .tour 檔案,用於程式碼庫的逐步導覽,這些檔案會直接開啟到真實的檔案和行號範圍。導覽檔案位於 .tours/ 目錄中,專屬於 CodeTour 格式,並非臨時的 Markdown 筆記。

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

  • 他們正在看什麼
  • 為什麼這很重要
  • 他們下一步應該走哪條路徑

僅建立 .tour JSON 檔案。不要作為此技能的一部分修改原始碼。

何時使用

在以下情況使用此技能:

  • 使用者要求程式碼導覽、入門導覽、架構解說或 PR 導覽
  • 使用者說「解釋 X 是如何運作的」,並想要一個可重複使用的引導式產出物
  • 使用者想要為新工程師或審查者建立快速上手路徑
  • 比起平鋪直敘的摘要,此任務更適合用引導式的順序來處理

範例:

  • 引導新維護者入門
  • 針對某個服務或套件的架構導覽
  • 錨定在變更檔案上的 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 不是讀者目前 checkout 的分支時,CodeTour 會從該修訂版本開啟每個步驟的檔案(來自 git),而不是從磁碟上的檔案開啟。如果某個檔案不在該修訂版本中,則該步驟將無法開啟——讀者會看到 「無法開啟編輯器,因為找不到檔案」,即使該檔案就在那裡。導覽和其註解仍然會顯示,因此真正的錯誤原因很容易被忽略。

根據導覽類型選擇 ref:

導覽類型將 ref 設定為
PR 導覽PR 分支 — 絕對不是基底分支
入門 / 架構讀者將會 checkout 的分支(通常是 main),或者留空
不確定留空 ref,這樣 CodeTour 就會直接從磁碟讀取檔案

PR 的情況是常見的陷阱:一個 PR 通常會新增檔案,而新檔案在基底分支上還不存在。將 ref 指向基底分支(例如 develop),則每個位於新檔案上的步驟都會無法開啟。

完成之前,請確認你所選擇的 ref 上確實存在每個步驟的檔案。

步驟類型

內容 (Content)

謹慎使用,通常僅用於結束步驟:

{ "title": "後續步驟", "description": "你現在可以從頭到尾追蹤請求路徑了。" }

不要讓第一個步驟是純內容。

目錄 (Directory)

用於引導讀者到一個模組:

{ "directory": "src/services", "title": "服務層", "description": "核心編排邏輯在這裡。" }

檔案 + 行號 (File + line)

這是預設的步驟類型:

{ "file": "src/auth/middleware.ts", "line": 42, "title": "認證閘道", "description": "每個受保護的請求都會先經過這裡。" }

選取範圍 (Selection)

當某個程式碼區塊比整個檔案更重要時使用:

{
  "file": "src/core/pipeline.ts",
  "selection": {
    "start": { "line": 15, "character": 0 },
    "end": { "line": 34, "character": 0 }
  },
  "title": "請求管線",
  "description": "此區塊串接了驗證、認證和下游執行。"
}

模式 (Pattern)

當確切的行號可能會變動時使用:

{ "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 導覽,優先涵蓋變更的檔案
  • 對於 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/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.

相關技能