Communitygithub.com

code-tour

Crea archivos `.tour` de CodeTour: recorridos paso a paso dirigidos a un perfil específico, con anclajes reales a archivos y líneas. Útil para onboarding, revisión de arquitectura, revisiones de PR, análisis de causa raíz y explicaciones estructuradas del código.

¿Qué es code-tour?

La habilidad **code-tour** permite generar archivos `.tour` en el formato CodeTour, que son recorridos guiados e interactivos por el código fuente, anclados directamente a archivos y líneas reales o rangos de selección. Está diseñada para facilitar tareas como el onboarding de nuevos desarrolladores, revisiones de arquitectura, paseos guiados por Pull Requests, análisis de causa raíz (RCA) o revisiones de seguridad. La habilidad sigue un flujo de trabajo estructurado: primero se descubre y explora el repositorio; luego se infiere el perfil del lector (nuevo, revisor, arquitecto, etc.) para determinar la profundidad adecuada (entre 5 y 18 pasos); después se redacta el tour en un archivo JSON dentro de `.tours/` usando pasos de tipo contenido, directorio, archivo+línea, selección, patrón o URI. Es fundamental que cada anclaje (archivo y línea) sea verificado para que exista realmente en el repositorio y en la rama o commit indicado en el campo `ref`. El formato SMIG (Situación, Mecanismo, Implicación, Gotcha) guía la redacción de cada descripción para que sea clara y específica. La habilidad está pensada para entornos que soporten la extensión CodeTour (como VS Code, Cursor, etc.) y evita tareas de implementación directa, documentación plana o explicaciones de una sola vez.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/affaan-m/everything-claude-code/tree/main/skills/code-tour

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Code Tour

Crea archivos CodeTour .tour para recorridos guiados por la base de código que se abren directamente a archivos y rangos de líneas reales. Los tours viven en .tours/ y están pensados para el formato CodeTour, no para notas Markdown ad hoc.

Un buen tour es una narrativa para un lector específico:

  • qué está viendo
  • por qué es importante
  • qué camino debe seguir a continuación

Solo crea archivos .tour JSON. No modifiques el código fuente como parte de esta habilidad.

Cuándo Usarlo

Usa esta habilidad cuando:

  • el usuario solicite un code tour, tour de onboarding, recorrido de arquitectura o tour de PR
  • el usuario diga "explica cómo funciona X" y quiera un artefacto guiado reutilizable
  • el usuario quiera una ruta de incorporación para un nuevo ingeniero o revisor
  • la tarea se beneficie más de una secuencia guiada que de un resumen plano

Ejemplos:

  • onboarding de un nuevo mantenedor
  • tour de arquitectura de un servicio o paquete
  • recorrido guiado de revisión de PR anclado a los archivos modificados
  • tour de RCA que muestre la ruta de fallo
  • tour de revisión de seguridad sobre límites de confianza y controles clave

Cuándo NO Usarlo

En lugar de code-tourUsa
Una explicación puntual en el chat es suficienteresponde directamente
El usuario quiere documentación en prosa, no un artefacto .tourdocumentation-lookup o edición de docs del repo
La tarea es implementación o refactorizaciónhaz el trabajo de implementación
La tarea es onboarding amplio de la base de código sin un artefacto tourcodebase-onboarding

Flujo de Trabajo

1. Descubrir

Explora el repositorio antes de escribir nada:

  • README y puntos de entrada de paquetes/aplicaciones
  • estructura de carpetas
  • archivos de configuración relevantes
  • los archivos modificados si el tour está centrado en un PR

No empieces a escribir pasos antes de entender la forma del código.

2. Inferir al lector

Decide el perfil y la profundidad a partir de la solicitud.

Forma de la solicitudPerfilProfundidad sugerida
"onboarding", "nuevo miembro"new-joiner9-13 pasos
"tour rápido", "vistazo general"vibecoder5-8 pasos
"arquitectura"architect14-18 pasos
"tour de este PR"pr-reviewer7-11 pasos
"por qué falló esto"rca-investigator7-11 pasos
"revisión de seguridad"security-reviewer7-11 pasos
"explica cómo funciona esta funcionalidad"feature-explainer7-11 pasos
"depura esta ruta"bug-fixer7-11 pasos

3. Leer y verificar anclajes

Cada ruta de archivo y anclaje de línea debe ser real:

  • confirma que el archivo existe
  • confirma que los números de línea están dentro del rango
  • si usas una selección, verifica el bloque exacto
  • si el archivo es volátil, prefiere un anclaje por patrón

Nunca adivines números de línea.

4. Escribir el .tour

Escribe en:

.tours/<perfil>-<enfoque>.tour

Mantén la ruta determinista y legible.

5. Validar

Antes de finalizar:

  • cada ruta referenciada existe
  • cada línea o selección es válida
  • el primer paso está anclado a un archivo o directorio real
  • ref apunta a una rama o commit que realmente tiene todos los archivos que referencia el tour (ver más abajo)
  • el tour cuenta una historia coherente, no solo lista archivos

El Campo ref

ref vincula el tour a una rama o commit de git. Importa más de lo que parece: cuando ref no es la rama que el lector tiene checkout, CodeTour abre el archivo de cada paso desde esa revisión en git, no desde los archivos en disco. Si un archivo no está en esa revisión, el paso no se abrirá — el lector verá "No se pudo abrir el editor porque no se encontró el archivo" aunque el archivo esté justo ahí. El tour y sus comentarios aún se muestran, así que la causa real es fácil de pasar por alto.

Elige ref según el tipo de tour:

Tipo de tourEstablece ref a
Tour de PRla rama del PR — nunca la rama base
Onboarding / arquitecturala rama en la que estará el lector (a menudo main), o déjalo fuera
No estás segurodeja ref fuera, para que CodeTour lea los archivos directamente del disco

El caso del PR es la trampa común: un PR normalmente añade archivos nuevos, y los archivos nuevos no existen todavía en la rama base. Apunta ref a la base (por ejemplo develop) y cada paso en un archivo nuevo no se abrirá.

Antes de finalizar, confirma que el archivo de cada paso realmente existe en el ref que elegiste.

Tipos de Paso

Contenido

Úsalo con moderación, normalmente solo para un paso de cierre:

{ "title": "Próximos Pasos", "description": "Ahora puedes rastrear la ruta de la solicitud de extremo a extremo." }

No hagas que el primer paso sea solo de contenido.

Directorio

Úsalo para orientar al lector hacia un módulo:

{ "directory": "src/services", "title": "Capa de Servicios", "description": "La lógica de orquestación central reside aquí." }

Archivo + línea

Este es el tipo de paso por defecto:

{ "file": "src/auth/middleware.ts", "line": 42, "title": "Puerta de Autenticación", "description": "Toda solicitud protegida pasa primero por aquí." }

Selección

Úsalo cuando un bloque de código importe más que el archivo completo:

{
  "file": "src/core/pipeline.ts",
  "selection": {
    "start": { "line": 15, "character": 0 },
    "end": { "line": 34, "character": 0 }
  },
  "title": "Pipeline de Solicitudes",
  "description": "Este bloque conecta validación, autenticación y ejecución descendente."
}

Patrón

Úsalo cuando las líneas exactas puedan cambiar:

{ "file": "src/app.ts", "pattern": "export default class App", "title": "Punto de Entrada de la Aplicación" }

URI

Úsalo para PRs, issues o documentación cuando sea útil:

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

Regla de Escritura: SMIG

Cada descripción debe responder a:

  • Situación: qué está viendo el lector
  • Mecanismo: cómo funciona
  • Implicación: por qué es importante para este perfil
  • Gotcha: qué podría pasar por alto un lector inteligente

Mantén las descripciones compactas, específicas y basadas en el código real.

Forma Narrativa

Usa este arco a menos que la tarea requiera claramente algo diferente:

  1. orientación
  2. mapa del módulo
  3. ruta de ejecución principal
  4. caso límite o gotcha
  5. cierre / siguiente acción

El tour debe sentirse como un camino, no como un inventario.

Ejemplo

{
  "$schema": "https://aka.ms/codetour-schema",
  "title": "Tour del Servicio API",
  "description": "Recorrido de la ruta de solicitud para el servicio de pagos.",
  "ref": "main",
  "steps": [
    {
      "directory": "src",
      "title": "Raíz del Código Fuente",
      "description": "Todo el código en tiempo de ejecución del servicio comienza aquí."
    },
    {
      "file": "src/server.ts",
      "line": 12,
      "title": "Punto de Entrada",
      "description": "El servidor arranca aquí y conecta el middleware antes de que se alcance cualquier ruta."
    },
    {
      "file": "src/routes/payments.ts",
      "line": 8,
      "title": "Rutas de Pagos",
      "description": "Toda solicitud de pagos entra por este enrutador antes de llegar a la lógica del servicio."
    },
    {
      "title": "Próximos Pasos",
      "description": "Ahora puedes seguir cualquier solicitud de pago de extremo a extremo con los anclajes principales establecidos."
    }
  ]
}

Anti-patrones

Anti-patrónCorrección
Listado plano de archivosCuenta una historia con dependencias entre pasos
Descripciones genéricasNombra la ruta o patrón de código concreto
Anclajes adivinadosVerifica primero cada archivo y línea
Demasiados pasos para un tour rápidoRecorta agresivamente
El primer paso es solo de contenidoAncla el primer paso a un archivo o directorio real
Desajuste de perfilEscribe para el lector real, no para un ingeniero genérico

Buenas Prácticas

  • mantén el número de pasos proporcional al tamaño del repo y la profundidad del perfil
  • usa pasos de directorio para orientación, pasos de archivo para contenido sustancial
  • para tours de PR, cubre primero los archivos modificados
  • para monorepos, delimita a los paquetes relevantes en lugar de recorrer todo
  • cierra con lo que el lector puede hacer ahora, no con un resumen

Habilidades Relacionadas

  • codebase-onboarding
  • coding-standards
  • council
  • formato oficial aguas arriba: 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/claude-api

Anthropic Claude API patterns for Python and TypeScript. Covers Messages API, streaming, tool use, vision, extended thinking, batches, prompt caching, and Claude Agent SDK. Use when building applications with the Claude API or Anthropic SDKs.

affaan-m/everything-claude-code

Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

affaan-m/everything-claude-code-conventions

Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

affaan-m/gget

gget CLI and Python workflow for quick genomic database queries, sequence lookup, BLAST-style searches, enrichment checks, and reproducible bioinformatics evidence logs.

affaan-m/literature-review

Systematic literature-review workflow for academic, biomedical, technical, and scientific topics, including search planning, source screening, synthesis, citation checks, and evidence logging.

affaan-m/motion-ui

Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.

affaan-m/project-guidelines-example

Example project-specific skill template based on a real production application.

affaan-m/pubmed-database

Direct PubMed and NCBI E-utilities search workflows for biomedical literature, MeSH queries, PMID lookup, citation retrieval, and API-backed literature monitoring.

affaan-m/scholar-evaluation

Structured scholarly-work evaluation for papers, proposals, literature reviews, methods sections, evidence quality, citation support, and research-writing feedback.

affaan-m/uspto-database

USPTO patent and trademark data workflow for official record lookup, PatentSearch queries, TSDR checks, assignment data, and reproducible IP research logs.

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.

Skills relacionados