Interactive HTML Playground Builder

What it does

When your agent uses it

• Building a visual explorer for design choices such as layout, spacing or color
• Making an interactive tool to assemble and test SQL queries, API calls or regexes
• Reviewing a git diff or a document with per-line comments that export as a prompt
• Mapping a codebase's components and data flow in an interactive page

Example prompts

• “Make a playground for tuning card spacing, corner radius and shadow, with a few presets.”
• “Build an explorer where I can assemble a regex and see the matches update live.”
• “Create a playground to review this git diff line by line and copy my comments as a prompt.”

Requirements

• A web browser to open the generated HTML file

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

1. 1Identify the playground type from the user's request
2. 2Load the matching template from templates/
3. 3Follow the template to build the playground. If the topic doesn't fit any template cleanly, use the one closest and adapt.
4. 4Open in browser. After writing the HTML file, run open .html to launch it in the user's default browser.

What it can do on your machine

Read from SKILL.md and the folder at commit b78ac49. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Interactive HTML Playground Builder loads about 949 tokens when it runs. Until then it costs about 70 tokens; SKILL.md has 382 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~70

When it runs · the whole SKILL.md, loaded when a task matches

~949

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from anthropics/claude-plugins-official at commit b78ac49, republished under its Apache-2.0 licence (© anthropics). 382 words, ~949 tokens.

name

playground

description

Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playground, explorer, or interactive tool for a topic.

const state = { /* all configurable values */ };

function updateAll() {
  renderPreview(); // update the visual
  updatePrompt();  // rebuild the prompt text
}
// Every control calls updateAll() on change

function updatePrompt() {
  const parts = [];

  // Only mention non-default values
  if (state.borderRadius !== DEFAULTS.borderRadius) {
    parts.push(`border-radius of ${state.borderRadius}px`);
  }

  // Use qualitative language alongside numbers
  if (state.shadowBlur > 16) parts.push('a pronounced shadow');
  else if (state.shadowBlur > 0) parts.push('a subtle shadow');

  prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
}

© anthropics, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 6 other files in plugins/playground/skills/playground of anthropics/claude-plugins-official.

• SKILL.md
• templates/code-map.md
• templates/concept-map.md
• templates/data-explorer.md
• templates/design-playground.md
• templates/diff-review.md
• templates/document-critique.md

Open the folder on GitHubat commit b78ac49

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in anthropics/claude-plugins-official, which our catalogue first saw on October 7, 2026.

• xiaoyuge886/aigcplugins/claude-plugins-official-main/plugins/playground/skills/playground