skills.rest
pgoell
pgoellCOMMUNITY
Explore all skills by this author →
Website𝕏@pagoellGitHub

playground

Creates single-file interactive HTML playgrounds with live previews and copyable prompt output.

Updated Mar 18, 2026
Search Tags:#html#single-file#interactive#prompt generator#playground#live preview#visual tool
One-click install
npx skills add https://github.com/pgoell/pgoell-claude-tools --skill playground-pgoell
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playground
Source: https://github.com/pgoell/pgoell-claude-tools/tree/main/plugins/playground/skills/playground
Command: npx skills add https://github.com/pgoell/pgoell-claude-tools --skill playground-pgoell

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Exploring visual, structural, or data-heavy decisions is hard to express in plain text. This Skill builds self-contained interactive HTML playgrounds where users adjust controls, see a live preview, and copy a natural-language prompt capturing their choices back into Claude. ## Core Features & Use Cases - Six ready templates: design playgrounds (components, color, typography), data explorers (SQL, APIs, regex), concept maps (learning and knowledge gaps), document critique (approve/reject/comment review), diff review (line-by-line code comments), and code maps (architecture diagrams with feedback). - Consistent interaction model: single state object, instant live preview on every control change, natural-language prompt output that only mentions non-default choices, and a copy button with feedback. - Use Case: Ask for a card component design playground, tweak border-radius, shadow, and padding with sliders, watch the preview update live, then copy the generated prompt describing your chosen style to hand back to Claude. ## Quick Start Create an interactive playground that lets me explore button styles with controls for radius, padding, and hover effects.

Frequently Asked Questions about playground

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an interactive HTML playground for a topic?▼

Ask for a playground, explorer, or interactive tool for your topic. The Skill picks the closest of six templates (design, data, concept map, document critique, diff review, code map), builds a single HTML file, and opens it in your browser.

What types of playgrounds can this skill generate?▼

Six template types are included: design playgrounds for visual decisions, data explorers for queries and pipelines, concept maps for learning, document critique with approve/reject workflows, diff review with line comments, and code maps for architecture diagrams.

Does the playground require external libraries or internet access?▼

No. Every playground is a single HTML file with all CSS and JavaScript inlined and zero external dependencies, so it works offline and never breaks due to CDN outages.

How does the prompt output in a playground work?▼

The playground generates a natural-language instruction that only mentions non-default choices and includes enough context to act on without seeing the playground. A copy button places it on your clipboard with a brief confirmation.

Why is my playground preview not updating when I change controls?▼

Every control must write to a single state object and call a shared update function that re-renders the preview and rebuilds the prompt. Missing that call on any control causes stale previews, which the Skill's state management pattern prevents.

Related Skills

Explore More Design & Creative Skills→
clinecline
19

playground

Generate self-contained interactive HTML playgrounds with live previews and dynamic prompts.

Official
Intermediate
ivfariasivfarias
22

receiving-code-review

Clarify and validate code-review feedback against the codebase before implementing changes.

Community
Intermediate
f-esquivelf-esquivel

spec

Generates formal specification documents for software changes from a prompt.

Community
Advanced
ConaryLabsConaryLabs
8

remember

Store user decisions and preferences across sessions using the mcp__mira__memory tool.

Official
Basic