Loading video...

Video Failed to Load

Go Home

How I've changed the way I do code reviews by using the /visual-recap skill:

118,316 views • 3 months ago •via X (Twitter)

35 Comments

Steve (Builder.io)'s profile picture
Steve (Builder.io)3 months ago

Source and install instructions here: Source for the MDX viewer/editor here:

Kent C. Dodds 🐨's profile picture
Kent C. Dodds 🐨3 months ago

I'm going to try this out and make a video about it. I talked to several people at AIE this week about building this exact skill myself, so I'm excited to play with it!

Steve (Builder.io)'s profile picture
Steve (Builder.io)3 months ago

amazing @kentcdodds, if you have any Qs or issues DM me anytime, happy to help

Yoav Ganbar's profile picture
Yoav Ganbar3 months ago

@kentcdodds looks sweet! most def geek diving into this

Chukwudi Nwobodo's profile picture
Chukwudi Nwobodo3 months ago

@Steve8708 do i have permission to add this to my harness?

Steve (Builder.io)'s profile picture
Steve (Builder.io)3 months ago

absolutely

Chukwudi Nwobodo's profile picture
Chukwudi Nwobodo3 months ago

Thank you so much

Chris Scott's profile picture
Chris Scott3 months ago

I use this same skill with some modifications for pr review also.

Quardart Seisey's profile picture
Quardart Seisey3 months ago

I changed the way I do code reviews by letting codex review claude PRs and letting claude review codex PRs 😆

Russell Joshua's profile picture
Russell Joshua3 months ago

*yoink

Cruz's profile picture
Cruz3 months ago

@kentcdodds This is a great way to approve a bug

Paulund's profile picture
Paulund3 months ago

This is really cool. Great work Steve.

A. F. ♪'s profile picture
A. F. ♪3 months ago

When I get the time, I will try to use it on gitlab, since I no longer use github, unless you port it before I get to it.

giiid💫's profile picture
giiid💫3 months ago

is it opencode compatible?

Steve (Builder.io)'s profile picture
Steve (Builder.io)3 months ago

absolutely is

Cyrus Radfar's profile picture
Cyrus Radfar3 months ago

you could also use code tours bias: I created it 🤭

Chiara's profile picture
Chiara3 months ago

anything that speeds up a code review is a clear win. you get to approve the deployment that takes down production with unprecedented efficiency

Andy Wang's profile picture
Andy Wang3 months ago

@plannotator

Ravin Sharma's profile picture
Ravin Sharma3 months ago

I am building something similar, but more granular control, and better experience.

Shara's profile picture
Shara3 months ago

Turning reviews into actual reviews instead of rubber stamps is valuable.

Ireneusz Patalas's profile picture
Ireneusz Patalas3 months ago

Is it GitHub only or can I also use it locally with any git repo when I check out the PR branch?

Steve (Builder.io)'s profile picture
Steve (Builder.io)3 months ago

works anywhere - GitHub is just an example

Ireneusz Patalas's profile picture
Ireneusz Patalas3 months ago

Tried it today with the plan (it’s awesome!) but I wonder how do I do /visual-recap on a PR outside GitHub? Do I need to checkout the PR branch and it will figure out the diff from that automatically?

ᕲΛᐺΞ ᗷΛᖇᖇΞTT 🍥's profile picture
ᕲΛᐺΞ ᗷΛᖇᖇΞTT 🍥3 months ago

You still do code reviews? Our team's workflow has PR reviews mostly automated - We require a human review also, but the majority of the time it's nailing it & flagging anything important. We have a /respond the engineer can address anything that was relevant or decline points

Sebastian Buzdugan's profile picture
Sebastian Buzdugan3 months ago

/visual-recap catches shape, but deleted tests still need boring manual review

ΛNGΞL's profile picture
ΛNGΞL3 months ago

Do you have a YouTube channel where you explain the other skills as well? 👀

Rifad's profile picture
Rifad3 months ago

Anthropic should hire you

Bhagyesh Radiya's profile picture
Bhagyesh Radiya3 months ago

Will definitely give it a try seems good but, how it is different from artifacts which is launched today by claude

Piyush's profile picture
Piyush3 months ago

Try , you might change how you code with agents:)

Hanan Beer's profile picture
Hanan Beer3 months ago

I made a graphviz skill to show me well graphviz lol prompt in the top right corner (sorry I had to censor a bit for security - probably nothing sensitive but better safe than sorry)

Timur Yessenov's profile picture
Timur Yessenov3 months ago

@Steve8708 The MDX viewer is the useful clue. Code review shouldn’t start from a wall of comments; it should start from the changed screen/state, then jump into the diff that made it happen.

Sophie e.'s profile picture
Sophie e.2 months ago

A one-size-fits-all visual recap can miss the nuance of logic errors. How do you keep the team from relying on it as a crutch instead of thinking critically?

Back LLM Radar|Syl's profile picture
Back LLM Radar|Syl3 months ago

This is the right direction. Code review is becoming less “read the diff” and more “verify the artifact.” A useful recap should include screenshots, user path, changed files, risk labels, untested cases, and rollback notes. Makes AI-assisted review auditable, not just faster.

Theo's profile picture
Theo3 months ago

Check out it has been a complete game changer for me.

Ovi Bodea's profile picture
Ovi Bodea3 months ago

been building something like this as well, but this is so much better, plus the MDX idea is genius! I'm playing with it right now

Related Videos

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 views • 4 months ago