playground

Name: playground
Author: skateddu

27stars4forks

How to install playground?

skateddu/claude-code-python-setup/playground

$npx -y skills add skateddu/claude-code-python-setup --skill playground

Installs into the current project.

Summary

Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playground, explorer, or interactive tool for a topic.

Files · 1

View on GitHub

SKILL.md

1	# Playground Builder
2
3	A playground is a self-contained HTML file with interactive controls on one side, a live preview on the other, and a prompt output at the bottom with a copy button. The user adjusts controls, explores visually, then copies the generated prompt back into Claude.
4
5	## When to use this skill
6
7	When the user asks for an interactive playground, explorer, or visual tool for a topic — especially when the input space is large, visual, or structural and hard to express as plain text.
8
9	## How to use this skill
10
11	1. Identify the playground type from the user's request
12	2. Load the matching template from `templates/`:
13	- `templates/design-playground.md` — Visual design decisions (components, layouts, spacing, color, typography)
14	- `templates/data-explorer.md` — Data and query building (SQL, APIs, pipelines, regex)
15	- `templates/concept-map.md` — Learning and exploration (concept maps, knowledge gaps, scope mapping)
16	- `templates/document-critique.md` — Document review (suggestions with approve/reject/comment workflow)
17	- `templates/diff-review.md` — Code review (git diffs, commits, PRs with line-by-line commenting)
18	- `templates/code-map.md` — Codebase architecture (component relationships, data flow, layer diagrams)
19	3. Follow the template to build the playground. If the topic doesn't fit any template cleanly, use the one closest and adapt.
20	4. Open in browser. After writing the HTML file, run `open <filename>.html` to launch it in the user's default browser.
21
22	## Core requirements (every playground)
23
24	- Single HTML file. Inline all CSS and JS. No external dependencies.
25	- Live preview. Updates instantly on every control change. No "Apply" button.
26	- Prompt output. Natural language, not a value dump. Only mentions non-default choices. Includes enough context to act on without seeing the playground. Updates live.
27	- Copy button. Clipboard copy with brief "Copied!" feedback.
28	- Sensible defaults + presets. Looks good on first load. Include 3-5 named presets that snap all controls to a cohesive combination.
29	- Dark theme. System font for UI, monospace for code/values. Minimal chrome.
30
31	## State management pattern
32
33	Keep a single state object. Every control writes to it, every render reads from it.
34
35	```javascript
36	const state = { /* all configurable values */ };
37
38	function updateAll() {
39	renderPreview(); // update the visual
40	updatePrompt(); // rebuild the prompt text
41	}
42	// Every control calls updateAll() on change
43	```
44
45	## Prompt output pattern
46
47	```javascript
48	function updatePrompt() {
49	const parts = [];
50
51	// Only mention non-default values
52	if (state.borderRadius !== DEFAULTS.borderRadius) {
53	parts.push(`border-radius of ${state.borderRadius}px`);
54	}
55
56	// Use qualitative language alongside numbers
57	if (state.shadowBlur > 16) parts.push('a pronounced shadow');
58	else if (state.shadowBlur > 0) parts.push('a subtle shadow');
59
60	prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
61	}
62	```
63
64	## Common mistakes to avoid
65
66	- Prompt output is just a value dump → write it as a natural instruction
67	- Too many controls at once → group by concern, hide advanced in a collapsible section
68	- Preview doesn't update instantly → every control change must trigger immediate re-render
69	- No defaults or presets → starts empty or broken on load
70	- External dependencies → if CDN is down, playground is dead
71	- Prompt lacks context → include enough that it's actionable without the playground

People who liked this also viewed

6 picks

Type

playground

27stars4forks

View on GitHub

How to install playground?

skateddu/claude-code-python-setup/playground

$npx -y skills add skateddu/claude-code-python-setup --skill playground

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Playground Builder
2
3	A playground is a self-contained HTML file with interactive controls on one side, a live preview on the other, and a prompt output at the bottom with a copy button. The user adjusts controls, explores visually, then copies the generated prompt back into Claude.
4
5	## When to use this skill
6
7	When the user asks for an interactive playground, explorer, or visual tool for a topic — especially when the input space is large, visual, or structural and hard to express as plain text.
8
9	## How to use this skill
10
11	1. Identify the playground type from the user's request
12	2. Load the matching template from `templates/`:
13	- `templates/design-playground.md` — Visual design decisions (components, layouts, spacing, color, typography)
14	- `templates/data-explorer.md` — Data and query building (SQL, APIs, pipelines, regex)
15	- `templates/concept-map.md` — Learning and exploration (concept maps, knowledge gaps, scope mapping)
16	- `templates/document-critique.md` — Document review (suggestions with approve/reject/comment workflow)
17	- `templates/diff-review.md` — Code review (git diffs, commits, PRs with line-by-line commenting)
18	- `templates/code-map.md` — Codebase architecture (component relationships, data flow, layer diagrams)
19	3. Follow the template to build the playground. If the topic doesn't fit any template cleanly, use the one closest and adapt.
20	4. Open in browser. After writing the HTML file, run `open <filename>.html` to launch it in the user's default browser.
21
22	## Core requirements (every playground)
23
24	- Single HTML file. Inline all CSS and JS. No external dependencies.
25	- Live preview. Updates instantly on every control change. No "Apply" button.
26	- Prompt output. Natural language, not a value dump. Only mentions non-default choices. Includes enough context to act on without seeing the playground. Updates live.
27	- Copy button. Clipboard copy with brief "Copied!" feedback.
28	- Sensible defaults + presets. Looks good on first load. Include 3-5 named presets that snap all controls to a cohesive combination.
29	- Dark theme. System font for UI, monospace for code/values. Minimal chrome.
30
31	## State management pattern
32
33	Keep a single state object. Every control writes to it, every render reads from it.
34
35	```javascript
36	const state = { /* all configurable values */ };
37
38	function updateAll() {
39	renderPreview(); // update the visual
40	updatePrompt(); // rebuild the prompt text
41	}
42	// Every control calls updateAll() on change
43	```
44
45	## Prompt output pattern
46
47	```javascript
48	function updatePrompt() {
49	const parts = [];
50
51	// Only mention non-default values
52	if (state.borderRadius !== DEFAULTS.borderRadius) {
53	parts.push(`border-radius of ${state.borderRadius}px`);
54	}
55
56	// Use qualitative language alongside numbers
57	if (state.shadowBlur > 16) parts.push('a pronounced shadow');
58	else if (state.shadowBlur > 0) parts.push('a subtle shadow');
59
60	prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
61	}
62	```
63
64	## Common mistakes to avoid
65
66	- Prompt output is just a value dump → write it as a natural instruction
67	- Too many controls at once → group by concern, hide advanced in a collapsible section
68	- Preview doesn't update instantly → every control change must trigger immediate re-render
69	- No defaults or presets → starts empty or broken on load
70	- External dependencies → if CDN is down, playground is dead
71	- Prompt lacks context → include enough that it's actionable without the playground

People who liked this also viewed

6 picks

Type