From playground
Generates self-contained HTML playgrounds with controls, live previews, and copyable prompts for interactive exploration of design, data, code review, and architecture topics.
npx claudepluginhub aah-stack/anthropic --plugin playgroundThis skill uses the workspace's default tool permissions.
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.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Compresses source documents into lossless, LLM-optimized distillates preserving all facts and relationships. Use for 'distill documents' or 'create distillate' requests.
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.
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.
templates/:
templates/design-playground.md — Visual design decisions (components, layouts, spacing, color, typography)templates/data-explorer.md — Data and query building (SQL, APIs, pipelines, regex)templates/concept-map.md — Learning and exploration (concept maps, knowledge gaps, scope mapping)templates/document-critique.md — Document review (suggestions with approve/reject/comment workflow)templates/diff-review.md — Code review (git diffs, commits, PRs with line-by-line commenting)templates/code-map.md — Codebase architecture (component relationships, data flow, layer diagrams)open <filename>.html to launch it in the user's default browser.Keep a single state object. Every control writes to it, every render reads from it.
const state = { /* all configurable values */ };
function updateAll() {
renderPreview(); // update the visual
updatePrompt(); // rebuild the prompt text
}
// Every control calls updateAll() on change
function updatePrompt() {
const parts = [];
// Only mention non-default values
if (state.borderRadius !== DEFAULTS.borderRadius) {
parts.push(`border-radius of ${state.borderRadius}px`);
}
// Use qualitative language alongside numbers
if (state.shadowBlur > 16) parts.push('a pronounced shadow');
else if (state.shadowBlur > 0) parts.push('a subtle shadow');
prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
}