Загрузка видео...

Не удалось загрузить видео

На главную

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...

1,465,604 просмотров • 8 месяцев назад •via X (Twitter)

Комментарии: 34

Фото профиля gootecks
gootecks8 месяцев назад

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!!! 🙏

Фото профиля Leon Ho
Leon Ho8 месяцев назад

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.

Фото профиля Chris Sonnier
Chris Sonnier8 месяцев назад

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

Фото профиля Fran Arant
Fran Arant8 месяцев назад

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

Фото профиля OneManSaas
OneManSaas8 месяцев назад

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.

Фото профиля neonwatty
neonwatty8 месяцев назад

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.

Фото профиля Manuel Odendahl
Manuel Odendahl8 месяцев назад

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.

Фото профиля silv
silv8 месяцев назад

needed this, thank you

Фото профиля fero
fero8 месяцев назад

just use mermaid diagrams, no?

Фото профиля Roberto Mello
Roberto Mello8 месяцев назад

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

Фото профиля shpetim
shpetim8 месяцев назад

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 :)

Фото профиля Bill Wheelock
Bill Wheelock8 месяцев назад

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.

Фото профиля J. Mario Meissner
J. Mario Meissner8 месяцев назад

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

Фото профиля Marchen
Marchen8 месяцев назад

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

Фото профиля jay
jay8 месяцев назад

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

Фото профиля Kelly Sommers
Kelly Sommers8 месяцев назад

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

Фото профиля Chris Butler
Chris Butler8 месяцев назад

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!

Фото профиля Vasilije
Vasilije8 месяцев назад

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

Фото профиля Sheldon ⚡ Hull
Sheldon ⚡ Hull8 месяцев назад

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.

Фото профиля Tomash Devenishek
Tomash Devenishek8 месяцев назад

Boss!

Фото профиля KShivendu 🌁
KShivendu 🌁3 месяцев назад

Looks promising. I've installed it. Thanks!

Фото профиля Cobalt ☥☥
Cobalt ☥☥8 месяцев назад

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

Фото профиля Jesse
Jesse8 месяцев назад

Brilliant. Thanks 🙏

Фото профиля Maxime Steinhausser
Maxime Steinhausser8 месяцев назад

Game changer! Thanks 💖 🙏

Фото профиля Josie Kins
Josie Kins5 месяцев назад

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

Фото профиля Shake®
Shake®6 месяцев назад

this is awesome man, ggz

Фото профиля Julius Gonzalez
Julius Gonzalez8 месяцев назад

@amorriscode potential core product feature 👀

Фото профиля Saushank.eth
Saushank.eth8 месяцев назад

@AdamBoudj

Фото профиля Lavine
Lavine2 месяцев назад

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.

Фото профиля Lautaro.x
Lautaro.x8 месяцев назад

Very cool

Фото профиля Kelly Sommers
Kelly Sommers8 месяцев назад

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

Фото профиля Noel Smith
Noel Smith8 месяцев назад

Cool

Фото профиля Hariharan S
Hariharan S8 месяцев назад

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

Фото профиля darshil
darshil8 месяцев назад

just use obsidian

Похожие видео

Introducing /visual-plan - a skill to generate rich, visual plans for Claude Code and Codex. Plan mode in Claude Code is incredible. But I always find my eyes glazing over when it gives me this huge markdown essay in my terminal. I found I can make much better visual plans with reusable components. So I made a skill called `/visual-plan`. It generates plans as MDX with visual, interactive components. Diagrams, interactive API specs, schema design changes, annotated code, and even pan and zoomable wireframes. So for any UI work, you can look at a wireframe first, comment on it, iterate, and then have the agent work. I’ve found this to be a much more intuitive interface for reasoning about what the agent is doing. It’s somewhat inspired by that popular post about how HTML is better than Markdown. But HTML can be slow and verbose to write. And it doesn’t look good checked into a repo. This has really made me feel like humans and engineering are entering a new abstraction phase, where we reason about things at the plan level. As long as the plan is good, agents are getting more and more reliable at executing on it. Almost to the degree that we trust the C compiler to compile to assembly reliably. Plans are the new intermediate representation. I also made a skill for the reverse of this, called `/visual-recap`. After the agent works, it gives you a recap of everything it did. Same idea: wireframes, interactive API specs and diffs, schemas, annotated code, etc. So now when you’re reviewing what the agent did for you, or looking at a pull request of somebody else’s code, you can see a visual recap instead of just reading a wall of text. It’s all free and open source. You can find it on my GitHub. Will link to it in the reply because we all know how dumb these algorithms are with links.

Steve (Builder.io)

126,758 просмотров • 4 месяцев назад

AG-UI makes building agentic applications dramatically easier. Here's how it works. This is a model for a simple chatbot: User → LLM → Response But interactive agents that render UI, pause for approvals, and ask users for input need a much more complex model. When building these agents, a response from the LLM will include a series of state changes as the agent runs: • Agent started a task • Agent called a tool • Agent updated its state • Agent streams these tokens • Agent is waiting on a human • Agent is resuming the task The Agent-User Interaction Protocol (AG-UI) treats the LLM response as a stream of events rather than a text endpoint. In practice, here is what you get as an agent runs: 1. Lifecycle events so your UI knows where the agent is. 2. Text messages that stream tokens. 3. Tool calls so your UI can prefill a form with any required arguments. 4. State updates that keep your UI in sync with the agent. 5. Special events for human approvals, rich media, and custom needs. All of these events travel over standard transports (SSE, WebSockets, or plain HTTP) as JSON. As a result, you can build a frontend that stays in sync with the agent's progress without having to invent a custom process to make this happen. For example, building a human-in-the-loop workflow becomes an off-the-shelf component you can integrate rather than build from scratch. CopilotKit🪁 is the creator of AG-UI, and you can use it when building frontend applications pretty much anywhere: • React • Angular • Vue • React Native • Slack • Teams • Discord • WhatsApp • Telegram Here is the link for you to check it out: Thanks to the CopilotKit team for partnering with me on this post.

Santiago

17,438 просмотров • 4 месяцев назад