playground
Use to create interactive single-file HTML playgrounds/explorers/tools with visual controls, live preview, and prompt copy-out.
- Installs
- 91
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/paulrberg/agent-skills --skill playground- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads playground automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Playground Builder
Build a self-contained interactive HTML explorer with controls, live preview, and a copyable natural-language prompt.
Workflow
- Infer the product context, audience, decisions to explore, and required states. Existing design systems and explicit user requirements override this skill's visual defaults.
- Read exactly one closest template and adapt it:
templates/design-playground.mdtemplates/data-explorer.mdtemplates/concept-map.mdtemplates/document-critique.mdtemplates/diff-review.mdtemplates/code-map.md
- Write one HTML file with inline CSS and JavaScript and no external runtime dependencies.
- Open it in a browser, interact with every control and preset, inspect representative viewport sizes, and verify live preview, prompt output, copy feedback, empty/error states, and keyboard usability. Fix rendered defects before completion.
Opinionated Defaults
Use these when product context does not indicate otherwise:
- controls beside a live preview, with prompt output below;
- a polished light theme, system UI font, monospace code/values, minimal chrome;
- sensible non-empty initial state and 3–5 cohesive named presets;
- one state object, one update path, and immediate preview/prompt refresh;
- controls grouped by concern, with advanced controls collapsed;
- prompt text that explains the desired outcome in natural language and mentions only non-default choices.
Invariants
- No Apply button: relevant changes render immediately.
- The prompt is actionable without seeing the playground and is not a raw state dump.
- Copy has visible transient feedback and a usable fallback when the Clipboard API fails.
- Presets update controls, preview, and prompt consistently.
- Do not add controls that do not affect either the preview or the generated prompt.
Completion requires the self-contained file plus rendered, interactive inspection evidence; opening the file without exercising it is insufficient.
FAQ
What does the playground skill do?
Use to create interactive single-file HTML playgrounds/explorers/tools with visual controls, live preview, and prompt copy-out.
How do I install playground?
Run npx skills add https://github.com/paulrberg/agent-skills --skill playground in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/playground/ (personal) or .claude/skills/playground/ (project).
Which AI agents can use playground?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is playground safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains playground?
It is published by paulrberg in paulrberg/agent-skills. It has 91 recorded installs.
More from paulrberg/agent-skills
effect-ts
paulrberg/agent-skills
Use for nontrivial Effect 4 work including services/layers, typed errors, Schema/JsonSchema, Config, runtime/concurrency, @effect/vitest, effect/ai and @effect/ai-, effect/sql and @effect/sql-, Effect Atom (@effect/atom-), or @prb/effect-next.
tailwind-css
paulrberg/agent-skills
Use for Tailwind v4 styling: add/fix classes, configure or migrate Tailwind, use tailwind-variants, or tw-animate-css.
cli-gh
paulrberg/agent-skills
Use for GitHub CLI automation: repository reads, workflow runs, search, codespaces, releases, configuration, or gh command syntax. Use yeet for contribution writes to PRs, issues, comments, or discussions.
code-polish
paulrberg/agent-skills
Polish changed code when the user explicitly asks, or when an active workflow requests post-implementation simplification and risk-profiled review over a fixed file scope.
yeet
paulrberg/agent-skills
Use for GitHub PR/issue/discussion workflows: create/update PRs, issues, or discussions and post issue or discussion comments; triggers include yeet.
bump-release
paulrberg/agent-skills
Cut a release: bump versions, write changelogs, commit, tag.
Popular ai & agents skills
google-agents-cli-publish
google/agents-cli
This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).
google-agents-cli-eval
google/agents-cli
This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
codex-pet
prime-skills/runcomfy-agent-skills
Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.
full-output-enforcement
leonxlnx/taste-skill
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
executing-plans
obra/superpowers
Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available