Playground
Creates interactive HTML playgrounds — self-contained single-file explorers with visual controls, live preview, and prompt output with copy button
- Type
- Plugin
- Repository
- anthropics/claude-plugins-official
- GitHub stars
- 37.1k
- License
- Apache-2.0
- Repo last updated
- Sep 25, 2026
- Source file
- plugins/playground/.claude-plugin/plugin.json
- Author
- Anthropic
What Playground is
Playground is a plugin published in the anthropics/claude-plugins-official repository on GitHub, which has about 37.1k stars. The repository describes itself as: “Official, Anthropic-managed directory of high quality Claude Code Plugins.”
A plugin is a package that bundles skills, slash commands, subagents, hooks, and MCP connectors so they install together. Plugins are plain files with a manifest at .claude-plugin/plugin.json, and they work in both Claude Code and Claude Cowork.
Installing Playground adds everything it ships in one step. Connectors inside a plugin still need to be connected separately, and hooks and subagents only run in Cowork and Claude Code, not in regular chat.
How to install Playground
Claude Code
- Add the repository as a plugin marketplace: claude plugin marketplace add anthropics/claude-plugins-official
- Install the plugin: claude plugin install playground@<marketplace-name>, using the marketplace name from the repository's .claude-plugin/marketplace.json.
- Restart the session if the new skills or commands don't appear straight away.
Claude Cowork
- Open Customize → Plugins and choose Add marketplace.
- Enter anthropics/claude-plugins-official (the owner/repo shorthand works for GitHub).
- Find Playground in the list, click Install, then connect any connectors it needs from its Connectors tab.
New to extending Cowork? Our plugins guide and Customize guide explain how skills, plugins, and connectors fit together.
Inside the source file
An excerpt from plugins/playground/.claude-plugin/plugin.json, shared under the repository's Apache-2.0 license. Read the full file on GitHub.
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.
Before you install
- Read the whole file first. Skills, commands, and subagents are instructions Claude will follow, so make sure they match what you want.
- Check which tools, scripts, or MCP servers it uses. Local servers and scripts run with your permissions.
- Try it in a test project or a copy of your files before pointing it at real work.
- Pin the version you tested, and review changes before updating.
- Watch for instructions that fetch web content or run shell commands; those are where prompt injection risks start. See our prompt injection guide.
FAQ
What is Playground?
Playground is a plugin for Claude Code and Claude Cowork from the anthropics/claude-plugins-official repository on GitHub. Creates interactive HTML playgrounds — self-contained single-file explorers with visual controls, live preview, and prompt output with copy button
How do I install Playground in Claude Code?
Add the repository as a plugin marketplace: claude plugin marketplace add anthropics/claude-plugins-official Install the plugin: claude plugin install playground@<marketplace-name>, using the marketplace name from the repository's .claude-plugin/marketplace.json. Restart the session if the new skills or commands don't appear straight away.
Can I use Playground in Claude Cowork?
Open Customize → Plugins and choose Add marketplace. Enter anthropics/claude-plugins-official (the owner/repo shorthand works for GitHub). Find Playground in the list, click Install, then connect any connectors it needs from its Connectors tab.
Is Playground safe to install?
It is a third-party community resource, not reviewed by Anthropic or this site. Read the source file first, check which tools and connectors it uses, and install only from sources you trust.
Similar resources
- Type Design Analyzer Use this agent when you need expert analysis of type design in your codebase. Specifically use it (1) when introducing a new type to ensure it follows best practices for encapsulation and invariant expression, (2) during pull request creation to review all types being added, and (3) when refactoring existing types to improve their design quality. The agent will provide both qualitative feedback… Subagent · anthropics/claude-plugins-official
- Terraform The Terraform MCP Server provides seamless integration with Terraform ecosystem, enabling advanced automation and interaction capabilities for Infrastructure as Code (IaC) development. Plugin · anthropics/claude-plugins-official
- Agent Creator Use this agent when the user asks to "create an agent", "generate an agent", "build a new agent", "make me an agent that...", or describes agent functionality they need. Trigger when user wants to create autonomous agents for plugins. Examples: Context: User wants to create a code review agent user: "Create an agent that reviews code for quality issues" assistant: "I'll use the agent-creator… Subagent · anthropics/claude-plugins-official
- Agent Sdk Verifier Py Use this agent to verify that a Python Agent SDK application is properly configured, follows SDK best practices and documentation recommendations, and is ready for deployment or testing. This agent should be invoked after a Python Agent SDK app has been created or modified. Subagent · anthropics/claude-plugins-official
- Playwright Browser automation and end-to-end testing MCP server by Microsoft. Enables Claude to interact with web pages, take screenshots, fill forms, click elements, and perform automated browser testing workflows. Plugin · anthropics/claude-plugins-official
- Mcp Tunnels Connect Claude to a private MCP server through an Anthropic MCP tunnel. Drives the Docker Compose quickstart end to end: certificates, proxy config, cloudflared, and a verifiable sample server. Plugin · anthropics/claude-plugins-official
- Plugin Dev Plugin development toolkit with skills for creating agents, commands, hooks, MCP integrations, and comprehensive plugin structure guidance Plugin · anthropics/claude-plugins-official
- Mcp Server Dev Skills for designing and building MCP servers that work seamlessly with Claude — guides you through deployment models (remote HTTP, MCPB, local), tool design patterns, auth, and interactive MCP apps. Plugin · anthropics/claude-plugins-official