Communitygithub.com

code-tour

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

What is code-tour?

code-tour is a Claude Code agent skill that 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.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/affaan-m/ECC/tree/main/skills/code-tour

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Code Tour

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:

  • what they are looking at
  • why it matters
  • what path they should follow next

Only create .tour JSON files. Do not modify source code as part of this skill.

When to Use

Use this skill when:

  • the user asks for a code tour, onboarding tour, architecture walkthrough, or PR tour
  • the user says "explain how X works" and wants a reusable guided artifact
  • the user wants a ramp-up path for a new engineer or reviewer
  • the task is better served by a guided sequence than a flat summary

Examples:

  • onboarding a new maintainer
  • architecture tour for one service or package
  • PR-review walk-through anchored to changed files
  • RCA tour showing the failure path
  • security review tour of trust boundaries and key checks

When NOT to Use

Instead of code-tourUse
A one-off explanation in chat is enoughanswer directly
The user wants prose docs, not a .tour artifactdocumentation-lookup or repo docs editing
The task is implementation or refactoringdo the implementation work
The task is broad codebase onboarding without a tour artifactcodebase-onboarding

Workflow

1. Discover

Explore the repo before writing anything:

  • README and package/app entry points
  • folder structure
  • relevant config files
  • the changed files if the tour is PR-focused

Do not start writing steps before you understand the shape of the code.

2. Infer the reader

Decide the persona and depth from the request.

Request shapePersonaSuggested depth
"onboarding", "new joiner"new-joiner9-13 steps
"quick tour", "vibe check"vibecoder5-8 steps
"architecture"architect14-18 steps
"tour this PR"pr-reviewer7-11 steps
"why did this break"rca-investigator7-11 steps
"security review"security-reviewer7-11 steps
"explain how this feature works"feature-explainer7-11 steps
"debug this path"bug-fixer7-11 steps

3. Read and verify anchors

Every file path and line anchor must be real:

  • confirm the file exists
  • confirm the line numbers are in range
  • if using a selection, verify the exact block
  • if the file is volatile, prefer a pattern-based anchor

Never guess line numbers.

4. Write the .tour

Write to:

.tours/<persona>-<focus>.tour

Keep the path deterministic and readable.

5. Validate

Before finishing:

  • every referenced path exists
  • every line or selection is valid
  • the first step is anchored to a real file or directory
  • the ref points at a branch or commit that actually has every file the tour references (see below)
  • the tour tells a coherent story rather than listing files

The ref Field

ref 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 typeSet ref to
PR tourthe PR branch — never the base branch
Onboarding / architecturethe branch the reader will be on (often main), or leave it out
Not sureleave 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.

Step Types

Content

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.

Directory

Use to orient the reader to a module:

{ "directory": "src/services", "title": "Service Layer", "description": "The core orchestration logic lives here." }

File + line

This is the default step type:

{ "file": "src/auth/middleware.ts", "line": 42, "title": "Auth Gate", "description": "Every protected request passes here first." }

Selection

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."
}

Pattern

Use when exact lines may drift:

{ "file": "src/app.ts", "pattern": "export default class App", "title": "Application Entry" }

URI

Use for PRs, issues, or docs when helpful:

{ "uri": "https://github.com/org/repo/pull/456", "title": "The PR" }

Writing Rule: SMIG

Each description should answer:

  • Situation: what the reader is looking at
  • Mechanism: how it works
  • Implication: why it matters for this persona
  • Gotcha: what a smart reader might miss

Keep descriptions compact, specific, and grounded in the actual code.

Narrative Shape

Use this arc unless the task clearly needs something different:

  1. orientation
  2. module map
  3. core execution path
  4. edge case or gotcha
  5. closing / next move

The tour should feel like a path, not an inventory.

Example

{
  "$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-Patterns

Anti-patternFix
Flat file listingTell a story with dependency between steps
Generic descriptionsName the concrete code path or pattern
Guessed anchorsVerify every file and line first
Too many steps for a quick tourCut aggressively
First step is content-onlyAnchor the first step to a real file or directory
Persona mismatchWrite for the actual reader, not a generic engineer

Best Practices

  • keep step count proportional to repo size and persona depth
  • use directory steps for orientation, file steps for substance
  • for PR tours, cover changed files first
  • for monorepos, scope to the relevant packages instead of touring everything
  • close with what the reader can now do, not a recap

Related Skills

  • codebase-onboarding
  • coding-standards
  • council
  • official upstream format: 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/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.

api-connector-builder

Build a new API connector or provider by matching the target repo

Related Skills