/sandbox

Visual HTML canvas sandbox for agent-driven UI and live previews

Boost this skill

alsk1992@alsk1992

GitHub

From plugin

cloddsbot

2.7k121 skills

Install

$ npx -y skills add alsk1992/CloddsBot --skill sandbox --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/sandbox

Context preview

The summary Claude sees to decide when to auto-load this skill.

Visual HTML canvas sandbox for agent-driven UI and live previews

SKILL.md

sandbox.SKILL.md

name: sandbox
description: "Visual HTML canvas sandbox for agent-driven UI and live previews"
commands:
  - /sandbox
  - /canvas

Sandbox - Visual Canvas

Push HTML content to a live-updating canvas server for visual previews, dashboards, and agent-driven UI.

Commands

/sandbox start        - Start the canvas server (returns URL)
/sandbox push <html>  - Push HTML content to the canvas
/sandbox reset        - Reset canvas to blank state
/sandbox screenshot   - Take a screenshot of the current canvas
/sandbox status       - Show canvas server status and settings

Environment Variables

| Variable | Description | |----------|-------------| | `CANVAS_ALLOW_JS_EVAL` | Enable JavaScript evaluation in canvas (default: `false`) | | `ALLOW_UNSAFE_SANDBOX` | Enable unsafe sandbox mode (default: `false`) |

Examples

/sandbox start
/sandbox push <h1>Hello World</h1><p>Live preview</p>
/sandbox screenshot
/sandbox status
/sandbox reset

How It Works

1. `/sandbox start` launches a local HTTP server that serves the canvas page 2. `/sandbox push <html>` sends HTML to the canvas, rendered in real time 3. `/sandbox screenshot` captures the current canvas state as an image 4. `/sandbox reset` clears all HTML, CSS, and JS from the canvas 5. `/sandbox status` shows whether the server is running, the URL, and content sizes

Read it on GitHub ↗

Ships withcloddsbot

Open Source AI trading agent that operates autonomously across 1000+ markets - Polymarket, Kalshi, Binance, Hyperliquid, Solana DEXs, 5 EVM chains. Scans for edge, executes instantly, manages risk while you sleep. Agent commerce protocol for machine-to-machine payments. Self-hosted. Built on Claude.

Get the whole plugin

Stats

Python TypeScript JavaScript Node Bash

+7 tags

Rust SQLite Docker Git GitHub Anthropic MCP

1,600

Stars

253

Forks

Active

Maintenance

TypeScript