Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

118,316 görüntüleme • 3 ay önce •via X (Twitter)

35 Yorum

Steve (Builder.io) profil fotoğrafı
Steve (Builder.io)3 ay önce

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

Kent C. Dodds 🐨 profil fotoğrafı
Kent C. Dodds 🐨3 ay önce

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) profil fotoğrafı
Steve (Builder.io)3 ay önce

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

Yoav Ganbar profil fotoğrafı
Yoav Ganbar3 ay önce

@kentcdodds looks sweet! most def geek diving into this

Chukwudi Nwobodo profil fotoğrafı
Chukwudi Nwobodo3 ay önce

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

Steve (Builder.io) profil fotoğrafı
Steve (Builder.io)3 ay önce

absolutely

Chukwudi Nwobodo profil fotoğrafı
Chukwudi Nwobodo3 ay önce

Thank you so much

Chris Scott profil fotoğrafı
Chris Scott3 ay önce

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

Quardart Seisey profil fotoğrafı
Quardart Seisey3 ay önce

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

Russell Joshua profil fotoğrafı
Russell Joshua3 ay önce

*yoink

Cruz profil fotoğrafı
Cruz3 ay önce

@kentcdodds This is a great way to approve a bug

Paulund profil fotoğrafı
Paulund3 ay önce

This is really cool. Great work Steve.

A. F. ♪ profil fotoğrafı
A. F. ♪3 ay önce

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💫 profil fotoğrafı
giiid💫3 ay önce

is it opencode compatible?

Steve (Builder.io) profil fotoğrafı
Steve (Builder.io)3 ay önce

absolutely is

Cyrus Radfar profil fotoğrafı
Cyrus Radfar3 ay önce

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

Chiara profil fotoğrafı
Chiara3 ay önce

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 profil fotoğrafı
Andy Wang3 ay önce

@plannotator

Ravin Sharma profil fotoğrafı
Ravin Sharma3 ay önce

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

Shara profil fotoğrafı
Shara3 ay önce

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

Ireneusz Patalas profil fotoğrafı
Ireneusz Patalas3 ay önce

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) profil fotoğrafı
Steve (Builder.io)3 ay önce

works anywhere - GitHub is just an example

Ireneusz Patalas profil fotoğrafı
Ireneusz Patalas3 ay önce

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 🍥 profil fotoğrafı
ᕲΛᐺΞ ᗷΛᖇᖇΞTT 🍥3 ay önce

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 profil fotoğrafı
Sebastian Buzdugan3 ay önce

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

ΛNGΞL profil fotoğrafı
ΛNGΞL3 ay önce

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

Rifad profil fotoğrafı
Rifad3 ay önce

Anthropic should hire you

Bhagyesh Radiya profil fotoğrafı
Bhagyesh Radiya3 ay önce

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

Piyush profil fotoğrafı
Piyush3 ay önce

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

Hanan Beer profil fotoğrafı
Hanan Beer3 ay önce

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 profil fotoğrafı
Timur Yessenov3 ay önce

@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. profil fotoğrafı
Sophie e.2 ay önce

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 profil fotoğrafı
Back LLM Radar|Syl3 ay önce

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 profil fotoğrafı
Theo3 ay önce

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

Ovi Bodea profil fotoğrafı
Ovi Bodea3 ay önce

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

Benzer Videolar

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 görüntüleme • 4 ay önce