evondev

Frontend Dev

[evondev @evon_dev]

I built a UI/UX skill for Coding Agents 🎨

Github: https://t.co/ZNHkYX8avJ

Website: https://t.co/3eByURucAQ

[Steve (Builder.io) @Steve8708]

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.

[Matt Pocock @mattpocockuk]

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

[Matt Pocock @mattpocockuk]

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

[evondev @evon_dev]

https://t.co/Ya5cawWYWh

[evondev @evon_dev]

@BeiDao_98 @AlloraNetwork @cysic_xyz @zama_fhe 恭喜里程碑！yaps 单日 +52、总分破 400 太猛了，冲 500 冲

[evondev @evon_dev]

@crescentf0real @oguzyagizkara is the best

[evondev @evon_dev]

@GoogleDesign @Google Hope to see Google Sans Mono

[evondev @evon_dev]

@noahsolomon nice! what is your terminal font ?

[Alex Sidorenko @asidorenko_]

Streaming metadata in Next.js 15.2

[Alex Sidorenko @asidorenko_]

View Transitions in Next.js 15.2

[Alex Sidorenko @asidorenko_]

"How to stop refetching certain server components during navigation in Next.js"

Move them to layout

[Alex Sidorenko @asidorenko_]

How to make code animations in Apple Keynote

[Alex Sidorenko @asidorenko_]

How to differentiate page.tsx tabs from Next.js in VS Code?

[James Laurent @jameslaurents]

Dribble designs do not generate revenue for clients, and here are 6 reasons why

Open it up: 🧵

[Aiden Bai @aidenybai]

why does React have "Rules of Hooks?"

[Alex Sidorenko @asidorenko_]

How to revalidate a single item in the list after mutation with Server Actions

[evondev @evon_dev]

@thekhuongeth all in

[Guillermo Rauch @rauchg]

What should we improve about @vercel / @v0 / @nextjs next?

[Alex Sidorenko @asidorenko_]

How to recover from a server component error in Next.js