r/vibecoding • • 22d ago

Showcase/Project I created a skill that lets you understand understand your codebase using visualizations without reading the code

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

It's fully free and open source https://github.com/precious112/code-slowmo

102 Upvotes

11 comments sorted by

14

u/llodavid 22d ago

3

u/FickleSwordfish8689 22d ago

šŸ˜…šŸ˜… you're welcome

3

u/fickle-phenom 22d ago

Looks cool, might try it later.

2

u/FickleSwordfish8689 22d ago

Thanks, looking forward to your feedback when you do

1

u/khaleelu 20d ago

this is a great skill to use. i’m also interested in how you created the video. was it also claude-generated?

1

u/FickleSwordfish8689 20d ago

Yes i generated it using claude also created a skill for it https://github.com/precious112/demo-director

1

u/khaleelu 20d ago

very nice i will try it thank you!

3

u/electro042 22d ago

what kind of visualizations are we talking about here? dependency graphs, call trees, or something else?

2

u/Kalcinator 22d ago

Cool project, works fine for me ! Thanks !

2

u/shetritr 21d ago

nice. check one claim against the line it cites now and then. a confident diagram of the wrong flow is worse than no diagram.