From learn-toolkit
Interactive playground: generates a standalone HTML page for exploring parameters, comparing alternatives, and experimenting with options in real-time in the browser. Use when the user wants to see alternatives side-by-side, tweak parameters interactively, or needs a visual comparison that's too complex for terminal ASCII. Triggers: /learn-toolkit:playground, 'compare options', 'interactive', 'show me alternatives', 'let me play with', 'explore parameters', 'side by side'. Do NOT use for simple diagrams (use /learn-toolkit:visualize) or deep learning (use /learn-toolkit:learn).
npx claudepluginhub yodem/learn-toolkit --plugin learn-toolkitThis skill is limited to using the following tools:
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.
Generates self-contained HTML playgrounds with controls, live previews, and copyable prompts for interactive exploration of design, data, code review, and architecture topics.
Generates self-contained, branded HTML pages for diagrams, architecture overviews, diff reviews, plans, project recaps, comparisons, and data tables. Proactively replaces complex ASCII tables (4+ rows or 3+ columns) with browser visuals.
Builds professional static HTML presentations with 36 themes, 31 layouts, 47 animations (CSS + canvas)—pure HTML/CSS/JS, no build step or dependencies.
Share bugs, ideas, or general feedback.
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.
/tmp/playground-<topic-slug>.htmlopen /tmp/playground-<topic-slug>.html (macOS) or xdg-open (Linux)dir="rtl" if content is in HebrewParse $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 |
Use available tools to gather accurate data:
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.
Write a single HTML file to /tmp/playground-<slug>.html.
The HTML must include:
Design principles:
#1a1a2e or similar), light text#6c5ce7 (purple, matches Claude branding)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"
User says: /learn-toolkit:playground PostgreSQL vs MongoDB vs Redis
Actions:
/tmp/playground-postgresql-vs-mongodb-vs-redis.htmlResult: Interactive comparison page with toggleable feature matrix and weighted decision tool
User says: /learn-toolkit:playground REST API pagination strategies
Actions:
/tmp/playground-rest-api-pagination.htmlResult: Interactive page where user can see how each pagination strategy performs with different parameters
User says: /learn-toolkit:playground monolith vs microservices for our team of 5
Actions:
/tmp/playground-monolith-vs-microservices.htmlResult: Interactive decision tool that recommends architecture based on user's specific parameters
| 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 |