docs/zh-CN/skills/code-tour/SKILL.md
创建 CodeTour `.tour` 文件——针对特定角色的、带有真实文件和行锚点的逐步演练。用于入职引导、架构演练、PR 演练、RCA 演练以及结构化的“解释其工作原理”请求。
npx skillsauth add affaan-m/everything-claude-code code-tourInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
创建 CodeTour .tour 文件,用于代码库导览,可直接打开真实文件并定位到指定行范围。导览文件存放在 .tours/ 目录中,专为 CodeTour 格式设计,而非临时性的 Markdown 笔记。
一个好的导览应针对特定读者讲述一个故事:
仅创建 .tour JSON 文件。不要在此技能范围内修改源代码。
在以下情况下使用此技能:
示例:
| 不使用代码导览的情况 | 使用 |
| --- | --- |
| 在聊天中一次性解释就足够了 | 直接回答 |
| 用户想要散文式文档,而不是 .tour 产物 | documentation-lookup 或仓库文档编辑 |
| 任务是实现或重构 | 执行实现工作 |
| 任务是没有导览产物的广泛代码库入职 | codebase-onboarding |
在编写任何内容之前探索仓库:
在理解代码结构之前,不要开始编写步骤。
根据请求确定角色和深度。
| 请求形式 | 角色 | 建议深度 |
| --- | --- | --- |
| "入职","新成员" | new-joiner | 9-13 步 |
| "快速导览","快速了解" | vibecoder | 5-8 步 |
| "架构" | architect | 14-18 步 |
| "导览此 PR" | pr-reviewer | 7-11 步 |
| "为什么这个出错了" | rca-investigator | 7-11 步 |
| "安全审查" | security-reviewer | 7-11 步 |
| "解释此功能如何工作" | feature-explainer | 7-11 步 |
| "调试此路径" | bug-fixer | 7-11 步 |
每个文件路径和行锚点必须是真实的:
切勿猜测行号。
.tour写入:
.tours/<persona>-<focus>.tour
保持路径确定且可读。
在完成之前:
谨慎使用,通常仅用于结束步骤:
{ "title": "Next Steps", "description": "You can now trace the request path end to end." }
不要将第一步设为纯内容。
用于引导读者了解模块:
{ "directory": "src/services", "title": "Service Layer", "description": "The core orchestration logic lives here." }
这是默认步骤类型:
{ "file": "src/auth/middleware.ts", "line": 42, "title": "Auth Gate", "description": "Every protected request passes here first." }
当某个代码块比整个文件更重要时使用:
{
"file": "src/core/pipeline.ts",
"selection": {
"start": { "line": 15, "character": 0 },
"end": { "line": 34, "character": 0 }
},
"title": "Request Pipeline",
"description": "This block wires validation, auth, and downstream execution."
}
当精确行号可能发生变化时使用:
{ "file": "src/app.ts", "pattern": "export default class App", "title": "Application Entry" }
在需要时用于 PR、问题或文档:
{ "uri": "https://github.com/org/repo/pull/456", "title": "The PR" }
每个描述应回答:
保持描述简洁、具体,并基于实际代码。
除非任务明确需要不同结构,否则使用此弧线:
导览应感觉像一条路径,而非清单。
{
"$schema": "https://aka.ms/codetour-schema",
"title": "API Service Tour",
"description": "Walkthrough of the request path for the payments service.",
"ref": "main",
"steps": [
{
"directory": "src",
"title": "Source Root",
"description": "All runtime code for the service starts here."
},
{
"file": "src/server.ts",
"line": 12,
"title": "Entry Point",
"description": "The server boots here and wires middleware before any route is reached."
},
{
"file": "src/routes/payments.ts",
"line": 8,
"title": "Payment Routes",
"description": "Every payments request enters through this router before hitting service logic."
},
{
"title": "Next Steps",
"description": "You can now follow any payment request end to end with the main anchors in place."
}
]
}
| 反模式 | 修复 | | --- | --- | | 平铺直叙的文件列表 | 讲述一个步骤间有依赖关系的故事 | | 通用描述 | 指明具体的代码路径或模式 | | 猜测的锚点 | 先验证每个文件和行 | | 快速导览步骤过多 | 果断精简 | | 第一步是纯内容 | 将第一步锚定到真实文件或目录 | | 角色不匹配 | 为实际读者编写,而非通用工程师 |
codebase-onboardingcoding-standardscouncilmicrosoft/codetourdata-ai
Design task-local harnesses, eval gates, and reusable skill extraction for Claude dynamic workflow mode and other adaptive agent harnesses.
development
React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress end-to-end runs. Use when writing or fixing tests for React components, hooks, or pages.
tools
React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills). Organizes 70+ rules across 8 priority categories — waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, advanced. Use when writing, reviewing, or refactoring React/Next.js code for performance.
tools
React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.