Agent skill
sandbox
Visual HTML canvas sandbox for agent-driven UI and live previews
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/sandbox
SKILL.md
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
/sandbox startlaunches a local HTTP server that serves the canvas page/sandbox push <html>sends HTML to the canvas, rendered in real time/sandbox screenshotcaptures the current canvas state as an image/sandbox resetclears all HTML, CSS, and JS from the canvas/sandbox statusshows whether the server is running, the URL, and content sizes
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?