skills.rest
guifry
guifryCOMMUNITY
Explore all skills by this author →
GitHub

explain

Generate self-contained HTML explainers with SVG diagrams for codebase concepts.

Updated Jul 6, 2020
Search Tags:#architecture#onboarding#codebase#explain#visual-diagrams#html-explainer
One-click install
npx skills add https://github.com/guifry/devconfig --skill explain-guifry
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: explain
Source: https://github.com/guifry/devconfig/tree/main/claude/skills/explain
Command: npx skills add https://github.com/guifry/devconfig --skill explain-guifry

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps engineers quickly generate self-contained HTML explainers that illustrate business context, data flows, and architecture for unfamiliar codebases.

Core Features & Use Cases

  • Visual diagrams: SVG-based representations of domain, application, and infrastructure components.
  • Interactive demos: controls that demonstrate logic and outcomes, with hover-enabled diagrams.
  • File maps: include a tree-like overview of relevant files and their roles to accelerate onboarding.

Quick Start

Provide a topic (for example, "Authentication flow") to generate a self-contained HTML explainer for that codebase concept.

Frequently Asked Questions about explain

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

FAQPage Schema
How do I create visual diagrams for an unfamiliar codebase?▼

You can generate visual diagrams for an unfamiliar codebase by creating a self-contained HTML explainer that uses inline SVG to visualize domain components, application architecture, and data flows.

What is the best way to document codebase architecture for onboarding?▼

Documenting codebase architecture for onboarding is best done with a self-contained HTML explainer that combines business context, SVG visual diagrams, and a tree-like file map to accelerate engineer understanding.

Can I generate interactive codebase demos without external dependencies?▼

Yes, you can generate a single self-contained HTML file with inline CSS and JS that includes interactive controls and hover-enabled SVG diagrams without relying on any external dependencies.

How do I explain a specific feature flow like authentication to new engineers?▼

To explain a specific feature flow like authentication, you provide the topic to generate an HTML explainer that visualizes the data flows, business context, and architecture of that codebase concept.

Does generating an HTML codebase explainer require external libraries?▼

Generating an HTML codebase explainer does not require external libraries, as the output is a single self-contained HTML file using inline CSS, inline JS, and SVG for diagrams.

What should I include in a codebase explainer to help engineers understand context?▼

A codebase explainer should include business context, visual SVG diagrams of infrastructure, interactive demos demonstrating logic, and a file map overview to help engineers understand unfamiliar code.

Related Skills

Explore More Software Engineering Skills→
selcukyucelselcukyucel
7

document

Generate CLAUDE.md context files from a module's source code.

Community
Intermediate
RayzerrekRayzerrek

plannotator-visual-explainer

Generate self-contained HTML visualizations for technical communication and review.

Community
Advanced
SensLiaoSensLiao

arch-viz

Convert source code repositories into architecture diagrams and data graphs.

Community
Advanced
tassosgomestassosgomes

mermaid-creator

Generate Mermaid diagrams from FDD prompts into a single Markdown file.

Community
Intermediate