Web・iOS・Androidの画面を、読み上げやキーボード操作に対応させ、ラベル、配色、操作対象の大きさなどをWCAG 2.2に沿って設計・点検するスキル。
- アイコンボタンの説明を付けたいとき
- キーボード操作とモーダルの点検
- コントラストや操作対象の大きさの確認
実在するファイルや行番号を参照した段階的なコード案内をCodeTour形式で作成し、新任者の学習、設計の理解、PRレビュー、障害原因の調査に役立てるスキル。
Create CodeTour `.tour` files — persona-targeted, step-by-step walkthroughs with real file and line anchors. Use for onboarding tours, architecture walkthroughs, PR tours, RCA tours, and structured "explain how this works" requests. Use when the user asks for a code tour, onboarding walkthrough, PR tour, or an explanation of how a subsystem works.
コードを読む順番と各箇所の意味を示す、CodeTour形式の.tourファイルを作成します。リポジトリの構成や処理の入口を調べ、実在するファイル、行番号、コード範囲を確認したうえで説明を付けます。各手順では、何を見ているか、どう動くか、読者にとっての意味、見落としやすい点を簡潔に伝えます。
新しい担当者にコードを案内したいときや、機能の処理経路を再利用できる形で残したいときに向いています。設計の説明、PRの変更箇所のレビュー、障害に至る経路やセキュリティ上の境界の確認にも使えます。読者の役割に応じて、説明の深さと手順数を調整します。
成果物は.tours/内のJSON形式の.tourファイルで、ソースコードは変更しません。CodeTour形式での利用が前提です。参照するブランチやコミットを指定するrefは、対象ファイルが存在する版に合わせます。PRで追加されたファイルを案内する場合は、PRのブランチを指定します。
この紹介文は、公開されている SKILL.md をもとに AI(Claude Haiku)が作成しました。正確な仕様は下の原文を確認してください。
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Create CodeTour .tour files for codebase walkthroughs that open directly to real files and line ranges. Tours live in .tours/ and are meant for the CodeTour format, not ad hoc Markdown notes.
A good tour is a narrative for a specific reader:
Only create .tour JSON files. Do not modify source code as part of this skill.
Use this skill when:
Examples:
| Instead of code-tour | Use |
|---|---|
| A one-off explanation in chat is enough | answer directly |
The user wants prose docs, not a .tour artifact | documentation-lookup or repo docs editing |
| The task is implementation or refactoring | do the implementation work |
| The task is broad codebase onboarding without a tour artifact | codebase-onboarding |
Explore the repo before writing anything:
Do not start writing steps before you understand the shape of the code.
Decide the persona and depth from the request.
| Request shape | Persona | Suggested depth |
|---|---|---|
| "onboarding", "new joiner" | new-joiner | 9-13 steps |
| "quick tour", "vibe check" | vibecoder | 5-8 steps |
| "architecture" | architect | 14-18 steps |
| "tour this PR" | pr-reviewer | 7-11 steps |
| "why did this break" | rca-investigator | 7-11 steps |
| "security review" | security-reviewer | 7-11 steps |
| "explain how this feature works" | feature-explainer | 7-11 steps |
| "debug this path" | bug-fixer | 7-11 steps |
Every file path and line anchor must be real:
Never guess line numbers.
.tourWrite to:
.tours/<persona>-<focus>.tour
Keep the path deterministic and readable.
Before finishing:
ref points at a branch or commit that actually has every file the tour references (see below)ref Fieldref ties the tour to a git branch or commit. It matters more than it looks: when ref is not the branch the reader has checked out, CodeTour opens each step's file from that revision in git, not from the files on disk. If a file is not in that revision, the step will not open — the reader sees "The editor could not be opened because the file was not found" even though the file is sitting right there. The tour and its comments still show, so the real cause is easy to miss.
Pick ref by tour type:
| Tour type | Set ref to |
|---|---|
| PR tour | the PR branch — never the base branch |
| Onboarding / architecture | the branch the reader will be on (often main), or leave it out |
| Not sure | leave ref out, so CodeTour reads files straight from disk |
The PR case is the common trap: a PR usually adds new files, and new files do not exist on the base branch yet. Point ref at the base (e.g. develop) and every step on a new file fails to open.
Before finishing, confirm each step's file actually exists at the ref you chose.
Use sparingly, usually only for a closing step:
{ "title": "Next Steps", "description": "You can now trace the request path end to end." }
Do not make the first step content-only.
Use to orient the reader to a module:
{ "directory": "src/services", "title": "Service Layer", "description": "The core orchestration logic lives here." }
This is the default step type:
{ "file": "src/auth/middleware.ts", "line": 42, "title": "Auth Gate", "description": "Every protected request passes here first." }
Use when one code block matters more than the whole file:
{
"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."
}
Use when exact lines may drift:
{ "file": "src/app.ts", "pattern": "export default class App", "title": "Application Entry" }
Use for PRs, issues, or docs when helpful:
{ "uri": "https://github.com/org/repo/pull/456", "title": "The PR" }
Each description should answer:
Keep descriptions compact, specific, and grounded in the actual code.
Use this arc unless the task clearly needs something different:
The tour should feel like a path, not an inventory.
{
"$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."
}
]
}
| Anti-pattern | Fix |
|---|---|
| Flat file listing | Tell a story with dependency between steps |
| Generic descriptions | Name the concrete code path or pattern |
| Guessed anchors | Verify every file and line first |
| Too many steps for a quick tour | Cut aggressively |
| First step is content-only | Anchor the first step to a real file or directory |
| Persona mismatch | Write for the actual reader, not a generic engineer |
codebase-onboardingcoding-standardscouncilmicrosoft/codetourまだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Web・iOS・Androidの画面を、読み上げやキーボード操作に対応させ、ラベル、配色、操作対象の大きさなどをWCAG 2.2に沿って設計・点検するスキル。
AIエージェントの不調を、指示・記憶・ツール実行・画面表示など12の層から調べるスキル。コードやログを根拠に原因を整理し、重要度順の指摘と修正案をまとめます。
実際の開発課題で複数のコーディングエージェントを比較するスキル。成功率、取得可能なAPI費用、所要時間、繰り返し実行の安定性を測り、選定や更新後の評価に使えます。
AIエージェントが使うツールの種類や入出力、エラーからの復帰手順を設計・見直します。文脈の情報量も整理し、作業完了率や再試行回数で改善を評価します。
AIエージェントの失敗や同じ操作の繰り返しを記録し、原因の切り分け、小さな復旧操作、結果の報告まで進める手順を示して、根拠のある再試行につなげるスキル。
AIエージェントが失敗や同じ操作を繰り返す原因を、エラーと実行状況から整理します。小さな復旧操作を試し、結果と根拠を引き継げる報告にまとめるスキルです。