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.
Announcing mattpocock/skills v1
- Achieved a 63% reduction in token cost for skill descriptions
- Split skills into model-invocable and user-invocable skills, adding /codebase-design, /domain-modeling, and /grilling
- (UPDATED) /writing-great-skills - rewritten from the ground up, encoding my skill-writing best practices
- (UPDATED) /diagnose -> /diagnosing-bugs - now model-invocable, awesome for fixing hard bugs
- (NEW) /ask-matt: a router skill that teaches you how all the engineering skills work together
Steps to become a senior programmer:
1. Install my /teach skill
npx skills add mattpocock/skills --skill teach
2. Create a new working directory on your laptop
mkdir junior-to-senior
cd junior-to-senior
3. Kick off your coding agent in the directory
claude
4. Copy this prompt
/teach me how to be a great strategic programmer. My opinion is that AI is eating 'tactical, on-the-ground' programming. The day-to-day work of a developer involves not only coding, but also planning, QA, codebase design, and much more. I'm interested in learning the strategic skills - that, in a previous era, would take me from junior to senior - but in this era are table stakes.
5. Paste it into the coding agent
Below is an example of what the first output will look like. I used Opus 4.8, medium effort.
6. Continue working with the agent until you're a senior