Skip to content

/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 "explain how this works" requests. Use when the user asks for a code tour,

From plugin
ecc
293k200 skills71 agents113 commands1 MCP

Claude Code

$ npx -y skills add affaan-m/ECC --skill code-tour --agent claude-code

SKILL.md

code-tour.SKILL.md
name: code-tour
description: 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.
metadata:
  origin: ECC

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-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` |

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 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 |

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

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.

Narrat

Read more
@affaan-m
Ships withecc

Your agent can write code, but ECC gives it a coordinated engineering system and toolbox: it plans before it builds, verifies changes with tests, reviews its own work from a fresh context, remembers what matters, and turns repeated wins into reusable skills

293k200 skills71 agents1 MCP
Get the whole plugin, auto-invoked

Stars on GitHub

Momentum

stars in total
293.5k
Star history of affaan-m/ECC on GitHub, a chart by star-history.com

Other skills on ecc.

accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

@affaan-m@affaan-mInstall Skill
agent-architecture-audit
Auto-invoked

agent-architecture-aud…

Full-stack diagnostic for agent and LLM applications. Audits the 12-layer agent stack for wrapper regression, memory pollution,…

@affaan-m@affaan-mInstall Skill
agent-eval
Auto-invoked

agent-eval

Head-to-head comparison of coding agents (Claude Code, Aider, Codex, etc.) on custom tasks with pass rate, cost, time, and…

@affaan-m@affaan-mInstall Skill
agent-harness-construction
Auto-invoked

agent-harness-construc…

Design and optimize AI agent action spaces, tool definitions, and observation formatting for higher completion rates. Use when…

@affaan-m@affaan-mInstall Skill
agent-introspection-debugging
Auto-invoked

agent-introspection-de…

Structured self-debugging workflow for AI agent failures using capture, diagnosis, contained recovery, and introspection reports.…

@affaan-m@affaan-mInstall Skill
agent-security-hardening
Auto-invoked

agent-security-hardeni…

Security hardening guidance for AI agent frameworks that process untrusted content, invoke tools, write workspace files, manage…

@affaan-m@affaan-mInstall Skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills10d309k
@mattpocock@mattpocockInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react1d252k
@facebook@facebookInstall Skill
act-on-feedback

act-on-feedback

Act on user feedback attached to the current session. Use when the user submits feedback on the session's changes via the Submit…

vscode1d195k
@microsoft@microsoftInstall Skill

Questions about code-tour.

Which coding agents can use code-tour?
code-tour installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.