skills.rest
koseki2580
koseki2580COMMUNITY
Explore all skills by this author →
GitHub

explain-code

Generate block-by-block HTML code walkthroughs with side-by-side mentor explanations.

Updated Apr 30, 2026
Search Tags:#developer onboarding#code explanation#documentation generation#worked examples#mentorship#walkthrough#code visualization
One-click install
npx skills add https://github.com/koseki2580/skills --skill explain-code-koseki2580
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: explain-code
Source: https://github.com/koseki2580/skills/tree/main/skills/explain-code
Command: npx skills add https://github.com/koseki2580/skills --skill explain-code-koseki2580

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps people understand unfamiliar or newly generated code by breaking it into readable blocks and explaining each part in plain language.

Core Features & Use Cases

  • Block-by-block code walkthroughs: Creates a side-by-side view where the real source is shown alongside a mentor-style explanation for each highlighted block.
  • Worked example values: Uses concrete input values so readers can understand intent and outcomes, not just structure.
  • Accurate, source-grounded explanations: Reads the real source code to avoid guessing, and only asserts behavior supported by what was actually seen.

Quick Start

Ask the AI to explain this code by walking through the file/module top to bottom with a concrete worked example value for the key logic.

Frequently Asked Questions about explain-code

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

FAQPage Schema
How do I explain unfamiliar code to new developers during onboarding?▼

Block-by-block code walkthroughs explain unfamiliar code to new developers by generating a side-by-side HTML view pairing verbatim source with mentor-style explanations and concrete worked example values.

What is the best way to generate documentation for newly written code?▼

Generating documentation for newly written code is best done via source-grounded walkthroughs that read real source files, break them into ordered titled blocks, and verify explanations match the actual code.

Can I use this walkthrough approach for code spanning multiple files and directories?▼

Yes, this walkthrough approach supports code across multiple files and directories in scope by building a dedicated walkthrough JSON per file containing verbatim code and ordered explanatory blocks.

How does worked example visualization help understand code behavior?▼

Worked example visualization helps understand code behavior by applying concrete input values to key logic, allowing readers to trace exact outcomes and intent rather than just reviewing structural syntax.

Does the generated code explanation rely on guessing the module logic?▼

No, the generated code explanation does not guess module logic; it reads the real source code and only asserts behavior supported by what was actually seen, verifying claims against build output.

When do I need a side-by-side mentor rail for code visualization?▼

You need a side-by-side mentor rail for code visualization when onboarding to unfamiliar modules and requiring plain language explanations aligned directly with highlighted source blocks.

Related Skills

Explore More Education & Research Skills→
twlinestwlines

document

Generates structured Markdown documentation for Effect-TS code files and services.

Community
Intermediate
koseki2580koseki2580

code-viz-core

Generate self-contained HTML code walkthroughs from per-file JSON inputs.

Community
Intermediate
cropsggcropsgg
15

chain-of-verification

Verify factual claims about code against source files and dependencies.

Community
Advanced
treevestreeves

Using the Block Collection and Block Party

Queries the Block Collection and Block Party for AEM block reference implementations and outputs structured JSON metadata.

Community
Intermediate