skills.rest
alsk1992
alsk1992COMMUNITY
Explore all skills by this author →
Website𝕏@6to7FigsGitHub

sandbox

Render HTML, CSS, and JavaScript on a visual canvas via a local HTTP server.

650|137|Updated Jan 26, 2026
Search Tags:#ui#html#rendering#dashboard#preview#canvas
One-click install
npx skills add https://github.com/alsk1992/CloddsBot --skill sandbox-alsk1992
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sandbox
Source: https://github.com/alsk1992/CloddsBot/tree/main/src/skills/bundled/sandbox
Command: npx skills add https://github.com/alsk1992/CloddsBot --skill sandbox-alsk1992

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill allows agents to create and display visual content, such as dashboards and UI elements, directly within the chat interface, enabling real-time previews and interactive experiences.

Core Features & Use Cases

  • Live HTML Canvas: Render HTML, CSS, and JavaScript in a sandboxed environment for safe previews.
  • Dynamic Updates: Push content to the canvas in real-time as it's generated or modified.
  • Screenshots: Capture the current state of the canvas as an image.
  • Use Case: An agent designing a webpage can use /sandbox push <html> to instantly see how the code renders, iterating quickly on the design.

Quick Start

Start the canvas server by typing /sandbox start.

Frequently Asked Questions about sandbox

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render live HTML previews for dynamic user interfaces?▼

You can render live HTML previews by starting a local HTTP server that provides a visual canvas, allowing you to push HTML content and see dynamic user interfaces update in real time.

Can I capture a screenshot of the UI canvas during rendering?▼

Yes, you can capture a screenshot of the UI canvas during rendering to save the current visual state as an image for immediate visual feedback and review.

How do I update a dashboard preview in real time as code changes?▼

You update a dashboard preview in real time by pushing your modified HTML content to the active canvas, which instantly re-renders the interface without requiring a manual refresh.

Does the sandbox environment support JavaScript and CSS for UI rendering?▼

Yes, the sandbox environment fully supports rendering HTML, CSS, and JavaScript together, enabling you to safely preview interactive dashboards and dynamic user interface elements.

What is the best way to reset the HTML canvas before pushing new content?▼

The best way to reset the HTML canvas is to use the available reset command, which clears the current visual state and prepares the environment for pushing entirely new content.

Why use a local HTTP server for live UI previews instead of a static file?▼

A local HTTP server is used for live UI previews because it facilitates real-time rendering and dynamic updates, allowing agents to push content to the canvas continuously without manual reloads.

Related Skills

Explore More Design & Creative Skills→
KetomihineKetomihine
1

cellcharter-local

Host a local HTTP server to serve CellCharter documentation offline.

Community
Basic
OpenSourceSamOpenSourceSam

Visual Validation Skill

Validate game visual polish using rendered screenshots from specified sources.

Community
Intermediate
MCERQUAMCERQUA
1

pretext

Provides JavaScript/TypeScript text measurement and layout without DOM or CSS reliance.

Community
Advanced
zekiriabdzekiriabd
140

webapp-testing

Automate browser-based testing of local web applications with Python Playwright.

Community
Intermediate