From sideshow
Publishes live HTML previews to the user's browser and receives comments as notifications. Use for illustrating, visualizing, or sketching ideas interactively.
How this skill is triggered — by the user, by Claude, or both
Slash command
/sideshow:sideshowThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The user keeps a sideshow surface open in their browser. You publish HTML
The user keeps a sideshow surface open in their browser. You publish HTML snippets to it; they appear instantly. The user comments on any snippet, and this plugin streams those comments to you as notifications — you do not poll or arm a watcher. It is a two-way surface, not a fire-and-forget renderer.
A background monitor (sideshow watch) runs for the whole session and delivers
each new user comment as a notification on your next turn, for example:
sideshow comment on “Cache layout” (snippet a1b2c3): “tighten the spacing”
Treat every such line as a message from the user. Respond by revising the
snippet it refers to (update_snippet / sideshow update <id>) or replying
(reply_to_user / sideshow comment). Comments are delivered exactly once —
you will not see the same one twice, so act on each when it arrives. You never
need to call wait_for_feedback just to stay aware of comments; the monitor
already does that. (Publish/update/reply responses may still carry a
userFeedback array; it is the same stream, also delivered once.)
Fetch the design contract once per session (fragment rules, theme CSS variables, CDN allowlist, sizing):
get_design_guidesideshow guidePrefer the MCP tools when connected (publish_snippet, update_snippet,
wait_for_feedback, reply_to_user); otherwise use the CLI. Session grouping
is automatic.
sideshow publish sketch.html --title "Cache layout" --session-title "Cache redesign"
echo '<p>...</p>' | sideshow publish - --title "Quick note"
Rules of thumb:
sessionTitle (MCP) / --session-title (CLI). It
applies only when the session is created; never retitle later (the user may
have renamed it in the viewer).update_snippet / sideshow update <id> (same card, new
version) instead of publishing near-duplicates.The plugin targets the server set in its config (sideshowUrl, default
http://localhost:4242; apiToken for deployed instances). Start a local
server with npx sideshow serve if one is not already running.
npx claudepluginhub modem-dev/sideshow --plugin sideshow**TRIGGER: about to populate `AskUserQuestion` options with `preview:` content for any visual UI / screen / layout / component / animation comparison.** STOP and ask the user one short question first: *"Would you like a quick inline chip comparison, or a full HTML prototype you can open in the browser?"* The chip is fast but flattens color, type, spacing, and motion into monospace text; the HTML prototype is heavier but real. Asking costs one question; skipping costs a full redo if they wanted HTML — always ask. **No carve-out for "simulate", "demo", "mock up", "quick decision" — those framings name the surface, not an exception.** When the user picks HTML, this skill creates HTML prototypes for visual design, component playgrounds, animation tuning, and design system exploration — even when the final surface is React, Swift, SwiftUI, Android, or another framework. Use whenever the user wants to mock, prototype, sketch, tune, or explore any UI element — components, animations, transitions, layouts, design systems — before committing to production code. HTML is the fastest design-thinking surface; reach for it even for non-web targets. For N alternatives use html-brainstorm-grid; for a single tunable component use this skill.
Creates self-contained interactive HTML playgrounds with controls, live previews, and copyable prompts for visual exploration of design, data, code, and documents.
Structures requirements, design, architecture, decisions, and unresolved issues into a review-ready HTML design document. Processes review comments and replies within the HTML.