learn-toolkit:playground

Interactive Playground

Important

CRITICAL: Generate a single standalone HTML file with NO external dependencies. Everything must be inline — CSS, JavaScript, data. The file must open directly in any browser.

• Output to /tmp/playground-<topic-slug>.html
• Open it automatically: open /tmp/playground-<topic-slug>.html (macOS) or xdg-open (Linux)
• Use modern CSS (grid, flexbox, custom properties) for layout
• Use vanilla JavaScript — no frameworks, no CDN links
• RTL support: include dir="rtl" if content is in Hebrew
• Dark mode by default (matches terminal aesthetic), with toggle

Instructions

Step 1: Understand what to explore

Parse $ARGUMENTS to determine the playground type:

Input pattern	Playground type
"compare", "vs", "alternatives"	Side-by-side comparison with pros/cons
"parameters", "config", "options"	Interactive parameter explorer with sliders/toggles
"architecture", "design", "patterns"	Visual architecture explorer with clickable components
"timeline", "roadmap", "phases"	Interactive timeline with expandable details
"tradeoffs", "decision", "choose"	Decision matrix with weighted scoring
Other	Best-fit interactive format

Step 2: Research the topic

Use available tools to gather accurate data:

• WebSearch for current best practices and comparisons
• Grep/Glob for local codebase patterns if relevant
• Keep research focused — gather enough for accurate interactive content

Verification gate: At least 3 distinct data points or options to compare. If fewer, ask the user to narrow the topic or provide more context.

Step 3: Generate the HTML playground

Write a single HTML file to /tmp/playground-<slug>.html.

The HTML must include:

1. Header with topic title and description
2. Interactive controls (sliders, toggles, dropdowns, tabs) appropriate to the content
3. Visual display that updates in real-time as controls change
4. Summary/recommendation section that updates based on selections
5. Footer with "Generated by /learn-toolkit:playground skill for Claude Code"

Design principles:

• Dark background (#1a1a2e or similar), light text
• Accent color: #6c5ce7 (purple, matches Claude branding)
• Monospace font for code/data, system font for UI
• Responsive — works on any screen size
• Smooth transitions on state changes (200ms ease)
• No scrolljacking, no animations on load

Step 4: Open in browser

open /tmp/playground-<slug>.html  # macOS
# or
xdg-open /tmp/playground-<slug>.html  # Linux

Tell the user where the file is saved in case they want to keep it.

Verification gate: File exists and is valid HTML. Run a quick check:

test -f /tmp/playground-<slug>.html && echo "OK" || echo "FAIL"

Examples

Example 1: Compare databases

User says: /learn-toolkit:playground PostgreSQL vs MongoDB vs Redis

Actions:

1. Research current comparison data for all three
2. Generate HTML with tabbed comparison: features, performance, use cases, pricing
3. Include interactive scoring matrix where user can weight criteria
4. Save to /tmp/playground-postgresql-vs-mongodb-vs-redis.html
5. Open in browser

Result: Interactive comparison page with toggleable feature matrix and weighted decision tool

Example 2: Explore API design parameters

User says: /learn-toolkit:playground REST API pagination strategies

Actions:

1. Research: offset, cursor, keyset, page-number pagination
2. Generate HTML with:
   • Side-by-side code examples for each strategy
   • Interactive demo showing how each handles 10K records
   • Sliders for dataset size, page size, request count
   • Performance graph that updates with slider changes
3. Save to /tmp/playground-rest-api-pagination.html

Result: Interactive page where user can see how each pagination strategy performs with different parameters

Example 3: Architecture decision

User says: /learn-toolkit:playground monolith vs microservices for our team of 5

Actions:

1. Research tradeoffs with team size context
2. Generate HTML decision matrix with:
   • Weighted criteria (complexity, deployment, debugging, scaling)
   • Sliders for team size, expected scale, timeline
   • Visual recommendation that shifts as parameters change
3. Save to /tmp/playground-monolith-vs-microservices.html

Result: Interactive decision tool that recommends architecture based on user's specific parameters

Error Recovery

Error	Cause	Action
No arguments	User typed just /learn-toolkit:playground	Ask: "What would you like to explore? (e.g., 'PostgreSQL vs MongoDB', 'caching strategies')"
Topic too narrow	Only one option to compare	Suggest broadening: "Want me to include related alternatives?"
Cannot open browser	Headless environment or SSH	Print the file path and suggest: cat /tmp/playground-*.html or SCP
/tmp not writable	Permission issue	Try ~/playground-<slug>.html instead