一键导入
playground
Use to create interactive single-file HTML playgrounds/explorers/tools with visual controls, live preview, and prompt copy-out.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Use to create interactive single-file HTML playgrounds/explorers/tools with visual controls, live preview, and prompt copy-out.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use only when explicitly asked to archive/prune/compact/roll over checked tasks from TODO.md into `.ai/todos/TODO_UNTIL_YYYY_MM_DD.md`, leaving unchecked tasks.
Use only when explicitly invoked for Git commit workflows: stage intended changes, craft Conventional Prefix Format messages by default, Natural Language messages with --natural or configured repos, commit, and optionally --all, --staged, --deep, --close, or --push.
Use for dependency updates: update/bump deps, npm/pnpm/yarn/bun package upgrades, outdated checks, package.json updates, or taze.
Use for release versioning: bump/cut/tag a release, bump version, create a release, changelog updates, or version tagging.
Use for GitHub PR/issue/discussion workflows: create/update PRs or issues, post comments, start discussions; triggers include create/open PR, file/update issue, yeet.
Use to polish recently changed code: simplify for readability/maintainability and run a risk-profiled review that autonomously applies fixes. Default runs both passes; pass --simplify or --review for one. Covers code/PR review, audits, bug/security checks, reviewing diffs or changes, cleanup, refactoring, and reducing complexity.
| disable-model-invocation | false |
| name | playground |
| user-invocable | true |
| description | Use to create interactive single-file HTML playgrounds/explorers/tools with visual controls, live preview, and prompt copy-out. |
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(', ')}.`;
}