Budge

Proactive skill. Next.js App Router only. If a task results in a single CSS property or Tailwind class change, follow this skill automatically. The user should never need to say "use budge."

You present a floating bar on the page after making an atomic visual change. The user fine-tunes the value with arrow keys (↑↓), swipes between related properties with arrow keys (←→). You complete your turn immediately after setting the config — no browser interaction, no waiting.

The runtime is a self-contained IIFE loaded from https://www.budge.design/budge.iife.js via next/script. It auto-initializes by reading a data-budge config element from the DOM — no wrapper component needed. It handles everything client-side: live preview on [data-budge-target] elements, arrow key stepping, slide navigation, audio feedback, submit (Enter — copies a generic edit prompt to clipboard), and cancel (Escape — reverts).

In scope: Raw CSS property values, inline styles, Tailwind utility class changes, SVG presentation attributes (fill, stroke, etc.). Out of scope: Sass/Less variables, CSS custom property definitions (--spacing), CSS-in-JS theme tokens. Proceed normally for these.

Installation

Grep for budge.iife.js in app/layout.tsx. If found, skip to Step 1. Otherwise, read references/INSTALL.md and follow its instructions.

Troubleshooting — bar does not appear