Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How...

216,101 Aufrufe • vor 3 Monaten •via X (Twitter)

45 Kommentare

Profilbild von Paras Chopra
Paras Chopravor 3 Monaten

Give it a try:

Profilbild von Utkarsh Sengar
Utkarsh Sengarvor 3 Monaten

And ask CC to host it here

Profilbild von Paras Chopra
Paras Chopravor 3 Monaten

gist pages seems better

Profilbild von Utkarsh Sengar
Utkarsh Sengarvor 3 Monaten

That’s pretty cool too, simpler.

Profilbild von Utkarsh Sengar
Utkarsh Sengarvor 3 Monaten

The challenge I ran with that was, every project (and people) doesn’t have git. So it’s pretty much that but a prompt away without any git repo setup.

Profilbild von Tim Daff 🇺🇦
Tim Daff 🇺🇦vor 3 Monaten

@paraschopra This. Half my clients team members don’t go anywhere near Git and don’t want to.

Profilbild von Utkarsh Sengar
Utkarsh Sengarvor 3 Monaten

@paraschopra Yup, try it out and let me know what else can I cook here :)

Profilbild von Tarun Firodiya
Tarun Firodiyavor 3 Monaten

Similar thing for .md if you want to save those tokens 😀

Profilbild von Paras Chopra
Paras Chopravor 3 Monaten

yeah this is similar but HTML gives a lot more interactivity!

Profilbild von MagicPath
MagicPathvor 3 Monaten

This is great! But instead of having a bunch of local HTML scattered around, you can ask Claude code to build these things in MagicPath. You can even have multiple projects running in one canvas, and everything is instantly shareable with a link and interactive :)

Profilbild von Abhilasha Purwar
Abhilasha Purwarvor 3 Monaten

Holy moly, literally been trying to make exactly this. My entire workflow across everything - ppt, doc, proposal, review doc, product iteration, startups slides, newsletters, blogs, has become html Tbh, between .md, .html, vs .pptx/.docx etc - .html has so many benefits at 50% or less token as .pptx or .docx; Will give this a try. Quick question: do you think this could also be a CLI / npm-style tool? Something like: npx make-pages-interactive ./report where it injects the commenting layer, launches localhost, stores comments in a structured inbox, and then any agent — Claude Code, Codex, Cursor, etc. — can read the feedback and patch the HTML. So maybe the skill is the Claude-specific interface, but the core primitive is agent-agnostic: “Google Docs comments, but for local HTML artifacts.”

Profilbild von Paras Chopra
Paras Chopravor 3 Monaten

yeah, just ask claude code to spin it into cli. Should be pretty simple

Profilbild von Abhilasha Purwar
Abhilasha Purwarvor 3 Monaten

Next task.

Profilbild von Aarthi Ramamurthy
Aarthi Ramamurthyvor 3 Monaten

very cool and super useful for charts/graphs that I generate (usually dump them as html files so I can browse through).

Profilbild von Radhakishan Jat
Radhakishan Jatvor 3 Monaten

In Codex browser you can do this directly without the need of any skill, simply put a comment and it will change accordingly. When it comes to browser use, Codex does great job

Profilbild von Saksham
Sakshamvor 3 Monaten

@_svs_ i literally built this myself today as well :)

Profilbild von Anand Prasad
Anand Prasadvor 3 Monaten

Looks neat. Will try for sure. Been using HTML for a long time. Would love if such feature can be used across multiple users -- but I understand the limitations rn.

Profilbild von aditya
adityavor 3 Monaten

very similar tool by @benjitaylor :

Profilbild von HenryHe
HenryHevor 3 Monaten

great! I made some stable components for cc using in html, so web can monitor the diff I interact with the block, and don't need to feedback with cc Manually

Profilbild von Vishal Katariya
Vishal Katariyavor 3 Monaten

This is very cool!

Profilbild von Anvith
Anvithvor 3 Monaten

@_svs_ Isnt this similar to /playground

Profilbild von Ayush Sharma
Ayush Sharmavor 3 Monaten

Check planannotator ai My spelling might be incorrect but you can just do a googlr search

Profilbild von Chandra Vattikuti
Chandra Vattikutivor 3 Monaten

Sweet timing. Assuming this is good only for the author prompting Claude and would need some sort of a hosted solution if the team had to make joint edits / post comments i guess.

Profilbild von Paras Chopra
Paras Chopravor 3 Monaten

yeah, this is for self-iteration. but you could push the folder and it contains feedback as well

Profilbild von Chandra Vattikuti
Chandra Vattikutivor 3 Monaten

Thanks

Profilbild von Jay "letterj" Payne
Jay "letterj" Paynevor 3 Monaten

My workflow may be very different but once I saw the “everything as html” wave hit. I tried it for a few days and didn’t really see any benefit but my token use went way way up. So I’m back to good old markdown files. I will periodically try it but we are moving into an AI price hike so saving tokens is a priority right up there with model usefulness

Profilbild von Dean Sacoransky
Dean Sacoranskyvor 3 Monaten

This should be native to cc

Profilbild von Vatsal
Vatsalvor 3 Monaten

This is now native in Claude Code desktop app. Open the HTML in preview mode and you'll find the element selector on top

Profilbild von HT
HTvor 3 Monaten

@sidin Built a similar version for html slides recently

Profilbild von Nate Voss
Nate Vossvor 3 Monaten

You're basically showing Claude instead of telling Claude. That gap is probably bigger than it seems once you're iterating at speed.

Profilbild von Paras Chopra
Paras Chopravor 3 Monaten

yeah, this is 100% true

Profilbild von Kunal Mishra
Kunal Mishravor 3 Monaten

@sidin you should check out @nbaschez’s roughdraft.md

Profilbild von Nav Toor
Nav Toorvor 3 Monaten

google docs for HTML

Profilbild von Ott Ilves
Ott Ilvesvor 3 Monaten

same - html's are perfect as output. we use to share them, which includes in-line comments and agents reading them back/editing

Profilbild von Nikunj Taneja
Nikunj Tanejavor 3 Monaten

will integrate this skill, super helpful

Profilbild von Sahil Ohe
Sahil Ohevor 3 Monaten

This is actually interesting. I found out this skill and have been using it since then. Let me try your's too.

Profilbild von Steven Cheng
Steven Chengvor 3 Monaten

This is such a clean dev loop, switching between editor and browser really breaks my flow when prototyping robot arms, inline comments on localhost are exactly the vibe coding setup I need.

Profilbild von Yatharth Manuja
Yatharth Manujavor 3 Monaten

Boom!

Profilbild von Bob Ulrich
Bob Ulrichvor 3 Monaten

hah. this is awesome. a colleague of mine and i built something similar in the last week! this is much more polished. where do you store the comments? can they persist when the webserver dies? we’re trying to create a lightweight google docs comment style flow for commenting on technical docs

Profilbild von Paras Chopra
Paras Chopravor 3 Monaten

there's stored locally in the same folder as html file. they persist

Profilbild von kinksvs11
kinksvs11vor 3 Monaten

Niceeee

Profilbild von Jett Fu
Jett Fuvor 3 Monaten

Static HTML survives tool churn better than any notebook. I run dashboards across 3 jurisdictions. The reports I generated 18 months ago still open today. Half the SaaS dashboards I built on are dead. The artifact outlives the generator — that's the real moat.

Profilbild von Abhinai A J
Abhinai A Jvor 3 Monaten

Does this work with OpenCode? Also, Codex brought this feature natively as an annotation feature.

Profilbild von Argona
Argonavor 3 Monaten

very interesting find definitely will try

Profilbild von Arnav Gupta
Arnav Guptavor 3 Monaten

A better way is to use PaperOrchestra skill and convert your research into proper cited research paper

Ähnliche Videos

THIS MIGHT BE THE #1 OPEN-SOURCE REPO FOR CLAUDE CODE RIGHT NOW. IT GIVES CLAUDE A MEMORY AND SLASHES YOUR TOKEN COST ON EVERY QUESTION The repo is safishamsi/graphify, a free open-source skill that turns any codebase into a knowledge graph Claude Code can read instantly. Instead of grepping through your files every session, Claude gets a map of how everything connects The problem it fixes: Every time you ask Claude Code about a big repo, it does the same thing, greps through dozens of files like a brute-force Ctrl+F, blows through your context window, and sometimes still misses the answer hiding in a file nobody searched. Claude Code has no memory of how your project is structured. Every session starts from zero What it does: It maps your entire codebase into a knowledge graph, capturing not just which files exist, but which functions depend on which, which modules are central, and which files cluster around the same concern. Claude queries the map instead of scanning files How it works, three passes: 1. Code structure, free and local. Tree-sitter parses your files and pulls out classes, functions, imports and call graphs. No LLM, no tokens, just your actual code mapped deterministically 2. Audio and video, if you have them. Transcribed locally and folded into the graph 3. Docs, papers, images. Here an LLM does semantic analysis, figuring out what each document means and where it fits. Only the meaning gets sent up, never your raw source It saves you money: Normally a question about a big repo makes Claude spawn explore agents that scan file after file, eating your context window and your token budget before you get an answer. With the graph already built, Claude queries the map instead of re-reading the codebase every time. Same answer, a fraction of the tokens. The graph only gets built once, then a hook rebuilds it after each commit for free, so you never pay that scanning cost again. The bigger the repo, the bigger the gap The best parts: it's a skill, so once installed Claude knows when to use it without you memorizing commands. It works on non-code folders too, point it at docs or notes and it can spin up an Obsidian vault How to add it to your Claude: 1. Install Claude Code if you haven't: npm install -g Paul Jankura-ai/claude-code 2. Add the skill: claude skill add safishamsi/graphify 3. Open your project folder and run /graphify . to build the graph 4. Optional, make it automatic: graphify hook install so the graph rebuilds after every commit That's it. Ask Claude about your repo and it reads the map instead of burning tokens on a file hunt Bookmark this

Yarchi

56,177 Aufrufe • vor 3 Monaten

Claude Code + computer use is f*cking cracked 🤯 Build a landing page → Claude opens Chrome, looks at it, spots every issue, and fixes it — without you describing a single thing. All inside Claude Code. Perfect for DTC brands and agencies who are still vibe-coding landing pages and advertorials in Claude Code, then manually opening them in Chrome, spotting 15 things wrong, and describing every visual issue back to Claude one at a time. If you're building pages in Claude Code and your workflow looks like this — build the page, open it in Chrome, spot broken spacing, go back to Claude, type "the CTA button is too low and the hero image is cut off," wait for the fix, open Chrome again, find 3 new issues, describe those too ... Claude Code + computer use eliminates the entire loop: → Claude writes the full landing page or advertorial → Opens Chrome and navigates to it → Spots layout issues, broken spacing, off-brand colors, missing elements → Fixes everything and re-checks until the page looks right → Tests your Shopify product pages by clicking through like a real customer → Walks through your checkout flow and flags friction before customers hit it → You only see the finished, visually verified result No describing what you see on screen. No "the CTA button needs more contrast" back-and-forth. No being the eyeballs for an AI that can't see. What you get: → Landing pages and advertorials Claude builds AND visually QAs before you ever look at them → Product pages Claude clicks through — testing layout, images, and CTAs like a real user → HTML dashboards Claude opens and verifies the charts actually render → Checkout flows Claude walks through step by step to catch friction → All of it happening in one session — build, test, fix, done One prompt. Claude builds it, checks it, and fixes it. You just review the finished page. I put together a full playbook with the exact setup, the prompts, and 5 DTC workflows that use Claude Code + computer use. Want it for free? > Like this post > Comment "CLAUDE" And I'll send it over (must be following so I can DM)

Mike Futia

19,143 Aufrufe • vor 5 Monaten

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,165 Aufrufe • vor 3 Monaten