Skills Guide

Live Code Renderer

VerifiedCaution

Renders HTML, CSS, and JavaScript code live in the chat as an interactive preview. Use for webpages, components, animations, games, and more.

Download and use
Sby Skills Guide Bot
ContentBeginner
7/24/2026
Claude Code
#html#javascript#interactive-preview#generative-ui#cdn-libraries

Recommended for

Claude CodeUI/UX designerSEO & contentProduct managerWriter / marketerSolo / indie hacker

Automated summary

Generates a self-contained HTML document and renders it live in the chat through the run_js tool to produce an interactive preview.

Strengths

  • Produces complete, self-contained HTML/CSS/JS documents that run as-is
  • Permits and encourages CDN libraries (Chart.js, Three.js, p5.js, Tone.js)
  • Enforces clear rules (no document.write, no relative paths) that avoid common rendering failures
  • Broad coverage: webpages, components, games, animations, visualizations, calculators

Limitations

  • Relies on the host environment providing the run_js tool
  • No local or relative file references: everything must be inline or CDN-loaded
  • No described validation of generated code beyond rendering it in the chat
When to use it

Use it whenever a user asks for a webpage, interactive component, animation, game, or runnable visualization.

When not to use it

Avoid it for non-web code (server-side scripts, backends, CLIs) or when no interactive HTML preview is expected.

Security analysis

Caution
Quality score82/100

Nothing here is malicious — no curl|sh, no rm -rf, no secret exfiltration, no obfuscation. The skill is a straightforward creative-coding prompt that produces a self-contained HTML document. The risk is structural: it directs the agent to execute arbitrary generated markup and encouragement of third-party CDN scripts, all via a `run_js` tool that isn't even declared in allowed-tools. That is a legitimate but powerful execution path, so 'caution' rather than 'safe'.

Findings
  • •No allowed-tools declared, yet the skill instructs calling a `run_js` tool with an `index.html` script — the capability it depends on is undeclared and unverifiable.
  • •Instructs rendering arbitrary, model-generated HTML/JavaScript into an executable preview, including loading third-party scripts/styles from CDNs (`<script src="...">`), which is an unrestricted code-execution surface inside the chat client.
  • •Any prompt injected into the generated output (or a CDN dependency) executes with whatever privileges the renderer has; the skill contains no guidance to sandbox, restrict origins, or avoid sensitive APIs (fetch, cookies, storage).
  • •Minor internal contradiction: rule 2 forbids external stylesheet links but then permits CDN CSS in the same sentence, which could lead to unreviewed external loads.
How this analysis is made

Examples

Snake game
Build me a playable snake game and show it in the chat.
Chart.js bar chart
Make an interactive bar chart with Chart.js showing monthly sales.
Audio visualizer
Show me a sine wave audio visualizer using the Web Audio API and canvas.

name: code-renderer description: Renders HTML, CSS, and JavaScript code live in the chat as an interactive preview. Use this when the user asks to generate a webpage, interactive component, animation, game, visualization, calculator, or any runnable HTML/CSS/JS. metadata: homepage: https://github.com/google-ai-edge/gallery

Code Renderer

Instructions

When the user asks you to build, create, or generate anything that can be expressed as HTML/CSS/JavaScript — a webpage, UI component, animation, game, chart, calculator, form, or interactive demo — produce the complete self-contained HTML document, then call the run_js tool with:

  • script name: index.html
  • data: A JSON object with one field:
    • html (string): The complete, self-contained HTML document to render.

Rules for the HTML you generate

  1. Always produce a full document: <!DOCTYPE html>, <html>, <head>, <body>.
  2. All CSS must be in a <style> tag inside <head>. No external stylesheet links (CDN CSS is allowed via <link rel="stylesheet" href="...">).
  3. All JavaScript must be in a <script> tag at the end of <body>, or loaded via CDN <script src="...">.
  4. Never use document.write() — it will break the renderer.
  5. CDN libraries are allowed and encouraged (e.g. Chart.js, Three.js, p5.js, Tone.js). Use https:// CDN URLs.
  6. Do not reference local files or relative paths — everything must be self-contained or CDN-loaded.
  7. Make the layout responsive and mobile-friendly where possible.

Example triggers

  • "Build me a snake game"
  • "Create a bouncing ball animation"
  • "Make an interactive bar chart with Chart.js"
  • "Generate a to-do list app"
  • "Show me a sine wave audio visualizer"
  • "Build a calculator"
  • "Create a CSS gradient explorer"

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/live-code-renderer-mryiqhej/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/live-code-renderer-mryiqhej' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/live-code-renderer-mryiqhej/download' --output '.skill-downloads/live-code-renderer-mryiqhej/SKILL.md.part' && mv '.skill-downloads/live-code-renderer-mryiqhej/SKILL.md.part' '.skill-downloads/live-code-renderer-mryiqhej/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code
test -f '.skill-downloads/live-code-renderer-mryiqhej/SKILL.md' && test -s '.skill-downloads/live-code-renderer-mryiqhej/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/code-renderer' && cp -R '.skill-downloads/live-code-renderer-mryiqhej' '.claude/skills/code-renderer'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation
openskills install './.skill-downloads/live-code-renderer-mryiqhej'

openskills read 'live-code-renderer-mryiqhej'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/live-code-renderer-mryiqhej/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

Writing Fragments

Content

Mine raw writing fragments through a relentless interview, without imposing structure. Capture ideas, quotes, and leading words for later use.

Claude CodebeginnerSafe 240,316
Skills Guide Bot

UI Copywriting & Auditing

Content

Write or audit user-facing UI copy including buttons, errors, empty states, and tooltips across the monorepo, following the design system source of truth.

Claude CodeCursorbeginnerSafe 108,623
Skills Guide Bot

Music MIDI Extraction

Content

Extracts the MIDI or score from an existing music production via the CogMusic MCP tool and confirms availability.

Claude CodebeginnerSafe 69,866
Skills Guide Bot