html-playground
starsforks
How to install html-playground?
paulrberg/agent-skills/html-playground
$npx -y skills add PaulRBerg/agent-skills --skill html-playgroundUse to build interactive single-file HTML playgrounds, explorers, or tools with visual controls, live preview, and prompt copy-out.
SKILL.md
| 1 | # HTML Playground Builder |
| 2 | |
| 3 | Build a self-contained interactive HTML explorer with controls, live preview, and a copyable natural-language prompt. |
| 4 | |
| 5 | ## Workflow |
| 6 | |
| 7 | 1. Infer the product context, audience, decisions to explore, and required states. Existing design systems and explicit |
| 8 | user requirements override this skill's visual defaults. |
| 9 | 2. Read exactly one closest template and adapt it: |
| 10 | - `templates/design-playground.md` |
| 11 | - `templates/data-explorer.md` |
| 12 | - `templates/concept-map.md` |
| 13 | - `templates/document-critique.md` |
| 14 | - `templates/diff-review.md` |
| 15 | - `templates/code-map.md` |
| 16 | 3. Write one HTML file with inline CSS and JavaScript and no external runtime dependencies. |
| 17 | 4. Open it in a browser, interact with every control and preset, inspect representative viewport sizes, and verify live |
| 18 | preview, prompt output, copy feedback, empty/error states, and keyboard usability. Fix rendered defects before |
| 19 | completion. |
| 20 | |
| 21 | ## Opinionated Defaults |
| 22 | |
| 23 | Use these when product context does not indicate otherwise: |
| 24 | |
| 25 | - controls beside a live preview, with prompt output below; |
| 26 | - a polished light theme, system UI font, monospace code/values, minimal chrome; |
| 27 | - sensible non-empty initial state and 3–5 cohesive named presets; |
| 28 | - one state object, one update path, and immediate preview/prompt refresh; |
| 29 | - controls grouped by concern, with advanced controls collapsed; |
| 30 | - prompt text that explains the desired outcome in natural language and mentions only non-default choices. |
| 31 | |
| 32 | ## Invariants |
| 33 | |
| 34 | - No Apply button: relevant changes render immediately. |
| 35 | - The prompt is actionable without seeing the playground and is not a raw state dump. |
| 36 | - Copy has visible transient feedback and a usable fallback when the Clipboard API fails. |
| 37 | - Standardize copy microcopy as `Copy prompt`, then `Copied`; on failure use `Copy failed — select the prompt below` in |
| 38 | an `aria-live="polite"` region. |
| 39 | - Presets update controls, preview, and prompt consistently. |
| 40 | - Do not add controls that do not affect either the preview or the generated prompt. |
| 41 | |
| 42 | Completion requires the self-contained file plus rendered, interactive inspection evidence; opening the file without |
| 43 | exercising it is insufficient. Finish with `### ✨ Playground ready`, the linked artifact, and a compact |
| 44 | artifact/controls/viewports/copy-fallback table. Keep generated prompts free of decorative icons unless the requested |
| 45 | prompt content itself needs them; report decoration does not authorize ornament in copied output. |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
