diffity-tour

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Diffity Tour Skill

Diffity Tour Skill

You are creating a guided code tour — a narrated, step-by-step walkthrough of the codebase that answers the user's question or explains how a feature works. The tour opens in the browser with a sidebar showing the narrative and highlighted code sections.
你将创建一个引导式代码游览——这是对代码库的带讲解分步漫游,用于解答用户的问题或解释功能的工作原理。游览会在浏览器中打开,侧边栏显示讲解内容和高亮的代码片段。

Arguments

参数

  • question
    (required): The user's question or topic. Examples:
    • /diffity-tour how does authentication work?
    • /diffity-tour explain the request lifecycle
    • /diffity-tour how are comments stored and retrieved?
  • question
    (必填):用户的问题或主题。示例:
    • /diffity-tour 认证功能如何工作?
    • /diffity-tour 解释请求生命周期
    • /diffity-tour 评论如何存储和检索?

CLI Reference

CLI 参考

diffity agent tour-start --topic "<text>" [--body "<text>"] --json
diffity agent tour-step --tour <id> --file <path> --line <n> [--end-line <n>] --body "<text>" [--annotation "<text>"] --json
diffity agent tour-done --tour <id> --json
diffity list --json
diffity agent tour-start --topic "<text>" [--body "<text>"] --json
diffity agent tour-step --tour <id> --file <path> --line <n> [--end-line <n>] --body "<text>" [--annotation "<text>"] --json
diffity agent tour-done --tour <id> --json
diffity list --json

Prerequisites

前置条件

  1. Check that
    diffity
    is available: run
    which diffity
    . If not found, install it with
    npm install -g diffity
    .
  2. Ensure a tree instance is running: run
    diffity list --json
    .
    • If no instance is running, start one: run
      diffity tree --no-open
      using the Bash tool with
      run_in_background: true
      , wait 2 seconds, then run
      diffity list --json
      to get the port.
  1. 检查
    diffity
    是否已可用:运行
    which diffity
    。如果未找到,使用
    npm install -g diffity
    进行安装。
  2. 确保有一个tree实例在运行:运行
    diffity list --json
    • 如果没有实例运行,启动一个:使用Bash工具运行
      diffity tree --no-open
      并设置
      run_in_background: true
      ,等待2秒后,运行
      diffity list --json
      获取端口号。

Instructions

操作步骤

Phase 1: Research the codebase

阶段1:调研代码库

Before creating any tour steps, you must deeply understand the answer to the user's question. This is the most important phase.
  1. Read the relevant source files thoroughly. Follow the code path from entry point to completion.
  2. Identify the key locations that tell the story — the files and line ranges that someone needs to see to understand the answer.
  3. Plan a logical sequence of steps that builds understanding progressively. Each step should lead naturally to the next. Let the complexity of the topic determine the number of steps — a focused question might need 3, a system-wide flow might need 15+.
Guidelines for choosing steps:
  • Start where the flow begins (entry point, config, initialization)
  • Follow the execution path in the order things actually happen
  • Include only locations that are essential to understanding — skip boilerplate
  • End at the final outcome (response sent, data persisted, UI rendered)
  • Each step should cover a single concept or code section
  • Include concrete examples where possible (e.g. "when the user runs
    diffity main
    , this becomes...")
在创建任何游览步骤之前,你必须深入理解用户问题的答案。这是最重要的阶段。
  1. 仔细阅读相关源文件,跟踪从入口点到完成的代码路径。
  2. 确定能说明问题的关键位置——即用户需要查看的文件和行范围,以理解答案。
  3. 规划逻辑连贯的步骤序列,逐步构建理解。每个步骤应自然衔接至下一个。步骤数量由主题的复杂程度决定——聚焦的问题可能需要3步,系统级流程可能需要15步以上。
步骤选择指南:
  • 从流程的起点开始(入口点、配置、初始化)
  • 按照实际执行顺序跟踪执行路径
  • 仅包含理解所需的关键位置——跳过模板代码
  • 以最终结果结束(响应发送、数据持久化、UI渲染)
  • 每个步骤应涵盖单一概念或代码片段
  • 尽可能包含具体示例(例如:“当用户运行
    diffity main
    时,这会变成...”)

Phase 2: Create the tour

阶段2:创建游览

The tour UI has a dedicated explanation panel. The intro (from
tour-start --body
) is displayed as step 0 — the first thing the reader sees, filling the full panel. Each subsequent step shows its narrative in the same panel alongside the highlighted code. Since the panel has generous space, write rich, detailed explanations.
  1. Start the tour with a short topic title and introductory body:
    diffity agent tour-start --topic "<short title>" --body "<intro>" --json
    The
    --topic
    is displayed in the tour panel header — keep it to 3–6 words (e.g. "Authentication Flow", "How Routing Works", "Comment System Architecture"). Do NOT use the user's full question as the topic.
    Writing the intro body (step 0): This is the first thing the reader sees and it fills the entire explanation panel. Use this space for a thorough architectural overview that sets up everything the reader needs before diving into code. Include:
    • The key components/packages/modules involved and their responsibilities
    • How they connect — data flow, call chains, or dependency relationships
    • Key abstractions or patterns the reader should know about
    • A summary flow diagram using bold text (e.g. CLI args → git diff → parser → JSON API → React render)
    Use rich markdown formatting — paragraphs, bold,
    code
    , tables, code blocks. This is not a table of contents of what the tour will cover; it's a standalone overview that orients the reader.
    Extract the tour ID from the JSON output.
  2. Add steps in order. For each step:
    diffity agent tour-step --tour <id> --file <path> --line <start> --end-line <end> --body "<narrative>" --annotation "<short label>" --json
    Writing step content:
    • --file
      : Path relative to repo root (e.g.
      src/server.ts
      )
    • --line
      /
      --end-line
      : The exact line range to highlight. Keep it focused on the relevant section.
    • --annotation
      : A short label (3-6 words) shown as the step title. Think of it as a chapter heading.
    • --body
      : The narrative shown in the explanation panel. This has generous space — use it to write thorough explanations using markdown:
    Do:
    • Write in prose paragraphs, supplemented by structured content where it helps
    • Use
      code
      for function names, variables, refs, commands. When referencing a function, class, or code symbol that lives in a known file and line, make it a goto link so the reader can click to jump there. Syntax:
      [`symbolName`](goto:path/to/file.ts:startLine-endLine)
      or
      [`symbolName`](goto:path/to/file.ts:line)
      for a single line. These render as clickable inline code that navigates to the file and highlights the target lines. Example:
      [`handleDragEnd`](goto:src/KanbanContent.jsx:42-58)
      . Use plain backtick code for generic terms, CLI commands, or symbols you haven't located in the codebase.
    • Use bold for key concepts being introduced
    • Explain why the code exists and the design decisions behind it, not just what it does
    • Use concrete examples: "When you run
      diffity main
      , this line calls
      normalizeRef('main')
      which computes
      git merge-base main HEAD
      "
    • Use tables for mappings (input → output, ref → git command)
    • Use code blocks for data structures or command outputs
    • Connect each step to the bigger picture from the intro
    • For large highlighted ranges, use sub-highlight links to focus on specific sub-sections within the step. Syntax:
      [label](focus:startLine-endLine)
      . These render as clickable chips that shift the highlight to the specified lines. Example:
      markdown
      First, the function validates its parameters:
      [Parameter validation](focus:15-22)
      
      Then the core transform processes each entry:
      [Core transform](focus:25-40)
      
      Finally, results are cached before returning:
      [Result caching](focus:42-48)
      Use sub-highlights when a step covers 30+ lines and the narrative naturally breaks into distinct sections. The line ranges must be within the step's
      --line
      /
      --end-line
      range.
    Don't:
    • Write a wall of bullet points — use prose paragraphs with formatting
    • Just describe the syntax — explain the design decisions
    • Repeat information visible in the highlighted code
    • Use headers in step bodies (the annotation serves as the title)
  3. Finish the tour:
    diffity agent tour-done --tour <id> --json
游览UI有专门的讲解面板。简介(来自
tour-start --body
)会作为第0步显示——这是读者看到的第一个内容,会填满整个面板。后续每个步骤会在同一面板中显示讲解内容和高亮的代码。由于面板空间充足,请编写详细丰富的解释。
  1. 启动游览,使用简短的主题标题和介绍内容:
    diffity agent tour-start --topic "<短标题>" --body "<介绍内容>" --json
    --topic
    会显示在游览面板的标题中——控制在3-6个单词(例如:“认证流程”、“路由工作原理”、“评论系统架构”)。不要使用用户的完整问题作为主题。
    编写简介内容(第0步): 这是读者看到的第一个内容,会填满整个讲解面板。利用这个空间提供全面的架构概述,帮助读者在深入代码前做好准备。内容应包括:
    • 涉及的关键组件/包/模块及其职责
    • 它们的连接方式——数据流、调用链或依赖关系
    • 读者需要了解的关键抽象或模式
    • 使用粗体文本的摘要流程图(例如:CLI参数 → git diff → 解析器 → JSON API → React渲染
    使用丰富的Markdown格式——段落、粗体、
    代码
    、表格、代码块。这不是游览内容的目录,而是独立的概述,用于引导读者理解整体架构。
    从JSON输出中提取游览ID。
  2. 按顺序添加步骤。对于每个步骤:
    diffity agent tour-step --tour <id> --file <路径> --line <起始行> --end-line <结束行> --body "<讲解内容>" --annotation "<短标签>" --json
    编写步骤内容:
    • --file
      :相对于仓库根目录的路径(例如:
      src/server.ts
    • --line
      /
      --end-line
      :要高亮的精确行范围。聚焦于相关片段。
    • --annotation
      :作为步骤标题的短标签(3-6个单词)。可以看作章节标题。
    • --body
      :显示在讲解面板中的内容。空间充足,请使用Markdown编写详细的解释:
    建议:
    • 使用散文段落,辅以结构化内容
    • 对函数名、变量、引用、命令使用
      代码
      格式。当引用位于已知文件和行号的函数、类或代码符号时,将其设置为跳转链接,以便读者点击跳转到对应位置。语法:
      [`symbolName`](goto:path/to/file.ts:startLine-endLine)
      [`symbolName`](goto:path/to/file.ts:line)
      (单一行)。这些会渲染为可点击的行内代码,导航到文件并高亮目标行。示例:
      [`handleDragEnd`](goto:src/KanbanContent.jsx:42-58)
      。对于通用术语、CLI命令或未在代码库中定位到的符号,使用普通反引号代码格式。
    • 对引入的关键概念使用粗体
    • 解释代码存在的原因和背后的设计决策,而不仅仅是代码的功能
    • 使用具体示例:“当你运行
      diffity main
      时,这一行会调用
      normalizeRef('main')
      ,它会计算
      git merge-base main HEAD
    • 使用表格展示映射关系(输入→输出、引用→git命令)
    • 使用代码块展示数据结构或命令输出
    • 将每个步骤与简介中的整体架构关联起来
    • 对于高亮范围较大的步骤(30行以上),且讲解内容自然分为不同部分时,使用子高亮链接聚焦于步骤内的特定子片段。语法:
      [标签](focus:startLine-endLine)
      。这些会渲染为可点击的标签,将高亮切换到指定行。示例:
      markdown
      首先,函数会验证其参数:
      [参数验证](focus:15-22)
      
      然后核心转换处理每个条目:
      [核心转换](focus:25-40)
      
      最后,结果会被缓存后再返回:
      [结果缓存](focus:42-48)
      当步骤涵盖30行以上且讲解内容可清晰划分为不同部分时使用子高亮。行范围必须在步骤的
      --line
      /
      --end-line
      范围内。
    不建议:
    • 写一长串项目符号——使用带格式的散文段落
    • 仅描述语法——要解释设计决策
    • 重复高亮代码中可见的信息
    • 在步骤内容中使用标题(annotation已作为标题)
  3. 完成游览:
    diffity agent tour-done --tour <id> --json

Phase 3: Open in browser

阶段3:在浏览器中打开

  1. Get the running instance port from
    diffity list --json
    .
  2. Open the tour:
    open "http://localhost:<port>/tour/<tour-id>"
    (or the appropriate command for the user's OS).
  3. Tell the user the tour is ready:
    Your tour is ready — check your browser.
  1. diffity list --json
    获取运行实例的端口号。
  2. 打开游览:
    open "http://localhost:<port>/tour/<tour-id>"
    (或适用于用户操作系统的相应命令)。
  3. 告知用户游览已准备好:
    你的游览已准备就绪——请查看浏览器。

Quality Checklist

质量检查清单

Before finishing, verify:
  • Intro (step 0) gives a thorough architectural overview, not a table of contents
  • Steps follow the actual execution/data flow, not alphabetical file order
  • No two consecutive steps highlight the same lines in the same file
完成前,请验证:
  • 简介(第0步)提供了全面的架构概述,而非目录
  • 步骤遵循实际的执行/数据流,而非按文件字母顺序排列
  • 没有连续两个步骤高亮同一文件中的相同行