v1.0.0 — instant-elements

A UI harness for coding agents. Describe what you need, an agent builds it, the gallery shows it, and every change is recorded.

npm install -D instant-elements
npx ie init && npx ie skills install
npx ie gallery

The loop

"a stat card for the dashboard header"
        ↓  the agent looks for something reusable first
        ↓  if nothing fits: three files + a registry entry
   you look at it in the gallery
        ↓  copy the modify prompt → the agent edits it
   it gets recorded (who · when · what · which commit)
        ↓
   assemble pages from what you've built → point at what to fix
        ↓
   chain pages into a click-through demo

Why

Design systems drift for a boring reason: when finding the existing button is harder than writing a new one, people write a new one. This makes reuse the path of least resistance — the agent searches the registry before writing anything.

What's in it

• Registry — one entry per component, deterministic index (regenerating never creates a diff), append-only history including reuse recommendations
• Gallery — library, detail with live preview, integration and modify prompts, history timeline. Self-contained: a broken component can't break the tool you use to look at broken components
• Semantic tokens — brand-neutral defaults, swappable for your own
• Pages — assembled as data, version-guarded saves, point-and-comment review that becomes one executable prompt
• Flows — chain pages into a click-through demo, pinned to the page version at the time you added it
• Gates — ie element validate (color literals, off-scale values, unknown tokens, animation contract) and ie element schema --check for CI
• Restore — roll a component back to a past commit
• Skills — element-create and page-create, with one canonical guide that npm update keeps current

Design notes

Everything is config-driven. The CLI, gallery, and skills read ie config --json rather than hardcoding paths — that's what lets the same skill instructions work in any project layout.

Animation support is declared, never inferred. Guessing from DOM selectors breaks silently the moment markup changes or something renders through a portal.

Saves are version-guarded. Hand back the version you read as --base, or the save is rejected rather than silently overwriting someone else's edit.

199 tests. Working example in examples/vite-react.

Docs

https://github.com/kh1012/instant-elements#readme

https://claude.ai/code/session_011E2BhVhYj1Yu7FdEppBE8V