Communitygithub.com

代码导览

创建 CodeTour `.tour` 文件——针对特定角色、步骤明确的导览,锚定真实文件和行范围。用于入职导览、架构讲解、PR 导览、故障分析导览等结构化场景。

代码导览 是什么?

Code Tour 技能让 AI 助手能够为代码库创建结构化的 `CodeTour` 导览文件(`.tour` 格式),这些文件可以直接锚定到真实文件的特定行或选择区域。导览文件存放在 `.tours/` 目录中,旨在为特定读者(如新入职者、架构师、PR 审查者)提供叙事性引导。该技能强调在使用前必须探索仓库、推断读者角色、验证所有锚点的准确性,并遵循 SMIG(情境、机制、影响、陷阱)原则编写描述。它明确指导 `ref` 字段的正确使用以避免文件无法打开的问题,并提供了详细的步骤类型(内容、目录、文件+行、选择、模式、URI)和反模式列表。Code Tour 适用于代码库入职、架构讲解、PR 审查、故障分析和安全审查等场景,但不适用于一次性聊天解释、编写文档或实现代码。

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

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Code Tour

创建CodeTour .tour 文件,用于直接打开到真实文件和行范围的代码库导览。导览文件存放在 .tours/ 中,专为 CodeTour 格式设计,而非临时的 Markdown 笔记。

一个好的导览是为特定读者讲述一个故事:

  • 他们正在看什么
  • 为什么它重要
  • 接下来应该走哪条路径

只创建 .tour JSON 文件。不要作为此技能的一部分修改源代码。

何时使用

在以下情况下使用此技能:

  • 用户要求提供代码导览、入职导览、架构讲解或 PR 导览
  • 用户说“解释 X 是如何工作的”并希望获得一个可重用的引导式产物
  • 用户想要为新工程师或审查者提供快速上手路径
  • 与简单的摘要相比,引导式序列更适合当前任务

示例:

  • 引导新维护者入职
  • 一个服务或包的架构导览
  • 锚定到变更文件的 PR 审查导览
  • 展示故障路径的故障分析导览
  • 安全审查导览,展示信任边界和关键检查

何时不使用

不要使用 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/<角色>-<焦点>.tour

保持路径确定性和可读性。

5. 验证

在完成之前:

  • 每个引用的路径都存在
  • 每行或每个选择都是有效的
  • 第一步锚定到一个真实文件或目录
  • ref 指向的分支或提交确实包含导览引用的每个文件(见下文)
  • 导览讲述一个连贯的故事,而非简单地列出文件

ref 字段

ref 将导览绑定到一个 git 分支或提交。它比看起来更重要:当 ref 不是读者检出的分支时,CodeTour 从该修订版本(而非磁盘上的文件)打开每个步骤的文件。如果该修订版本中不存在某个文件,该步骤将无法打开——读者会看到 “无法打开编辑器,因为未找到文件”,即使文件就在那里。导览及其注释仍然会显示,因此真实原因很容易被忽略。

根据导览类型选择 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

每个描述应回答:

  • 情境:读者正在看什么
  • 机制:它是如何工作的
  • 影响:为什么对这个角色重要
  • 陷阱:聪明的读者可能会错过什么

保持描述简洁、具体,并基于实际代码。

叙事结构

除非任务明确需要不同的结构,否则使用以下弧线:

  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.

相关技能