skills.rest
SocialGouv
SocialGouvOFFICIAL
Explore all skills by this author →
WebsiteGitHub

playground

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

16|1|Updated Mar 20, 2026
Search Tags:#html#single-file#interactive#prompt generator#playground#design tool#live preview
One-click install
npx skills add https://github.com/SocialGouv/iterion --skill playground-socialgouv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playground
Source: https://github.com/SocialGouv/iterion/tree/main/vendor/github.com/SocialGouv/claw-code-go/internal/tools/bundled_skills/playground/skills/playground
Command: npx skills add https://github.com/SocialGouv/iterion --skill playground-socialgouv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Exploring large visual or structural decision spaces — design tokens, SQL queries, code architecture, document feedback — is hard to express as plain text. This Skill builds self-contained interactive HTML tools that let users configure options visually, see a live preview, and copy out a natural-language prompt capturing their choices. ## Core Features & Use Cases - Six ready templates: design playgrounds, data explorers, concept maps, document critiques, diff reviews, and code architecture maps, each with layout, control, and prompt-output patterns. - Self-contained output: every playground is a single HTML file with inlined CSS and JS, no external dependencies, dark theme, presets, and instant live preview. - Prompt generation: controls update a natural-language prompt that mentions only non-default choices, with a clipboard copy button. - Use Case: A user wants to tune a card component's border-radius, shadow, and hover behavior. The Skill generates a design playground with sliders and toggles; the user adjusts controls, watches the preview update, and copies a prompt like "Update the card to use 12px border-radius and a subtle shadow." ## Quick Start Ask the AI to build an interactive playground for the topic you want to explore, such as a button style explorer or a SQL query builder.

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?▼

Identify which of the six templates fits your topic — design, data, concept map, document critique, diff review, or code map — then follow that template to build a single HTML file with controls, a live preview, and a prompt output panel. Open the file in a browser to use it.

What templates are available for building playgrounds?▼

Six templates cover design decisions, data and query building, learning concept maps, document review with approve/reject workflows, git diff review with line comments, and codebase architecture maps. If a topic fits none cleanly, adapt the closest one.

Does the playground require external libraries or a CDN?▼

No. Every playground must be a single HTML file with all CSS and JavaScript inlined and zero external dependencies, so it keeps working even if a CDN is unavailable.

How does the prompt output in a playground work?▼

A single state object holds all control values, and every change re-renders the preview and rebuilds the prompt text. The prompt is written as a natural instruction mentioning only non-default choices, with a copy button for clipboard export.

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

Every control must call a shared update function on change that re-renders the preview and regenerates the prompt. Missing event listeners or an Apply-button pattern breaks the instant-update requirement.

Related Skills

Explore More Design & Creative Skills→
clinecline
19

playground

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

Official
Intermediate
ryosukesutoryosukesuto
1

codex-review

Facilitate interactive code reviews with Codex in tmux or cmux terminals.

Community
Intermediate
Sounder25Sounder25
27

Adversarial Reviewer

Generate structured red-team prompts to critique code before release.

Community
Advanced
kulharir7kulharir7

openai-image-gen

Batch-generate images from natural language prompts using the OpenAI Images API.

Community
Intermediate