Playground skill: what it does and how to install it
Creates self-contained HTML playgrounds with live controls, visual previews, presets and copyable prompts for exploring design, data, concepts or code.
Summary generated from the skill's documentation.
Install
$ npx skills add cline/skills --skill playgroundRun it in a terminal. If your agent is already running, start a new session so it picks the skill up.
About this skill
What it does. Builds a single HTML file with inline CSS and JavaScript, controls beside a live preview, and a natural-language prompt that updates as settings change. It adapts templates for design, data, concept maps, document critique, diff review or code maps, with presets and clipboard copying.
When to use it. For interactive playgrounds, explorers or visual tools where controls and structure are easier to explore visually than in plain text. It opens the file in a browser when possible and otherwise provides its path.
History
Repo stars
34
Tracking since . A chart appears once there are 7 days of data.
Installs
1.9k
Tracking since . A chart appears once there are 7 days of data.
Installs via skills.sh
Similar skills
- Skill CreatorCreates new skills, improves existing ones and measures how well they perform with evals and benchmarks.
- Codebase DesignGives the agent a shared vocabulary for designing deep modules, deciding interfaces and making code easier to test.
- Improve Codebase ArchitectureScans a codebase for chances to deepen modules, shows them in an HTML report, then interviews you about the one you pick.