playground — Agent Skill
by anthropics · Updated
Creates interactive HTML playgrounds — self-contained single-file explorers with visual controls, live preview, and prompt output with copy button. Includes templates for design playgrounds, data explorers, concept maps, and document critique.
At a glance
playground is an Agent Skill by anthropics in the Documents & Office category. In Claude Code it installs with `/plugin install playground@claude-plugins-official` after adding the anthropics/claude-plugins-official marketplace; other assistants use its SKILL.md instructions as rules. Its source repository has 45,039 GitHub stars (as of Oct 27, 2026).
How to install playground in your AI client
Setup for Claude Code, Claude Desktop, Cursor, Codex, Windsurf, Cline and VS Code — copy-paste ready.
How to install playground in Claude CodeAnthropic's agentic CLI
Add the marketplace
claude/plugin marketplace add anthropics/claude-plugins-officialInstall the skill
claude/plugin install playground@claude-plugins-officialUse it
These are slash commands for a Claude Code session, not your shell. Claude auto-invokes the skill when your request matches its description — or type its slash command if it exposes one.
How to install playground in Claude DesktopDesktop app (MCP config)
Clone the source
bashgit clone https://github.com/anthropics/claude-plugins-official.gitFind the skill
It lives in claude-plugins-official/plugins/playground — that folder contains the SKILL.md.
Add the SKILL.md to your Skills folder
Settings → Capabilities → Skills → add the folder containing SKILL.md. Claude picks it up automatically.
How to install playground in CursorAI-first code editor
Clone the source
bashgit clone https://github.com/anthropics/claude-plugins-official.gitFind the skill
It lives in claude-plugins-official/plugins/playground — that folder contains the SKILL.md.
Convert to a Cursor rule
Create .cursor/rules/playground.mdc and paste the SKILL.md body. Set `alwaysApply` or a glob so the Agent loads it in context.
How to install playground in Codex CLIOpenAI coding agent
Clone the source
bashgit clone https://github.com/anthropics/claude-plugins-official.gitFind the skill
It lives in claude-plugins-official/plugins/playground — that folder contains the SKILL.md.
Reference in AGENTS.md
Add the skill's instructions (or a link) to AGENTS.md at your repo root — Codex reads it on every run.
How to install playground in WindsurfCodeium's agentic IDE
Clone the source
bashgit clone https://github.com/anthropics/claude-plugins-official.gitFind the skill
It lives in claude-plugins-official/plugins/playground — that folder contains the SKILL.md.
Add to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
How to install playground in ClineVS Code autonomous agent
Clone the source
bashgit clone https://github.com/anthropics/claude-plugins-official.gitFind the skill
It lives in claude-plugins-official/plugins/playground — that folder contains the SKILL.md.
Add to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
How to install playground in VS CodeCopilot / MCP support
Clone the source
bashgit clone https://github.com/anthropics/claude-plugins-official.gitFind the skill
It lives in claude-plugins-official/plugins/playground — that folder contains the SKILL.md.
Add to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
Documentation
Full READMEPlayground Plugin
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.
What is a Playground?
A playground is a self-contained HTML file with:
- Interactive controls on one side
- A live preview on the other
- 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
Use this plugin 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.
Templates
The skill includes templates for common playground types:
- design-playground — Visual design decisions (components, layouts, spacing, color, typography)
- data-explorer — Data and query building (SQL, APIs, pipelines, regex)
- concept-map — Learning and exploration (concept maps, knowledge gaps, scope mapping)
- document-critique — Document review (suggestions with approve/reject/comment workflow)
Installation
Add this plugin to your Claude Code configuration to enable the playground skill.
More Documents & Office skills
- Documents & Office184k
document skills
Collection of document processing suite including Excel, Word, PowerPoint, and PDF capabilities
Anthropic Skills4 skillsby anthropics
- Documents & Office184k
claude api
Claude API and SDK documentation skill for building LLM-powered applications
Anthropic Skills1 skillsby anthropics
- Documents & Office45k
context7
Upstash Context7 MCP server for up-to-date documentation lookup. Connects to Context7's hosted remote MCP server (https://mcp.context7.com/mcp) — no local Node.js or npx required — to pull version-specific documentation and code examples directly from source repositories into your LLM context. Works anonymously out of…
Claude Plugins (Official)by anthropics
- Documents & Office16k
Claude Developer Platform
Official documentation
awesome-claude-skillsby travisvn
- Documents & Office16k
Skills API Endpoint
/v1/skills API documentation
awesome-claude-skillsby travisvn
- Documents & Office16k
Official Skills Repository Issues
[Claude Documentation](https://docs.claude.com/)
awesome-claude-skillsby travisvn
Catalog data refreshed . Something wrong? Report it.