[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M718ASFS0TG9Y60ZDASQ93A0":3,"skill-same:01M718ASFS0TG9Y60ZDASQ93A0":97},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":51,"repositoryHtmlUrl":52,"repositoryHomepageUrl":53,"ownerHtmlUrl":54,"ownerBlogUrl":55,"ownerDescription":6,"updatedAt":56,"install":57,"resources":70},"01M718ASFS0TG9Y60ZDASQ93A0","playground",null,"Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playground, explorer, or interactive tool for a topic.","anthropics\u002Fclaude-plugins-official","anthropics","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F76263028?v=4","01M697XGDPXJAVQ8391V2BCYTE","Anthropic","01M7188MR49TZ9N2ZKPXJ7M7HY",46789,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fplayground\u002Fskills\u002Fplayground\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[5,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"preview","when","single","for","live preview","controls","copy","users","live","self","file","explorer","single-file","html","use","interactive","prompt","tool","configure","2026-11-10 10:12:30",false,"---\nname: playground\ndescription: Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playground, explorer, or interactive tool for a topic.\n---\n\n# Playground Builder\n\nA 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.\n\n## When to use this skill\n\nWhen 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.\n\n## How to use this skill\n\n1. **Identify the playground type** from the user's request\n2. **Load the matching template** from `templates\u002F`:\n   - `templates\u002Fdesign-playground.md` — Visual design decisions (components, layouts, spacing, color, typography)\n   - `templates\u002Fdata-explorer.md` — Data and query building (SQL, APIs, pipelines, regex)\n   - `templates\u002Fconcept-map.md` — Learning and exploration (concept maps, knowledge gaps, scope mapping)\n   - `templates\u002Fdocument-critique.md` — Document review (suggestions with approve\u002Freject\u002Fcomment workflow)\n   - `templates\u002Fdiff-review.md` — Code review (git diffs, commits, PRs with line-by-line commenting)\n   - `templates\u002Fcode-map.md` — Codebase architecture (component relationships, data flow, layer diagrams)\n3. **Follow the template** to build the playground. If the topic doesn't fit any template cleanly, use the one closest and adapt.\n4. **Open in browser.** After writing the HTML file, run `open \u003Cfilename>.html` to launch it in the user's default browser.\n\n## Core requirements (every playground)\n\n- **Single HTML file.** Inline all CSS and JS. No external dependencies.\n- **Live preview.** Updates instantly on every control change. No \"Apply\" button.\n- **Prompt output.** Natural language, not a value dump. Only mentions non-default choices. Includes enough context to act on without seeing the playground. Updates live.\n- **Copy button.** Clipboard copy with brief \"Copied!\" feedback.\n- **Sensible defaults + presets.** Looks good on first load. Include 3-5 named presets that snap all controls to a cohesive combination.\n- **Dark theme.** System font for UI, monospace for code\u002Fvalues. Minimal chrome.\n\n## State management pattern\n\nKeep a single state object. Every control writes to it, every render reads from it.\n\n```javascript\nconst state = { \u002F* all configurable values *\u002F };\n\nfunction updateAll() {\n  renderPreview(); \u002F\u002F update the visual\n  updatePrompt();  \u002F\u002F rebuild the prompt text\n}\n\u002F\u002F Every control calls updateAll() on change\n```\n\n## Prompt output pattern\n\n```javascript\nfunction updatePrompt() {\n  const parts = [];\n\n  \u002F\u002F Only mention non-default values\n  if (state.borderRadius !== DEFAULTS.borderRadius) {\n    parts.push(`border-radius of ${state.borderRadius}px`);\n  }\n\n  \u002F\u002F Use qualitative language alongside numbers\n  if (state.shadowBlur > 16) parts.push('a pronounced shadow');\n  else if (state.shadowBlur > 0) parts.push('a subtle shadow');\n\n  prompt.textContent = `Update the card to use ${parts.join(', ')}.`;\n}\n```\n\n## Common mistakes to avoid\n\n- Prompt output is just a value dump → write it as a natural instruction\n- Too many controls at once → group by concern, hide advanced in a collapsible section\n- Preview doesn't update instantly → every control change must trigger immediate re-render\n- No defaults or presets → starts empty or broken on load\n- External dependencies → if CDN is down, playground is dead\n- Prompt lacks context → include enough that it's actionable without the playground\n","# Playground Builder\n\nA 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.\n\n## When to use this skill\n\nWhen 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.\n\n## How to use this skill\n\n1. **Identify the playground type** from the user's request\n2. **Load the matching template** from `templates\u002F`:\n   - `templates\u002Fdesign-playground.md` — Visual design decisions (components, layouts, spacing, color, typography)\n   - `templates\u002Fdata-explorer.md` — Data and query building (SQL, APIs, pipelines, regex)\n   - `templates\u002Fconcept-map.md` — Learning and exploration (concept maps, knowledge gaps, scope mapping)\n   - `templates\u002Fdocument-critique.md` — Document review (suggestions with approve\u002Freject\u002Fcomment workflow)\n   - `templates\u002Fdiff-review.md` — Code review (git diffs, commits, PRs with line-by-line commenting)\n   - `templates\u002Fcode-map.md` — Codebase architecture (component relationships, data flow, layer diagrams)\n3. **Follow the template** to build the playground. If the topic doesn't fit any template cleanly, use the one closest and adapt.\n4. **Open in browser.** After writing the HTML file, run `open \u003Cfilename>.html` to launch it in the user's default browser.\n\n## Core requirements (every playground)\n\n- **Single HTML file.** Inline all CSS and JS. No external dependencies.\n- **Live preview.** Updates instantly on every control change. No \"Apply\" button.\n- **Prompt output.** Natural language, not a value dump. Only mentions non-default choices. Includes enough context to act on without seeing the playground. Updates live.\n- **Copy button.** Clipboard copy with brief \"Copied!\" feedback.\n- **Sensible defaults + presets.** Looks good on first load. Include 3-5 named presets that snap all controls to a cohesive combination.\n- **Dark theme.** System font for UI, monospace for code\u002Fvalues. Minimal chrome.\n\n## State management pattern\n\nKeep a single state object. Every control writes to it, every render reads from it.\n\n```javascript\nconst state = { \u002F* all configurable values *\u002F };\n\nfunction updateAll() {\n  renderPreview(); \u002F\u002F update the visual\n  updatePrompt();  \u002F\u002F rebuild the prompt text\n}\n\u002F\u002F Every control calls updateAll() on change\n```\n\n## Prompt output pattern\n\n```javascript\nfunction updatePrompt() {\n  const parts = [];\n\n  \u002F\u002F Only mention non-default values\n  if (state.borderRadius !== DEFAULTS.borderRadius) {\n    parts.push(`border-radius of ${state.borderRadius}px`);\n  }\n\n  \u002F\u002F Use qualitative language alongside numbers\n  if (state.shadowBlur > 16) parts.push('a pronounced shadow');\n  else if (state.shadowBlur > 0) parts.push('a subtle shadow');\n\n  prompt.textContent = `Update the card to use ${parts.join(', ')}.`;\n}\n```\n\n## Common mistakes to avoid\n\n- Prompt output is just a value dump → write it as a natural instruction\n- Too many controls at once → group by concern, hide advanced in a collapsible section\n- Preview doesn't update instantly → every control change must trigger immediate re-render\n- No defaults or presets → starts empty or broken on load\n- External dependencies → if CDN is down, playground is dead\n- Prompt lacks context → include enough that it's actionable without the playground\n",{"name":5,"description":7},"main","dceb15d50832e6adf380bedc26dde03d251324b9","plugins\u002Fplayground\u002Fskills\u002Fplayground",4865,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official","https:\u002F\u002Fcode.claude.com\u002Fdocs\u002Fen\u002Fplugins","https:\u002F\u002Fgithub.com\u002Fanthropics","https:\u002F\u002Fanthropic.com","2026-11-11 08:12:44",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add anthropics\u002Fclaude-plugins-official --skill playground",{"tool":63,"command":64},"bunx","bunx skills add anthropics\u002Fclaude-plugins-official --skill playground",{"tool":66,"command":67},"pnpm","pnpm dlx skills add anthropics\u002Fclaude-plugins-official --skill playground","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fplayground\u002Fskills\u002Fplayground\u002FSKILL.md",true,[71,77,81,85,89,93],{"path":72,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":75,"sourceHtmlUrl":76},"templates\u002Fcode-map.md","REFERENCE","参考文档",6196,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fplayground\u002Fskills\u002Fplayground\u002Ftemplates\u002Fcode-map.md",{"path":78,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":79,"sourceHtmlUrl":80},"templates\u002Fconcept-map.md",3644,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fplayground\u002Fskills\u002Fplayground\u002Ftemplates\u002Fconcept-map.md",{"path":82,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":83,"sourceHtmlUrl":84},"templates\u002Fdata-explorer.md",2817,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fplayground\u002Fskills\u002Fplayground\u002Ftemplates\u002Fdata-explorer.md",{"path":86,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":87,"sourceHtmlUrl":88},"templates\u002Fdesign-playground.md",2719,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fplayground\u002Fskills\u002Fplayground\u002Ftemplates\u002Fdesign-playground.md",{"path":90,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":91,"sourceHtmlUrl":92},"templates\u002Fdiff-review.md",5733,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fplayground\u002Fskills\u002Fplayground\u002Ftemplates\u002Fdiff-review.md",{"path":94,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":95,"sourceHtmlUrl":96},"templates\u002Fdocument-critique.md",5154,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fplayground\u002Fskills\u002Fplayground\u002Ftemplates\u002Fdocument-critique.md",[98,124,149,173,198,219],{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":102,"sourceHtmlUrl":103,"categories":104,"keywords":106,"publishedAt":43},"01M718BVSPNAK6S5NZCYFDBG6E","skill-creator","Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fskill-creator\u002Fskills\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fskill-creator\u002Fskills\u002Fskill-creator\u002FSKILL.md",[105],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[107,108,109,110,111,112,25,113,114,115,116,117,118,119,120,121,27,122,123,38],"skill creator","creator","performance","improve","run evals","new","analysis","create","optimize","variance analysis","run","edit","benchmark","existing skill","evals","accuracy","scratch",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":135,"publishedAt":43},"01M718BSVAWJRFN6MRCZZ0QX4X","session-report","Generate an explorable HTML report of Claude Code session usage (tokens, cache, subagents, skills, expensive prompts) from ~\u002F.claude\u002Fprojects transcripts.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fsession-report\u002Fskills\u002Fsession-report\u002FSKILL.md",[130],{"categoryNo":131,"categoryName":132,"taxonomyType":133,"taxonomyTypeDesc":134},"01JBSEEDCAT000000000000034","行政与办公人员","PROFESSION","适用职业",[136,137,138,139,140,141,142,143,144,145,146,147,37,148],"session","report","session report","projects","usage","generate","tokens","html report","transcripts","prompts","cache","code","subagents",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":158,"publishedAt":43},"01M718BPKHVD214FAS1T4E5XCE","receipts","Generate a personal Claude Code usage & impact report (\"receipts\") from this machine's local session transcripts — for justifying Claude Code usage\u002Fspend to a manager, self-review, or \"what have I been using this for\" check-ins. Mines ~\u002F.claude\u002Fprojects locally (no extra API calls beyond one final write-up), cross-references local git history, and writes a markdown report plus a self-contained HTML receipt to your home directory. Use when the user asks for \"receipts\", an \"impact report\", \"usage report\", wants to \"show my Claude Code activity\", \"prove the value of Claude Code\", or runs `\u002Freceipts`.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Freceipts\u002Fskills\u002Freceipts\u002FSKILL.md",[155],{"categoryNo":156,"categoryName":157,"taxonomyType":133,"taxonomyTypeDesc":134},"01JBSEEDCAT000000000000030","开发工程师",[151,139,159,160,161,162,25,147,163,164,33,165,141,166,167,168,169,170,171,172],"show","up","local","impact","api","review","references","markdown","directory","write","git","activity","my","manager",{"skillNo":174,"name":175,"nameZh":6,"description":176,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":177,"categories":178,"keywords":179,"publishedAt":43},"01M718BJMX0T4691FJQ62GYY5C","project-artifact","Generate and publish a project status artifact — an opinionated, tabbed status page for a project too big for one update (overview & success criteria, the workstream sequence, next steps, plus background, plan, risks & open questions, and decisions\u002FFAQ when they earn a tab) — published with the built-in Artifact tool to a default-private claude.ai page the user can share with teammates. Use when a piece of work spans several workstreams and you want a shareable overview kept current. Each artifact is backed by a small per-project config in the plugin data dir, so refreshing it re-gathers live state, redeploys the same URL, and reports only the delta. For software projects whose workstreams are PRs, also read swe.md (the X.Y PR-numbering convention; pulling PR state with gh\u002Fgit; a per-PR detail block). Needs the built-in Artifact tool (claude.ai login). Not for single-PR changes or public docs.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fproject-artifact\u002Fskills\u002Fproject-artifact\u002FSKILL.md",[],[180,181,182,183,139,184,185,186,187,188,189,25,190,191,192,193,194,195,196,197],"project","artifact","project artifact","project status","re","default","next steps","open","only","SWE","URL","you","reports","publish","work","plan","status page","next",{"skillNo":199,"name":200,"nameZh":6,"description":201,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":202,"categories":203,"keywords":205,"publishedAt":43},"01M718BF1TTFP5CM0S5HBW64FJ","skill-development","This skill should be used when the user wants to \"create a skill\", \"add a skill to plugin\", \"write a new skill\", \"improve skill description\", \"organize skill content\", or needs guidance on skill structure, progressive disclosure, or skill development best practices for Claude Code plugins.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fplugin-dev\u002Fskills\u002Fskill-development\u002FSKILL.md",[204],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[206,207,208,110,112,209,25,147,114,210,168,211,212,213,214,27,215,216,217,218],"development","skill development","skill to plugin","improve skill","structure","organize","new skill","claude code plugins","add","progressive","best practices","progressive disclosure","plugin",{"skillNo":220,"name":221,"nameZh":6,"description":222,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":223,"categories":224,"keywords":226,"publishedAt":43},"01M718BCARZ2J4PW0X3AJCZ8MZ","plugin-structure","This skill should be used when the user asks to \"create a plugin\", \"scaffold a plugin\", \"understand plugin structure\", \"organize plugin components\", \"set up plugin.json\", \"use ${CLAUDE_PLUGIN_ROOT}\", \"add commands\u002Fagents\u002Fskills\u002Fhooks\", \"configure auto-discovery\", or needs guidance on plugin directory layout, manifest configuration, component organization, file naming conventions, or Claude Code plugin architecture best practices.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-plugins-official\u002Fblob\u002Fmain\u002Fplugins\u002Fplugin-dev\u002Fskills\u002Fplugin-structure\u002FSKILL.md",[225],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[210,227,218,228,229,230,160,231,232,25,42,147,233,234,114,235,236,237,167,238],"Plugin Structure","SET","plugin architecture","hooks","auto-discovery","auto","components","architecture","component","layout","organization","commands"]