skills.rest
kamranahmedse
kamranahmedseCOMMUNITY
Explore all skills by this author →
GitHub

diffity-tour

Create guided in-browser code tours with CLI-managed steps and Mermaid diagrams.

739|50|Updated Mar 16, 2026
Search Tags:#browser#ai-assisted#walkthrough#code-explanation#tour#code-tour#diffity
One-click install
npx skills add https://github.com/kamranahmedse/diffity --skill diffity-tour
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diffity-tour
Source: https://github.com/kamranahmedse/diffity/tree/main/packages/skills/diffity-tour
Command: npx skills add https://github.com/kamranahmedse/diffity --skill diffity-tour

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building large codebases often requires structured, guided explanations to onboard new contributors and align understanding. Diffity Tour provides a framework to create interactive, in-browser tours that narrate code paths and highlights in real time.

Core Features & Use Cases

  • Guided tours in the browser: Narrated steps with highlighted code sections to explain features, bugs, or design decisions.
  • Step navigation and annotations: Authors can add step-by-step explanations, with optional annotations and transitions.
  • Goto links and diagrams: Supports clickable references to code locations and Mermaid diagrams for visual data flows.

Quick Start

Start a tour by issuing the tour-start command with a short topic and optional body, then add steps using tour-step and finish with tour-done.

Frequently Asked Questions about diffity-tour

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create guided code tours to explain a codebase in the browser?▼

To create guided code tours, use the diffity-tour CLI to start a tour session with a topic, add narrated steps with highlighted code sections, and finish with a completion command to render interactive in-browser walkthroughs.

What is an in-browser code tour and when do I need one for my project?▼

An in-browser code tour is a sequence of narrated, highlighted code steps that explain features, bugs, or design decisions. You need one to onboard contributors or visually explain complex code paths and architectures.

Can I add clickable navigation links and diagrams to a code walkthrough?▼

Yes, code walkthroughs support goto links for clickable references to specific code locations and Mermaid diagrams to visually illustrate data flows and architectural relationships within the tour steps.

How do I add step-by-step annotations to a code tour session?▼

You add step-by-step annotations by issuing the tour-step command for each stage, providing explanations and optional transitions, before finalizing the session with tour-done for final rendering.

Does diffity-tour work for onboarding new developers to large codebases?▼

Yes, diffity-tour is designed for developers and tech teams needing structured, step-by-step explanations of large codebases, applying guided tours to align understanding and onboard new contributors efficiently.

What are the limitations of using CLI-based code tours for documentation?▼

CLI-based code tours require the diffity-tour tool and its CLI to manage sessions, meaning authors must manually issue tour-start, tour-step, and tour-done commands to build and render the walkthrough.

Related Skills

Explore More Software Engineering Skills→
Spectaculous-CodeSpectaculous-Code

onboarding-architect

Manage user onboarding tours for the Raamattu Nyt application.

Official
Advanced
nilbuildnilbuild
739

diffity-tour

Create interactive browser-based code tours with narrated steps and highlighted code blocks.

Community
Advanced
RamonsDkaRamonsDka
1

mermaid-diagrams

Create Mermaid diagrams for software architecture and workflows.

Community
Advanced
woxiangyangzhimaowoxiangyangzhimao
3

code-tour

Guide step-by-step file and line navigation through codebases.

Community
Advanced