AK / PORTFOLIOWork
Case [03]2026

A dev-only overlay that turns "change this" into a source-aware Copilot prompt.

Point at any element in your React dev server, describe the change in plain language, and vibefix ships a prompt — with the exact file, line, and expanded Tailwind classes — straight into Copilot Chat's Agent mode. No browser extension. No copy-paste. Published to npm.

Role
Design + Engineering (solo, shipped to npm)
Stack
TypeScriptViteReactNode.jsTailwind
Timeline
2026
Status
Published to npm
Ownership
Solo design + engineering
Outcome
7 IDEs across Windows, macOS, and Linux

Context

Vibe-coding workflows (Cursor, Copilot Chat, Windsurf Cascade) all rely on the same thing: the AI knowing which file, which line, which classes to touch. In practice, people copy-paste selectors, take screenshots, or type "the button on the top right of the pricing page" and hope. The bridge from "the thing I'm pointing at in the browser" to "the exact source coordinates" was missing, and every workaround I saw was fragile.

How it works

The overlay lives on the browser side; source resolution and Tailwind expansion happen on the dev server; delivery into the chat panel is a file-watched handoff to a tiny companion extension. Nothing crosses origins, nothing ships to prod.

Constraint

  • Framework-agnostic. Had to work in Vite, Next.js, Remix, Astro, plain static HTML — anything.
  • Zero production footprint. Nothing about this tool should end up in a prod bundle. Not one byte.
  • No browser extension. Extensions mean install friction, permission prompts, and Chrome-only for months.
  • No copy-paste loop. The prompt should land in the chat panel, not the clipboard.
  • No React peer conflict. The tool bundles React internals for the overlay, but the host app might be React 17, 18, 19, or not React at all.

Move

  • Two integration modes, one product. A first-class Vite plugin (same port, zero proxy) and a framework-agnostic CLI proxy (npx vibefix) that spawns your existing dev script and mounts the bubble on a sibling port. Same feature set either way.
  • Source resolution via React Fiber. _debugSource on the fiber node gives filename & line; the server maps them to project-relative paths so the prompt reads "edit src/components/Pricing.tsx:47", not a source-map URL.
  • Tailwind-aware prompts. The tailwind.config.{js,ts} is parsed server-side; utility classes on the picked element expand into their underlying CSS values inside the prompt. The AI sees padding: 1.5rem not p-6.
  • Four same-origin endpoints. /__vibefix/bubble.js (~180 KB overlay), /__vibefix/tailwind, /__vibefix/resolve, /__vibefix/execute. Clean surface, no CORS weirdness.
  • Auto-installed VS Code companion. First run detects any of code, code-insiders, codium, cursor, windsurf, trae, positron on PATH and installs a tiny companion extension. It watches .vibefix/inbox/*.md and, per file, calls workbench.action.chat.open({ query, mode: "agent" }).
  • Graceful fallback. No IDE CLI on PATH? The prompt still writes to .vibefix/inbox/ and gets copied to the clipboard. Paste into Cursor, Claude, ChatGPT — whatever you use.
  • Production safety by construction. The Vite plugin declares apply: "serve", so it only loads under vite/vite dev — never vite build. The proxy binds to 127.0.0.1. No network exposure, no prod code.

Result

  • Shipped to npm as vibefix (MIT, TypeScript-first, own type declarations).
  • Supports 7 IDEs / forks out of the box (VS Code, VS Code Insiders, VSCodium, Cursor, Windsurf, Trae, Positron), Windows / macOS / Linux.
  • No React peer dependency on the host app — bubble bundles its own React runtime; host can be React 17/18/19 or not React at all.
  • Vite peer range unbounded — Vite 4 through 8+ tested; future majors work without a vibefix update.
  • Feature-flagged prod safety — documented, testable, and enforced by the Vite plugin's apply hook rather than trust.

What I'd change

  • Source resolution beyond React. _debugSource only exists in React. Svelte / Vue / Solid would each need their own compile-time hook or dev-server middleware. First-class support is a fair amount of adapter work per framework.
  • Direct IPC over file-watcher. The .vibefix/inbox/*.md pattern is portable but indirect. A lang-server-style JSON-RPC socket would trim end-to-end latency, at the cost of more platform-specific code.
  • Better multi-select ergonomics. Single-element prompts are polished; multi-select prompts still feel like a v1. Needs a real UX pass, not just concatenated markdown.
  • Companion-install failure modes are quiet. If the auto-install partially succeeds on a system with three IDEs on PATH, the diagnostics are — charitably — sparse. A vibefix doctor command would earn its keep.

Command palette

Search and jump to any page.