A problem every hackathon builder who is vibe coding has: a lot of times, the demo works; you built it with an agent over the last six hours, but you genuinely don't know what is going on under the hood.
That's why I built show-me-the-build — a Claude Code / Cursor / Codex (or any other LLM) skill that turns any codebase or cloud deployment with any agent into a self-building HTML presentation. Type one command, and it walks through what got built, why it was built that way, and how it actually runs.
The part that actually matters
Anyone can generate a static architecture diagram. The interesting bit is that this one builds itself, step by step — resources or modules appear one at a time, in the order they were actually created, with the connections between them drawn live. Click any box and a drawer opens with a real one-sentence reason it exists — not an invented "reduces coupling," but the actual reason, pulled from your code or your infra docs.
It ships as one self-contained HTML file. No server, no build step. Copy it, present it, done.
Where it's actually useful
Two situations, mainly:
- Hackathons and competitions. You vibe-coded for hours with an agent. Now you need thirty seconds to explain the architecture to a judge who wasn't there for any of it.
- Inheriting a vibe-coded app — yours or a teammate's — where nobody's entirely sure what's actually wired to what anymore.
Try it
npx skills@latest add sanidhya-build/skills --skill=show-me-the-build
Or if you are lazy like me, just ask your agent the following :
Install the show-me-the-build skill via npx (npx skills@latest add sanidhya-build/skills --skill=show-me-the-build). Install the skill in this agent's global /skills folder.
Then type /show-me-the-build in your agent of choice.
Full write-up, examples, and the source are at show-me-the-build-website.vercel.app.
Follow me for more content around community and tech
Top comments (0)