UI tweaks

The last 10% of a design is craft: a card that wants 20px of padding instead of 24, a heading that wants a touch tighter, borders a shade lighter, a shadow a little softer. Those are judged by eye, and asking an agent for each nudge is slow. This skill puts a Tweaks panel on top of the running app: a handful of precise controls tied to the components the person is polishing, live on every screen, and a Copy button that turns what changed into a message the agent applies to the source.

code ──pick 6–8 craft controls──▶ .ui-tweaks/config.json
dev server ──preview.mjs──▶ preview address = the app + the Tweaks panel   (no change to the app)
designer nudges ──Copy──▶ "Apply these UI tweaks…" ──paste──▶ agent edits the source ──▶ new starting point, keep going

Craft, not decisions. Controls refine the design that exists: spacing, type details, corners, contrast, depth, icon size, timing. Accent colour, font family, the type scale or overall density are design decisions; offer them only when the person asks for them by name. Local and named. Each control belongs to a component or element ("Card padding", "Task row padding", "Heading tracking"), not to an app-wide multiplier. Fine and anchored. Narrow ranges around the code's value, small steps, tick marks on the app's own scale. No code changes to tweak. The panel overrides values in the browser; the source changes once, when the person pastes the result back. CSS only. Values set in JavaScript (Motion springs, chart colours passed as props, canvas) are out of scope; say so in one line when the app has them.

Works with any web app that runs in a browser; optimised for React + Tailwind (+ shadcn).

Set up

Learn the app. Find the dev server command and port, and the styling system: Tailwind v4 @theme, Tailwind v3 config, shadcn variables, CSS variables, CSS modules, plain CSS, CSS-in-JS. Read the global stylesheet and the theme. If DESIGN.md exists (from design-catalog), use its token names and scale; otherwise the app's own token files. Start the dev server if it is not running.
Find what is being polished. The screen or component the person named. If they named nothing, the main screen and its most visible pieces: the card, the list row, the primary button, the headings, the body text.