explain-n8n

Any piece of code, drawn as an n8n workflow you can click through.

Claude Code skill

I understand code best as an n8n drawing. So instead of a wall of text, this skill reads the code behind a concept and draws it as a workflow, with a tile for each step, connectors for the data, branches, loops and sticky notes.

• Reads the code from its entry point, follows the calls two levels deep, and notes every file it read.
• Plans a main canvas of 6 to 12 steps, with the detail in nested workflows up to three levels down.
• Clicking a step opens its input, parameters and output, the n8n node it behaves like, the real code lines, example data and the gotchas.
• Example runs light up the path step by step with item counts, and a document view reads it top to bottom.
• Publishes the page privately as a claude.ai artifact, or writes one HTML file you open in a browser.

• A step it could not confirm in the code is marked as assumed, with the reason, and never drawn as fact.
• Its checker refuses a page with anything shaped like a secret, or real personal data in the example data. Example data is always made up.

Install it in Claude Code:

/plugin marketplace add Ibrahim-ElKhansa/claude-code-skills
/plugin install explain-n8n@ibrahim-elkhansa

• /explain-n8n <topic>A concept, such as how a sign in works.
• /explain-n8n <path:line>Starts from a file, a line or a function.

Installed this way, it runs as /explain-n8n:explain-n8n. You can also copy its folder from GitHub to ~/.claude/skills/explain-n8n/ and run it as /explain-n8n.