I've been working on a skill that makes better HTML plans in Claude Code. It uses simple language, shows code snippets, surfaces questions & makes mockups. Linting reduces the normal failure cases that Claude runs into. Would love your feedback before shipping more broadly!

install it and give me feedback with: claude plugin marketplace add anthropics/claude-plugins-community claude plugin install html-plan@claude-community here's an example:

I particularly like the call stacks (got this from @dillon_mulroy) and ability to annotate code snippets

Idk the UI in this video feels a bit chaotic to me. I think too much variance in font sizes, positioning of visual elements, etc It's not calm to look at imo

yeah good feedback, more design work to do!

This is my plan html. Made by Claude. Instead of code I literally have it build prototypes and videos

does it reuse the existing components for the mockups or draw fresh ones? my plans keep inventing a whole new UI every time 😭

Yeah reuses components, should be more token efficient

nice, thats exactly where mine drift. does it pick up the theme tokens too (colors, spacing) or just components? happy to try it on a real codebase and send notes

HTML plans without plan mode, right?

I want to ship this is as a plugin that replaces default plan mode with a HTML plan

Perfect, that works for me. I'll test it.

mockups in the plan is such a cheat code. half my Claude fails are just it inventing UI that never matched what i meant

Linting helps but context matters most. A clear plan reduces retries more than syntax checks alone ever will.

Surfacing the open questions before coding is the right instinct

plain markdown plans still win for me. the teamate reviewing it in a PR gets a readable diff and can comment line by line, with html they mostly scroll thru a wall of tags

Cool

Do you mind sharing what’s the process you use to build skills?

the 3 to answer button is a good touch. most plans just bury the questions in paragraph four

great skill, but why does the model need training wheels?

tried pack with a made-up path: a ~ row pointing at a file that doesn't exist gets the same "won't open code" warning as a + row for a new file. a changed call has to exist already, so that one could fail the lint. cheapest hallucination check in the plan

Wow thats wonderful, I built something of my own for rendering (glyphing) within html pages... I find that ascii art and emojies are really useful as well to enrich quickly the information trying to explain to the human :)

plans that surface questions before writing code is the underrated part. most agent failures are confidently answering a question nobody asked

does claude hold off on generating code until you answer those open questions?

Oh this is great

I do something similar in my planning flow. It writes the planned code in a kind of invented language. Basically a mix of programming language and plain English. Not because I cannot read the code. It is just much faster to see the context and understand what is going on. Real code diffs are only shown for the really critical parts. Would be cool to see something like this in your solution too.

bro the linting is the bit i'd steal. i'd ask it to flag any plan step with no file name in it, because those are the steps claude quietly makes up as it goes

a plan with a mockup in it gets read, a wall of markdown just gets skimmed

The respond button turning the review choices into a paste-ready prompt is a neat touch. Keen to try it! Is there a way to grab the skill before you ship it more broadly?

let me leave feedback right on the mockup. pointing at the wrong interaction is easier than describing it in a paragraph

Does it generate good flowcharts??

yeah some of the linting is for better diagrams + flowcharts

html plan w mockups right inside claude code, lowkey nice. does the linter catch it when a mockup drifts from the real code?

Been using lavish-axi by @kunchenguid for this, excited to try this as well!

HTML >>>>>>>>>> Markdown

I use and I've been reasonably happy with it. But will give this a try!

This looks really useful. Better planning and fewer Claude Code failures is a win. We pushed Opus 5.5 through a full 3D game build too

The decision cards are the part I would keep. One question, a suggested answer, and the change sticks. The page around them is a lot but it's a good start for sure.

love this! the multiple choice response is smart and easy with suggested response. now that agents run for days and weeks, i love spending hours on planning too. i built /grill-plan to attack the plan, will test them together.

@trq212 super cool! one thing i'd consider: adding a section to handle browser compatibility nuances. can save folks a headache when they run into quirks later.

Lavish by @kunchenguid is pretty good. Same concept that you are working on