ui-preview

UI Preview (see it before you write it)

Frontend edits are a class of change where "read the diff to know if it's right" is much slower than "look at it". This skill inverts the usual write-first-then-user-eyeballs flow: render the proposed after-state in chat as a working preview, and only touch files when the user clicks Apply.

When this fires

Any request to modify an existing UI area:

• "Redesign this button / card / hero / modal"
• "Change the login form to have avatars on the left"
• "Make this list more compact / spacier / dark-mode / mobile-first"
• "Move the submit button to the top"
• "Add a settings panel to the sidebar"
• "Migrate from Material to shadcn / from Tailwind v2 to v3"
• "Improve the copy on this landing page hero"
• "Tighten spacing across the dashboard cards"

Does NOT fire for:

• Non-visual code changes (business logic, API handlers, tests).
• Brand-new files with no existing UI to compare against — that's a normal render_ui.
• Purely visual TODO you're asked to just describe, not implement.

The flow

Step 1: read the current source. Find the target component(s). Read enough surrounding code to know what props / state / classes are in play. If it's a large page, read the specific section only.

Step 2: render the AFTER state. Call render_ui with a TSX module that IS the proposed replacement — same visual, same interactions, ideally re-using the same $macaron/ui components. Inline any state / mock props needed to make it visually complete. Do NOT stub interactive parts as "placeholder" — a preview the user can't play with is useless.

Step 3: end the widget with 3 buttons.

<Row className="gap-2 justify-end mt-4">
  <Button variant="ghost"
    onClick={() => sendUserMessage("Discard this preview, keep the current UI.")}>
    Discard
  </Button>
  <Button variant="outline"
    onClick={() => sendUserMessage("Tweak this preview: [describe what to change]. Re-render.")}>
    Tweak
  </Button>
  <Button
    onClick={() => sendUserMessage("Apply this preview to the actual file(s). Write the changes now.")}>
    Apply →
  </Button>
</Row>