- 📁 references/
- 📄 .gitignore
- 📄 README.md
- 📄 SKILL.md
Turn any codebase into a beautiful, interactive single-page HTML course that teaches how the code works to non-technical people. Use this skill whenever someone wants to create an interactive course, tutorial, or educational walkthrough from a codebase or project. Also trigger when users mention 'turn this into a course,' 'explain this codebase interactively,' 'teach this code,' 'interactive tutorial from code,' 'codebase walkthrough,' 'learn from this codebase,' or 'make a course from this project.' This skill produces a stunning, self-contained HTML file with scroll-based navigation, animated visualizations, embedded quizzes, and code-with-plain-English side-by-side translations.
- 📄 01-project-overview.md
- 📄 02-directory-structure.md
- 📄 03-import-conventions.md
How to develop, modify, and extend the Claude Code codebase following its established programming style, patterns, and conventions. Use this skill whenever working on the claude-code source — adding tools, commands, utils, components, types, hooks, services, or fixing bugs. Also use when the user asks about claude-code architecture, coding standards, file organization, or wants to understand how the codebase works. This skill ensures all contributions match the existing codebase style exactly.
This skill should be used when code search is needed (whether explicitly requested or as part of completing a task), when indexing the codebase after changes, or when the user asks about ccc, cocoindex-code, or the codebase index. Trigger phrases include 'search the codebase', 'find code related to', 'update the index', 'ccc', 'cocoindex-code'.
Analyzes existing codebases to understand structure, patterns, and technical debt
Generate a concise .instructions.md file for a specific area of a codebase, scoped to files matching certain patterns.
- 📄 apply-patch.js
- 📄 SKILL.md
Apply AI-generated code edits from a response file to the local codebase.
Automatically analyze a codebase and generate an architecture diagram with zero configuration. Use when the user asks to "diagram this repo", "visualize the architecture", "auto diagram", or requests a codebase overview without specifying components. Do NOT use when the user provides a specific description, sample diagram, or component list — use the excalidraw skill instead.
Analyzes the codebase, creates project documentation, generates a rebuildable codebase index, and updates AGENTS.md. Used during /5:implement-feature CONFIGURE.
Perform a structured codebase health assessment and append results to docs/health-log.md. Use when asked to check codebase health.
Core conventions and patterns for this codebase
- 📁 evals/
- 📁 references/
- 📄 SKILL.md
Use when searching codebases (text, structural/AST, files by name, PDFs/archives, code stats) or building context before a task.
- 📁 references/
- 📁 templates/
- 📄 SKILL.md
Analyzes a codebase and generates animated HTML architecture reports — beautiful, bespoke visualizations with interactive animated diagrams showing how the system works. Use this skill whenever the user asks to "visualize the codebase", "explain the architecture", "generate a diagram", "show how the code flows", "create an architecture diagram", "animate the data flow", "explain this repo visually", "show me how this works", or "generate an architecture report". --- # Codebase Visualizer Analyzes a codebase and produces beautiful, self-contained HTML architecture outputs with animated flow diagrams. =================================================================== OUTPUT MODES =================================================================== /archflow → Full architecture report (default) /archflow-diagram → Animated diagram only (legacy, self-contained) /archflow-slides → Slide deck presentation =================================================================== WORKFLOW — FULL REPORT (default: /archflow) =================================================================== 1. ANALYZE Read references/analysis.md → scan the codebase Read references/layouts.md → decide the diagram layout pattern 2. THINK (commit to a visual direction before coding) Read references/design-system.md → CSS patterns library Read references/libraries.md → fonts, Mermaid, CDN imports Read references/design-qa.md → quality gates