# Playground

Creates interactive HTML playgrounds, self-contained single-file explorers that let...

- Repository: https://github.com/anthropics/claude-plugins-official (45706 stars)
- Category: AI and agents
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add anthropics/claude-plugins-official --skill playground -g -a claude-code -y`
Codex: `npx skills add anthropics/claude-plugins-official --skill playground -g -a codex -y`
Cursor: `npx skills add anthropics/claude-plugins-official --skill playground -g -a cursor -y`
Gemini CLI: `npx skills add anthropics/claude-plugins-official --skill playground -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add anthropics/claude-plugins-official`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Playground Builder

A playground is a self-contained HTML file with interactive controls on one side, a live preview on the other, and a prompt output at the bottom with a copy button. The user adjusts controls, explores visually, then copies the generated prompt back into Claude.

## When to use this skill

When the user asks for an interactive playground, explorer, or visual tool for a topic, especially when the input space is large, visual, or structural and hard to express as plain text.

## How to use this skill

1. **Identify the playground type** from the user's request
2. **Load the matching template** from `templates/`:
   - `templates/design-playground.md`, Visual design decisions (components, layouts, spacing, color, typography)
   - `templates/data-explorer.md`, Data and query building (SQL, APIs, pipelines, regex)
   - `templates/concept-map.md`, Learning and exploration (concept maps, knowledge gaps, scope mapping)
   - `templates/document-critique.md`, Document review (suggestions with approve/reject/comment workflow)
   - `templates/diff-review.md`, Code review (git diffs, commits, PRs with line-by-line commenting)
   - `templates/code-map.md`, Codebase architecture (component relationships, data flow, layer diagrams)
3. **Follow the template** to build the playground. If the topic doesn't fit any template cleanly, use the one closest and adapt.
4. **Open in browser.** After writing the HTML file, run `open <filename>.html` to launch it in the user's default browser.

## Core requirements (every playground)

The rest: https://github.com/anthropics/claude-plugins-official/blob/HEAD/plugins/playground/skills/playground/SKILL.md