yassimba/loom/explain-code-flow
Claude Code and agent skill by yassimba/loom
- community
Checking that the SKILL.md file is still in the repository.
Explain a feature's runtime flow, data transformations, and input/output contracts as a visual narrative with Mermaid. Use when explaining code flow, creating a code walkthrough, or tracing an object's full lineage.
Install
npx vskill@latest install yassimba/loom/explain-code-flowSKILL.md
Explain Code Flow
Explain a feature's data flow: inputs, transformations, outputs, side effects, decisions, and failures. Ground every claim in actual code, with source references and explicit unknowns. Before tracing, read references/repository-evidence.md.
Trace the story
- Start at the runtime entry point or public API, not an arbitrary file.
- Find the data spine: the important object or value that crosses stages.
- Follow the happy path from input to final output before adding branches.
- Trace failures, retries, and background or parallel processes as separate flows.
- Choose the clearest psychological order: top-down, data-centric, request narrative,
or problem-solution. Explain in the order a reader needs, not filesystem order.
For object lineage, trace creation, mutations, mappings, copies, storage, and consumers. Show every identity or shape change and meaningful branch.
Build narrative chunks
Write a section outline before writing prose or code. Each section should:
- Motivate the problem it solves
- Show a diagram
- Present the relevant code through focused excerpts and verified
file:linereferences - Explain non-obvious decisions
Treat each section as one conceptual chunk. Use one fenced mermaid block per concept; do not cram everything into one diagram. Label edges with the data type or action being performed, keep diagrams to about 10–15 nodes, and split larger concepts. Place each diagram before the code it describes so the reader has a mental model first.
Do not reproduce complete files: source code remains the source of truth.
Read references/content-brief-by-type.md to choose each diagram and references/authoring-invariants.md to keep it focused. Prefer operations in nodes and data on arrows. Add sequence, class, ER, state, or field-lineage views only when they answer a different question.
When comparing revisions, read references/diagram-diff.md. Show additions with :::green, removals with :::red, and changes with :::orange where supported.
Deliver the walkthrough in chat with fenced mermaid blocks. Do not generate SVG, HTML, or image artifacts. The reader should be able to follow inputs to results without reconstructing the call graph.
Security
- Security scanPassed, 95 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingskills/explain-code-flow/SKILL.md
Popularity
- 7-day trend score
- 5
Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/yassimba/loom/explain-code-flow)