Explain code

Skill phuquocchamp/qengine/skills/explain-code

Explains code with visual diagrams and analogies. Use when explaining how code works, teaching about a codebase, or when the user asks "how does this work?"From its SKILL.md

Install

npx -y skills add phuquocchamp/qengine --skill explain-code

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.7 KB, as published. Nobody here has run it

Explain Code

1. Reading the Parameters

The skill is invoked as /explain-code <params>. Parse <params> before doing anything else:

Target — a file path, symbol name, or code snippet to explain.
Instructions — optional free-text after the target that scopes or steers the explanation.
If no params are given, ask the user: "What would you like me to explain? Please share a file path, function name, or paste the code."

If a file path is given, read the file first. If a symbol name is given, search for it in the codebase before explaining.

When explaining code, always include:

Start with an analogy: Compare the code to something from everyday life
Draw a Mermaid diagram: Visualize the flow, structure, or relationships using a Mermaid code block
Walk through the code: Explain step-by-step what happens
Highlight a gotcha: What's a common mistake or misconception?

Keep explanations conversational. For complex concepts, use multiple analogies.

2. Save as Markdown Report

After explaining, always write the full explanation to a file in ./docs/explain/.

Filename format: yyyy-MM-dd-<kebab-case-purpose>.md
Example: 2026-04-14-oauth-proxy-flow.md
Use today's date from the system date
The purpose slug should reflect what was explained (2–5 words, kebab-case)
The file must contain everything shown in the response: analogy, diagram, walkthrough, and gotcha
Create the ./docs/ directory if it does not exist

3. Mermaid Diagram Guidelines (v11)

Pick the diagram type that best fits the concept:

Concept	Diagram type
Data / control flow, pipelines	`flowchart`
Request/response, auth handshakes	`sequenceDiagram`
Class hierarchy, interfaces	`classDiagram`
State machines, lifecycle	`stateDiagram-v2`
DB schema, relationships	`erDiagram`

Syntax rules (Mermaid v11):

Use flowchart (not the legacy graph keyword)
Break new line: <br> instead of /n

Use YAML frontmatter for config — not the deprecated %%{init:...}%% directive:

```mermaid
---
config:
  theme: default
---
flowchart LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Done]
  B -->|No| A
```

Keep node labels short and free of special characters
Prefer LR (left-to-right) for flows, TD (top-down) for hierarchies