code-slowmo

Understand code by watching it run in slow motion. An agent skill that builds interactive, plain-language explainers: system maps, step-by-step timelines and line-by-line code runs.

While I was building my project which is a complex design tool I usually ran into issues with trying to understand certain parts of the system since I mostly vibe code using Claude Code. Trying to read code line by line was a tiring process and getting AI to explain by generating a huge wall of text makes me zone out.

Understanding certain parts of complex systems was crucial because a lot of times I usually have to propose more optimal solutions to what the AI did and just to have a proper understanding of what's going on in the codebase.

This is why I created the code-slowmo skill, ask it to explain the high level architecture of your codebase, ask it to show you a visualization of how complex parts of your systems work and if you want more granular knowledge like trying to understand a complex algorithm line by line code-slowmo can also make this way easier.

How I built it: I built code-slowmo with Claude Code. The agent reads the real code first and notes the file and line behind each claim, then writes the page content as a small JSON file, and a Python script checks it before building the page. The checker rejects steps over 40 words, code names with no plain explanation, filler words and passive voice, because the whole point is that you don't have to fight through jargon. The page design follows research on learning from pictures and animation: it starts paused, you control the pace, the layout never jumps around, and a couple of steps ask you to guess what happens next before showing you. The result is one HTML file that opens in any browser, no server or account.

You can use code-slowmo with any coding harness of your choice including Claude Code, Codex and OpenCode.

To install: npx skills add precious112/code-slowmo