explain-code

Generate an HTML explanation page with diagrams and analogies for code.

1|1|Updated Nov 3, 2023

Search Tags:#onboarding #learning #code #analogy #html-output #explain #visual-diagrams

Ready to run

npx skills add https://github.com/itsphurin/dotfiles --skill explain-code-itsphurin

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: explain-code
Source: https://github.com/itsphurin/dotfiles/tree/main/.claude/skills/explain-code
Command: npx skills add https://github.com/itsphurin/dotfiles --skill explain-code-itsphurin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Explains code quickly and clearly by generating a professional HTML explanation page with visual diagrams and analogies, saving time when learning unfamiliar code paths or onboarding teammates.

Core Features & Use Cases

Create an HTML explanation page for a specific function, module, or algorithm.
Provide an analogy card and a visual diagram to illustrate data flow and dependencies.
Use for onboarding, code reviews, and teaching moments across small to large codebases.

Quick Start

Explain the selected code by generating explain.html in the project root and opening it in your browser.

Frequently Asked Questions about explain-code

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

FAQPage Schema

How do I explain code with visual diagrams for onboarding new developers?▼

You can explain code with visual diagrams by generating a self-contained HTML page that includes analogy cards, data flow diagrams, and sectioned walkthroughs, which automatically opens in your browser for onboarding sessions.

What is the best way to document a complex function using analogies and diagrams?▼

The best way to document a complex function is creating an HTML explanation page that breaks down logic using analogies and visual diagrams, covering context, key concepts, and edge cases in a single browsable file.

Can I use HTML code explanations for code reviews across large codebases?▼

Yes, you can use HTML code explanations for code reviews across large codebases by generating a structured explain.html file that highlights dependencies and key concepts to facilitate teaching moments.

Does generating a code explanation page require any external dependencies?▼

Generating a code explanation page requires no external dependencies, producing a standalone explain.html file directly in your project root that contains all necessary context, diagrams, and analogies.

How do I create a visual code walkthrough that opens directly in a browser?▼

You create a visual code walkthrough by generating an explain.html file in your project root, which automatically opens in your browser to display sections for context, diagrams, key concepts, and edge cases.