BeClaude

sideshow

New
69GitHub TrendingGeneralby modem-dev

A live visual surface for terminal coding agents — agents draw HTML snippets, you watch and comment back

First seen 6/11/2026

Summary

Sideshow provides a live visual surface for terminal coding agents, allowing them to render HTML snippets in real-time.

  • Developers can watch the agent's output and provide feedback, making it ideal for iterative design and debugging of web components directly from the command line.

Install & Usage

1
Create the skills directory
mkdir -p .claude/skills
2
Download the skill file

Add the configuration to .claude/skills/sideshow.md

3
Invoke in Claude Code
/sideshow

Use Cases

Quickly prototype and preview a UI component by having the agent render HTML snippets in a live view.
Debug CSS or layout issues by watching the agent apply changes and seeing the result instantly.
Collaborate with an AI agent on a web design by commenting on the rendered output and requesting adjustments.
Test responsive design by resizing the live viewport while the agent modifies the HTML.
Visualize data as an HTML table or chart generated by the agent during a data analysis session.
Iterate on email templates or landing pages by having the agent render and refine the HTML in real-time.

Usage Examples

1

/sideshow create a simple login form with email and password fields

2

Render a responsive navigation bar with a dropdown menu using /sideshow

3

/sideshow show a dashboard with three cards displaying sample metrics

View source on GitHub
agent

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is sideshow?

Sideshow provides a live visual surface for terminal coding agents, allowing them to render HTML snippets in real-time. Developers can watch the agent's output and provide feedback, making it ideal for iterative design and debugging of web components directly from the command line.

How to install sideshow?

To install sideshow: create the skills directory (mkdir -p .claude/skills), then add the config to .claude/skills/sideshow.md. Finally, /sideshow in Claude Code.

What is sideshow best for?

sideshow is a community categorized under General. It is designed for: agent. Created by modem-dev.

What can I use sideshow for?

sideshow is useful for: Quickly prototype and preview a UI component by having the agent render HTML snippets in a live view.; Debug CSS or layout issues by watching the agent apply changes and seeing the result instantly.; Collaborate with an AI agent on a web design by commenting on the rendered output and requesting adjustments.; Test responsive design by resizing the live viewport while the agent modifies the HTML.; Visualize data as an HTML table or chart generated by the agent during a data analysis session.; Iterate on email templates or landing pages by having the agent render and refine the HTML in real-time..