| name | iii-playground |
| description | Generate a single-file, throwaway HTML editor for a specific task — drag-and-drop kanban, slider tuner, form editor, split-preview, or annotation canvas. Always ends in a "copy as prompt" or "copy as JSON" button so the user can paste the result back into the agent. Same iii editorial register as the architecture, infographic, and slides skills — cream paper or warm dark, Inter Tight + JetBrains Mono, ember accent on the export action. Use when the user asks for a tuner, a sliders panel, a draggable interface, a custom editor, a triage UI, or any one-off interactive HTML to manipulate values they'll feed back into the agent. |
| license | Apache-2.0 |
| metadata | {"version":"1.0","author":"iii (https://iii.dev)","brand":"iii"} |
iii Playground Skill
Generates a single-file HTML page that lets the user manipulate values, then exports the result back to the agent via a copy as prompt or copy as JSON button. The page is throwaway by design — no build step, no framework, vanilla JS only. Same iii editorial register as the rest of the bundle.
When to use
- The user is reordering, triaging, or bucketing items (tickets, test cases, feedback, todos).
- The user is tuning numeric values that are painful to express in text (animation parameters, easing curves, color, cron expressions, regex, weight matrices).
- The user is editing structured config with constraints (feature flags, env vars, JSON/YAML with dependencies).
- The user is curating a dataset (approve/reject/tag rows).
- The user is annotating a document, transcript, or diff and exporting annotations.
- The agent is iterating on a prompt, copy, or template with live preview.
When NOT to use
- The output is a long-lived product feature. Build the real thing in the project's actual stack, not a playground.
- The output is a static deliverable (diagram, page, deck). Use
iii-architecture-diagram, iii-infographic, or iii-slides.
- The user wants persistence beyond their browser session. The playground is single-session by default.
- The use case has zero export action. A playground without an export button is just a static page.
Workflow
- Pick a pattern —
references/patterns.md. Five patterns: kanban, tuner, form-editor, split-preview, curate. Pick exactly one.
- Decide the export shape — what does the user copy back to the agent? A list, a JSON blob, a prompt fragment, a diff. State this up-front.
- Open the scaffold —
templates/playground.html ships a working tuner with the topnav, two-column body, sticky export bar, and theme cycle wired.
- Pull a snippet —
templates/playground-snippets/<pattern>.html swaps the body for the chosen pattern.
- Wire the export — exactly one
[copy as prompt] button (ember) plus optional [copy as JSON] (neutral). Both write to clipboard via navigator.clipboard.writeText.
- Walk the checklist —
references/checklist.md. Refuse anything in references/anti-patterns.md.
References
| File | Covers |
|---|
references/tokens.md | Color, typography, density (shared with the rest of the bundle) |
references/playground-grammar.md | Page frame, sticky export bar, vanilla-JS rules, state model, clipboard pattern |
references/patterns.md | Five patterns and when to pick each |
references/checklist.md | Pre-output gate |
references/anti-patterns.md | Refuse-to-ship list |
Templates in templates/playground.html + templates/playground-snippets/*.html.
Commands
commands/iii-playground.md is the entrypoint. Surfaces as /iii-playground <task> in Claude Code, namespaced as /iii-playground:iii-playground in plugin form.
iii context
For canonical iii primitive semantics (iii.registerFunction, iii.registerTrigger, worker registration, trigger types), see iii.dev/docs.
