正在加载视频...

视频加载失败

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

118,316 次观看 • 3 个月前 •via X (Twitter)

35 条评论

Steve (Builder.io) 的头像
Steve (Builder.io)3 个月前

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

Kent C. Dodds 🐨 的头像
Kent C. Dodds 🐨3 个月前

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) 的头像
Steve (Builder.io)3 个月前

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

Yoav Ganbar 的头像
Yoav Ganbar3 个月前

@kentcdodds looks sweet! most def geek diving into this

Chukwudi Nwobodo 的头像
Chukwudi Nwobodo3 个月前

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

Steve (Builder.io) 的头像
Steve (Builder.io)3 个月前

absolutely

Chukwudi Nwobodo 的头像
Chukwudi Nwobodo3 个月前

Thank you so much

Chris Scott 的头像
Chris Scott3 个月前

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

Quardart Seisey 的头像
Quardart Seisey3 个月前

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

Russell Joshua 的头像
Russell Joshua3 个月前

*yoink

Cruz 的头像
Cruz3 个月前

@kentcdodds This is a great way to approve a bug

Paulund 的头像
Paulund3 个月前

This is really cool. Great work Steve.

A. F. ♪ 的头像
A. F. ♪3 个月前

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💫 的头像
giiid💫3 个月前

is it opencode compatible?

Steve (Builder.io) 的头像
Steve (Builder.io)3 个月前

absolutely is

Cyrus Radfar 的头像
Cyrus Radfar3 个月前

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

Chiara 的头像
Chiara3 个月前

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 的头像
Andy Wang3 个月前

@plannotator

Ravin Sharma 的头像
Ravin Sharma3 个月前

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

Shara 的头像
Shara3 个月前

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

Ireneusz Patalas 的头像
Ireneusz Patalas3 个月前

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) 的头像
Steve (Builder.io)3 个月前

works anywhere - GitHub is just an example

Ireneusz Patalas 的头像
Ireneusz Patalas3 个月前

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 🍥 的头像
ᕲΛᐺΞ ᗷΛᖇᖇΞTT 🍥3 个月前

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 的头像
Sebastian Buzdugan3 个月前

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

ΛNGΞL 的头像
ΛNGΞL3 个月前

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

Rifad 的头像
Rifad3 个月前

Anthropic should hire you

Bhagyesh Radiya 的头像
Bhagyesh Radiya3 个月前

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

Piyush 的头像
Piyush3 个月前

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

Hanan Beer 的头像
Hanan Beer3 个月前

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 的头像
Timur Yessenov3 个月前

@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. 的头像
Sophie e.2 个月前

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 的头像
Back LLM Radar|Syl3 个月前

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 的头像
Theo3 个月前

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

Ovi Bodea 的头像
Ovi Bodea3 个月前

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

相关视频

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 个月前