🗣️ YapUI
Yap at your UI. Watch Claude rebuild it live.
npx skills add tatendaz/yapui
What it is
YapUI is a Claude Code skill that serves any HTML file over http://localhost, injects a feedback widget, and keeps a resident, pre-warmed Claude agent listening. open file.html is a dead end — file:// blocks the mic and screen capture, and every change means typing it all back into the terminal. YapUI replaces that round-trip with a live, two-way conversation on top of your page.
What you can do
- 🎙 Talk to your page Dictate a change out loud while pointing at the thing you mean.
- 🎯 Point & pick Click an element to attach it to your note, so "make this bigger" just works.
- 🎬 Record · 📸 Snap · ⌨️ Type Capture a janky animation, screenshot a glitch, or send a plain note.
- 🔁 It replies in the browser Your note flips to working in ~40 ms, the fix lands in seconds, and the page refreshes itself.
Install
# one command (via skills.sh) — or pick another option in the README npx skills add tatendaz/yapui # git clone, as a personal Claude Code skill git clone https://github.com/Tatendaz/yapui ~/.claude/skills/yapui # or as a Claude Code plugin /plugin marketplace add Tatendaz/yapui /plugin install yapui@yapui-marketplace
Then just ask Claude to "preview index.html". Plain Node, zero npm dependencies, MIT. Everything runs locally — your HTML, notes, recordings, and screenshots never leave your machine.
FAQ
What is YapUI?
YapUI is an open-source Claude Code skill that previews any HTML file in your browser and lets you request changes by talking, pointing, recording, screenshotting, or typing — a resident Claude agent applies each fix in seconds and replies right in the page.
How is YapUI different from live-server or a live-preview extension?
A live server only refreshes the page when files change; YapUI adds the other direction — a feedback widget in the page sends your spoken, pointed, or typed notes to a resident Claude agent that edits the HTML for you, so the conversation and the preview happen in one place.
Does YapUI work with Claude Code?
Yes — YapUI is built as a Claude Code skill, and its instant mode runs on the Claude Code CLI; without the CLI it falls back to a watcher mode driven by your main Claude session.
Is YapUI free?
Yes — YapUI is MIT-licensed open source with zero npm dependencies, and everything runs locally on your machine; you only need your own Claude Code for instant mode.
How do I install YapUI?
Run npx skills add tatendaz/yapui, git clone the repo into ~/.claude/skills/yapui, or add it as a Claude Code plugin with /plugin marketplace add Tatendaz/yapui followed by /plugin install yapui@yapui-marketplace — then just ask Claude to preview an HTML file.