playground Skill (Anthropic) for Claude Code: What It Does and How to Install It

Makes Claude build a one-file HTML explorer with controls, a live preview and a prompt you copy back into the chat.

Installs: 8.3K; on skills.sh
Stars: 45.7K; on GitHub
Files: 6; besides SKILL.md
Updated: Nov 2026; last repo commit

This skill is part of Anthropic's own playground plugin. Claude picks one of six templates, writes a single HTML file with inline CSS and JavaScript, and opens it in your browser. You adjust the controls, then copy the generated prompt back into Claude.

Every playground has a live preview, sensible defaults with 3-5 presets, a dark theme and a copy button. The prompt output is written as a natural instruction that mentions only non-default choices. The skill runs an open command to launch the file. The plugin README lists four templates, while SKILL.md and the plugin tree have six.

Good for

People tuning a design, such as spacing, color or type, by sight instead of by describing it
Developers building a query, API call or regex with live feedback
Reviewers who want to comment on a diff or a document in a browser page

Install playground

Claude Code

Copy this prompt.

Install the playground skill in Claude Code. Run this command:

/plugin install playground@claude-plugins-official

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

The plugin route follows the marketplace README, which says to run /plugin install {plugin-name}@claude-plugins-official. The plugin contains only this skill. The skill writes an HTML file and runs a shell command to open it, so there is no Claude app tab.

From the project README. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

When to use this skill
How to use this skill
Core requirements (every playground)
State management pattern
Prompt output pattern
Common mistakes to avoid

Key facts

Author: Anthropic (plugin.json and the marketplace entry name Anthropic; vendor's own repo)
License: Apache-2.0 (the plugin's LICENSE file)
Installs on skills.sh: 8,306 (Nov 2, 2026)
GitHub stars: 45,717 for the whole anthropics/claude-plugins-official repo (Nov 2, 2026)
Last repo commit: Nov 1, 2026
What it includes: 7 files in the skill folder: SKILL.md and 6 templates; no scripts
Part of: The playground plugin in the claude-plugins-official marketplace, category development

What it includes

Visual design: components, layouts, spacing, color and typography
Controls change a live preview and a prompt you copy.
Try: “Make a playground to tune this card's radius, shadow and spacing”
Write · design-playground
Data and query building: SQL, APIs, pipelines and regex
Build the query with controls and copy it back as a prompt.
Write · data-explorer
Learning and exploration: concept maps, knowledge gaps, scope mapping
Lays out ideas visually so you can mark what you know.
Write · concept-map
Document review with approve, reject and comment on each suggestion
Review suggestions in the page and copy your decisions as a prompt.
Write · document-critique
Code review of commits, PRs and diffs, with line-by-line comments
Layout shows a commit header and diff content with line numbers.
Write · diff-review
Codebase architecture: components, data flow and layers on an SVG canvas
Has view presets, layer toggles, zoom and commenting.
Write · code-map
Runs open <filename>.html to launch the file in your default browser
The last step in SKILL.md: after writing the HTML file, run open <filename>.html to launch it in your default browser.
Runs code · Open in browser
Single HTML file, live preview, natural prompt, copy button, presets, dark theme
SKILL.md also lists common mistakes, such as a value-dump prompt or external dependencies.
Core requirements

From the official docs

Permissions

Low risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It writes a file and launches your browser
The final step in SKILL.md runs open <filename>.html. The page is code Claude wrote, so look at it before you share it. github.com
Plugin manifest
The playground plugin has a plugin.json, a README, a LICENSE and the skill folder. The tree shows no hooks, agents or MCP config files. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Scopes	Writes a self-contained HTML file in your working folder Runs an open command to launch it in your browser

Questions

What does the playground skill do?

It makes Claude build an interactive HTML page for a topic. You change controls and watch a live preview, and the page writes a prompt that you copy back into Claude.

Is it official?

Yes. The plugin is listed in Anthropic's claude-plugins-official marketplace, and plugin.json names Anthropic as author.

How do I install it?

Use the install box above. The marketplace README says to run /plugin install {plugin-name}@claude-plugins-official, or browse the plugin in /plugin, then Discover.

Which kinds of playground can it make?

SKILL.md lists six: design, data explorer, concept map, document critique, diff review and code map. The plugin README lists four of them.

Does it need the internet or any libraries?

SKILL.md requires a single HTML file with all CSS and JS inline and no external dependencies, so the page does not rely on a CDN.

Why did it open a browser tab?

The last step in SKILL.md is to run open <filename>.html after writing the file. That launches your default browser.

Does it work in the Claude app?

The plugin README and marketplace README talk about Claude Code only. The skill writes a file and runs a shell command, so the install box has no Claude app tab.

Is it safe?

It writes an HTML file in your working folder and runs a command to open it. It bundles no scripts and the plugin has no hooks or MCP files in its tree. Our advice: check the file before sharing it, since it is code that runs in your browser.

Information

updated Nov 2, 2026

Repository: anthropics/claude-plugins-official
Folder: plugins/playground/skills/playground

anthropics/claude-plugins-official skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 11

README.md · github.com
marketplace.json · github.com
SKILL.md · github.com
README.md · github.com
design-playground.md · github.com
data-explorer.md · github.com
concept-map.md · github.com
document-critique.md · github.com
diff-review.md · github.com
code-map.md · github.com
plugin.json · github.com