oh-my-design

An agent skill that gives a coding agent a tight UI prototyping loop:

write React (TSX) → esbuild bundle → render in a real browser → Playwright screenshot → look at it → iterate → hand back to the main conversation with a self-describing manifest.

The design medium is standard React 18 + TypeScript — import / export, named function components, no UMD or globals or magic. esbuild bundles App.tsx + everything it imports (incl. React/ReactDOM) into a single app.js on every run, so the browser only ever loads one ES module. Fully offline once setup.sh has installed deps.

What this skill is for

• Turn vague UI requests into one or more visual candidates (count driven by task, not preset).
• Let the agent screenshot its own work and have a subagent critique it before showing the user.
• Let the user pick / tweak via a Tweaks panel that posts the choice back to the agent.
• Hand the user's selection back to the main conversation along with a self-describing manifest so the next agent can implement it pixel-perfectly in any target stack (React, Vue, Compose, SwiftUI…). For cross-machine archival, just git commit the slug directory.

Layout

oh-my-design/
├── SKILL.md                  # entry contract the agent reads on invocation
├── playbook.md               # ship-time README prompt (read at flow step 7)
├── panel/                    # protocol core — Tweaks panel, types, CSS
├── examples/                 # demo prototype (structural reference only)
├── lib/                      # Node-side tooling
│   ├── types.ts              # re-exports panel/types.ts
│   ├── build.ts              # esbuild bundler (App.tsx → app.js)
│   ├── static.ts             # static-file HTTP handler with @panel cross-root alias
│   ├── shoot.ts              # bundle + Playwright screenshots
│   └── serve.ts              # bundle + local HTTP for the Tweaks panel
├── tsconfig.json             # IDE type-checking only; Node runs lib/*.ts directly
├── package.json              # esbuild + playwright + react@18 (devDeps)
└── setup.sh                  # one-shot: npm install + playwright install chromium

Per-run output

Every invocation creates an isolated tree under the calling project's cwd:

<cwd>/.design/<YYYY-MM-DD-HHMM>-<slug>/
├── README.md          # ← agent writes this at ship time (manifest)
├── App.tsx            # esbuild entry — imports Tweaks from @panel/Tweaks
├── index.html         # hosts <div id="root"> + <div id="tweaks">
├── config.json        # title, variants, frames, themes, defaults
├── variants.tsx       # ← the agent writes this
├── frames/            # device frames (optional — agent's call per task)
├── notes/             # distilled insight (1 sentence per file, named by topic)
├── drafts/            # unrefined material; promote to notes/ when distillable
├── uploads/           # user-supplied reference images
├── shots/             # Playwright self-critique (agent's eyes only)
├── app.js             # esbuild output (gitignored, regenerated each run)
└── selected.json      # user pick + free-form feedback

Setup

cd <skill-root>
./setup.sh

Installs Node deps (esbuild, playwright, react, react-dom, @types/*) into the skill's own node_modules/ and downloads Chromium for Playwright. After that, every cwd reuses the same install — fully offline.

Requires Node ≥ 23 (for native TS strip-types — lib/*.ts runs directly via node lib/foo.ts, no build step).

Use

The skill triggers automatically when the user asks for a UI / mockup / prototype / visual design. See SKILL.md for the full flow contract.

License

MIT.