From atum-workflows
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 arnwaldn/atum-plugins-collection --plugin atum-workflowsThis 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.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides idea refinement into designs: explores context, asks questions one-by-one, proposes approaches, presents sections for approval, writes/review specs before coding.
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(', ')}.`;
}