playground
what it does
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.
Same request, same model, once with the skill and once without. Read both and judge for yourself.
Claude Sonnet 5.5
made by Anthropic
claude-sonnet-5-5 · revision not reported by the provider
1 try per case · tested 7 Nov 2026
GPT-6.1 Sol
made by OpenAI
gpt-6.1-sol · revision not reported by the provider
1 try per case · tested 7 Nov 2026
example-1
“Can you make me a playground for designing CSS box shadows? I'd like sliders for offset X/Y, blur, spread, and opacity, a color picker, and an inset toggle. Show a live preview box and give me a copy button that outputs a prompt describing the shadow settings I chose so I can paste it into my coding assistant.”
example-2
“I'm teaching my students about compound interest. Build an interactive explorer in a single HTML file where they can change the starting amount, monthly contribution, interest rate, and number of years, and see a live chart of the growth. At the bottom, include a copyable prompt summarizing their chosen scenario so they can ask an AI to explain the results.”
Download the .zip and unzip it. Put its files, in a folder named playground, here:
~/.claude/skills/Every project. For one project only, use .claude/skills/ inside it.~/.agents/skills/Every project. For one repository only, use .agents/skills/ inside it.~/.cursor/skills/Cursor also reads the Claude Code and Codex folders above.Then start a new session and ask for what the skill does. Other agents that read SKILL.md have their own skills folder; check their docs.
Or install from your agent: ask it to install playground from Carte Blanche.