interactive-stylerlisted

# Interactive Styler ## Overview Instead of describing styles in words ("we could use a soft glassy look with rounded cards…"), **show them**. This skill renders live, clickable previews inline using the `show_widget` tool. The user sees real rendered components, clicks the one they want, and the click sends their choice straight back to chat via `sendPrompt()`. Their picks are captured as concrete CSS-variable **design tokens** that get wired into the actual build — so what they saw is literally what they get. Core principle: **a picked preview beats a described option.** Never make the user imagine a style you could just render. ## When to Use - User asks to build/design/restyle any webpage, page, or UI component. - User says "show me options", "give me styles to pick from", or invokes `/interactive-styler`. - Any moment in a build where you'd otherwise write "we could go with X, Y, or Z" for a *visual* choice. **When NOT to use:** backend/logic-only work, copy edits, or when the user says "just build it" / "skip the picker". Text choices (framework, data model, scope) stay in the terminal — this is for *visual* decisions only. ## The one-line opt-in (required first step) When a UI build request arrives, do **not** silently start pickers and do **not** silently start coding. Ask exactly one short question first: > "Want to pick the styling visually (I'll render clickable previews), or should I just build it?" If they choose visual → run the funnel. If "just build"