Loading video...
Video Failed to Load
Created an agent skill called “Visual Explainer” + set of complementary slash commands aimed to reduce my cognitive debt so the agent can explain complex things as rich HTML pages. The skill includes reference templates and a CSS pattern library so output stays consistently well-designed. Much easier for me... show more
1,458,847 views • 7 months ago •via X (Twitter)
34 Comments

you're a wizard, WOW and here I was thinking I had gotten some decent mermaid output with a couple of skills put together 🤣 no joke, visual explainer puts the other mermaid skills to shame thank you!!! 🙏

Smart move. I noticed the same thing building agent skills - once output format is standardized, you stop reading and start scanning. That's where the cognitive savings actually live, not in the answer itself but in how fast your brain can parse it.

@GregThatIsAll This is why I built because I got tired of reading markdown files and there is so much more depth to html files.

That looks very cool! I have been having it make text adventure "memory palaces" 😅

The CSS pattern library is clutch. I built similar templates for my SaaS docs and it cut explanation time by 60%. Nothing worse than rebuilding the same visual structure every time you need to break down a complex workflow.

At first glance, I thought you were outputting code generation to HTML, but the usage in the readme clarifies usage for tables, charts, etc. Very nice.

Been playing with that idea (and similar ideas to the other extension you have with the feedback widgets). Also playing with generating PDF forms to upload to my tablet so I can check things off away from the computer. Didn't get around to cleaning them up since just annotating my documents by hand is currently good enough. Love your stuff.

needed this, thank you

just use mermaid diagrams, no?

How’s it different from anthropic’s playground plugin?

This is pretty neat and good effort. But I think this level of "instruction" will overload the AI. Too much wasted on context having to follow those prompts and templates. I prefer to give the AI a loaded gun :)

Yes! This! I've been doing this for awhile, but this is far more formal. A lot of times when discussing a spec or new task with my PM agent, I'll ask for an HTML with dynamic elements to visualize it. Helps if you tell it to add some rizz.

This is genuinely incredible, bookmarked 📕 I wouldn’t be surprised if something like this gets integrated into the CLIs themselves soon

the css pattern library is a nice touch - keeps output consistent without having to specify styling every time

This looks really cool, great job and thanks for sharing 👌🏻

This is fire and thanks so much for sharing. I’m doing something kind of similar but not as good as you Every new feature, optimization investigation, or learning I ask Codex to write me a readme markdowns with high level with links to individual markdown docs with deep dives

This is great. I've been doing this on my "explanation" markdown files lately, never got around to writing a skill for it. Will give it a rip!

Rich HTML explanations instead of terminal walls of text. That's a quality of life unlock.

I've been using anthropic as playground skill and loving it. This reminds me of this but a different feel. I'm definitely gonna give it a try. Nice work.

Boss!

Looks promising. I've installed it. Thanks!

we converged on making similar tooling within the same ~20 hr period lol. nice

Brilliant. Thanks 🙏

Game changer! Thanks 💖 🙏

immediately installed and found it much better than the diagrams i've asked codex to produce in the past, thanks!

this is awesome man, ggz

@amorriscode potential core product feature 👀

@AdamBoudj

pi-deep-research v0.3.0: pi install npm:pi-deep-research Pair it with @nicopreme's Visual Explainer and the results come back as visual reports instead of a wall of text. The search tool is now a hot-pluggable provider chain. Tavily + Brave built in.

Very cool

Then I tell it in every deep dive use any mermaid diagrams it thinks would be helpful to teach me topology, interactions, concurrency and sequences. So it’ll generate me flow diagrams or sequence diagrams etc

Cool

I built something similar but not as beautiful looking as yours. All mods to the mermaid diagrams are so nice. I might steal some.

just use obsidian
