[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6BXKD172FPP06VMG5E4GQ3W":3,"skill-same:01M6BXKD172FPP06VMG5E4GQ3W":114},{"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":27,"linkOnly":28,"markdownContent":29,"markdownBody":30,"frontMatter":31,"refName":32,"commitSha":33,"skillDirectory":34,"forksCount":35,"repositoryHtmlUrl":36,"repositoryHomepageUrl":6,"ownerHtmlUrl":37,"ownerBlogUrl":6,"ownerDescription":38,"updatedAt":39,"install":40,"resources":53},"01M6BXKD172FPP06VMG5E4GQ3W","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.","OriNachum\u002Fautonomous-intelligence","OriNachum","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20955789?v=4","01M6BXKB8XY7RHN166G1TY4FRF","Ori Nachum","01M6BXKBCPVY67KNQ7D7QFH1PD",245,"MIT","https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Fclaude-code-projects\u002Fclaude-playground\u002F.agents\u002Fskills\u002Fplayground\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[5,24,25,26],"file","configure","tool","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","7f34d35030f36ee7a62c7fbab25446956053e524","claude-code-projects\u002Fclaude-playground\u002F.agents\u002Fskills\u002Fplayground",15,"https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence","https:\u002F\u002Fgithub.com\u002FOriNachum","AI Expert, Tipalti, a Jetson AI Lab community leader, AWS Community Builder, A maintainer of dusty-nv\u002Fjetson-containers, Culture.dev and other OSS","2026-04-09 06:55:00",{"source":8,"skillName":5,"commands":41,"prompt":51,"zipAvailable":52},[42,45,48],{"tool":43,"command":44},"npx","npx skills add OriNachum\u002Fautonomous-intelligence --skill playground",{"tool":46,"command":47},"bunx","bunx skills add OriNachum\u002Fautonomous-intelligence --skill playground",{"tool":49,"command":50},"pnpm","pnpm dlx skills add OriNachum\u002Fautonomous-intelligence --skill playground","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Fclaude-code-projects\u002Fclaude-playground\u002F.agents\u002Fskills\u002Fplayground\u002FSKILL.md",true,[54,60,64,68,72,76,80,86,90,94,98,102,106,110],{"path":55,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":58,"sourceHtmlUrl":59},"references\u002Fcampaign-doc-field-naming.md","REFERENCE","参考文档",3618,"https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002Fhermes\u002Fskills\u002Fworldarchitect\u002Fwa-campaign-content-analysis\u002Freferences\u002Fcampaign-doc-field-naming.md",{"path":61,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":62,"sourceHtmlUrl":63},"references\u002Fpc-silent-prompt-diagnosis.md",7500,"https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002Fhermes\u002Fskills\u002Fworldarchitect\u002Fwa-campaign-content-analysis\u002Freferences\u002Fpc-silent-prompt-diagnosis.md",{"path":65,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":66,"sourceHtmlUrl":67},"references\u002Fpersonal-scale-challenge-pattern.md",14474,"https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002Fhermes\u002Fskills\u002Fworldarchitect\u002Fwa-campaign-content-analysis\u002Freferences\u002Fpersonal-scale-challenge-pattern.md",{"path":69,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":70,"sourceHtmlUrl":71},"references\u002Fprompt-fix-effectiveness-verification.md",11800,"https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002Fhermes\u002Fskills\u002Fworldarchitect\u002Fwa-campaign-content-analysis\u002Freferences\u002Fprompt-fix-effectiveness-verification.md",{"path":73,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":74,"sourceHtmlUrl":75},"references\u002Fstory-doc-schema.md",6353,"https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002Fhermes\u002Fskills\u002Fworldarchitect\u002Fwa-campaign-content-analysis\u002Freferences\u002Fstory-doc-schema.md",{"path":77,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":78,"sourceHtmlUrl":79},"references\u002Fvisenya-v9-raw-text-analyzer.md",8666,"https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002Fhermes\u002Fskills\u002Fworldarchitect\u002Fwa-campaign-content-analysis\u002Freferences\u002Fvisenya-v9-raw-text-analyzer.md",{"path":81,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":84,"sourceHtmlUrl":85},"scripts\u002Fper_scene_dialog_audit.py","SCRIPT","脚本",11824,"https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002Fhermes\u002Fskills\u002Fworldarchitect\u002Fwa-campaign-content-analysis\u002Fscripts\u002Fper_scene_dialog_audit.py",{"path":87,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":88,"sourceHtmlUrl":89},"scripts\u002Ftest_user_named_campaign_lookup.py",5992,"https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002Fhermes\u002Fskills\u002Fworldarchitect\u002Fwa-campaign-content-analysis\u002Fscripts\u002Ftest_user_named_campaign_lookup.py",{"path":91,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":92,"sourceHtmlUrl":93},"templates\u002Fcode-map.md",6196,"https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Fclaude-code-projects\u002Fclaude-playground\u002F.agents\u002Fskills\u002Fplayground\u002Ftemplates\u002Fcode-map.md",{"path":95,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":96,"sourceHtmlUrl":97},"templates\u002Fconcept-map.md",3644,"https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Fclaude-code-projects\u002Fclaude-playground\u002F.agents\u002Fskills\u002Fplayground\u002Ftemplates\u002Fconcept-map.md",{"path":99,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":100,"sourceHtmlUrl":101},"templates\u002Fdata-explorer.md",2817,"https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Fclaude-code-projects\u002Fclaude-playground\u002F.agents\u002Fskills\u002Fplayground\u002Ftemplates\u002Fdata-explorer.md",{"path":103,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":104,"sourceHtmlUrl":105},"templates\u002Fdesign-playground.md",2719,"https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Fclaude-code-projects\u002Fclaude-playground\u002F.agents\u002Fskills\u002Fplayground\u002Ftemplates\u002Fdesign-playground.md",{"path":107,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":108,"sourceHtmlUrl":109},"templates\u002Fdiff-review.md",5733,"https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Fclaude-code-projects\u002Fclaude-playground\u002F.agents\u002Fskills\u002Fplayground\u002Ftemplates\u002Fdiff-review.md",{"path":111,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":112,"sourceHtmlUrl":113},"templates\u002Fdocument-critique.md",5154,"https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Fclaude-code-projects\u002Fclaude-playground\u002F.agents\u002Fskills\u002Fplayground\u002Ftemplates\u002Fdocument-critique.md",[115,133,146,164,192,205],{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":124,"publishedAt":27},"01M6BXM48KCJWY2Z99GK4YHQZZ","test","Run TTS round-trip tests — pure-logic unit tests and optional integration tests against live TTS\u002FSTT services.","https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Frealtime-api\u002F.agent\u002Fskills\u002Ftest\u002FSKILL.md",[121],{"categoryNo":122,"categoryName":123,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[117,125,126,127,128,129,130,131,132],"tts","verify","services","integration","run","run tests","unit tests","integration tests",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":139,"publishedAt":27},"01M6BXM2DCQE8ZQ2P9MHZFC3ZD","speak","Speak text aloud using the Magpie TTS container in the realtime-api Docker stack. Zero external dependencies — just curl + aplay.","https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Frealtime-api\u002F.agent\u002Fskills\u002Fspeak\u002FSKILL.md",[],[135,140,141,125,142,143,144,145],"text","stack","api","ZeRO","realtime","docker",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":160,"publishedAt":27},"01M6BXM0RKDRNRQ3Y76040A4ZH","deploy","Build and deploy the realtime-api Docker container with full verification that deployed code matches local source.","https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Frealtime-api\u002F.agent\u002Fskills\u002Fdeploy\u002FSKILL.md",[152,155],{"categoryNo":153,"categoryName":154,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":156,"categoryName":157,"taxonomyType":158,"taxonomyTypeDesc":159},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[148,145,144,161,162,142,163],"code","verification","ship",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":174,"publishedAt":27},"01M6BXKXCQQM74B1TK7YH87Y2E","memory","Unified memory management for notes, knowledge graph, RAG search, and file analysis. Use when working with: (1) Core memory — protected identity, projects, relationships, and system facts that should never be forgotten, (2) Working notes — per-session ephemeral notes organized by section, (3) MongoDB RAG — vector-search-enabled notes with importance scoring, decay, deduplication, and archival, (4) Neo4j knowledge graph — entities, relationships, merge duplicates, reinforce mentions, Cypher queries, (5) File analysis — deep file reading that extracts knowledge into all memory layers, (6) Service initialization — health-check, start\u002Fstop MongoDB, Neo4j, TEI embeddings via docker-compose with partial setup support.","https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Fqq\u002Fskills\u002Fmemory\u002FSKILL.md",[170,171],{"categoryNo":153,"categoryName":154,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":172,"categoryName":173,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000021","资料检索与研究",[166,175,176,177,178,179,180,181,182,183,145,184,185,24,186,187,188,189,190,191],"knowledge","projects","system","archive","health","neo4j","cypher","analyze","analysis","deduplication","knowledge graph","vector","search","core","notes","remember","mongodb",{"skillNo":193,"name":194,"nameZh":6,"description":195,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":196,"categories":197,"keywords":199,"publishedAt":27},"01M6BXKVJAD0VDHBRMKXCVHNMK","coding","Enhanced coding assistance","https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Fqq\u002Fskills\u002Fcoding\u002FSKILL.md",[198],{"categoryNo":156,"categoryName":157,"taxonomyType":158,"taxonomyTypeDesc":159},[194,161,200,201,202,203,204],"debug","javascript","implement","python","typescript",{"skillNo":206,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":207,"categories":208,"keywords":211,"publishedAt":27},"01M6BXKR9JFCTPFKM9QMH3DDD4","https:\u002F\u002Fgithub.com\u002FOriNachum\u002Fautonomous-intelligence\u002Fblob\u002Fmain\u002Fqq\u002F.claude\u002Fskills-test\u002Fmemory\u002FSKILL.md",[209,210],{"categoryNo":153,"categoryName":154,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":172,"categoryName":173,"taxonomyType":21,"taxonomyTypeDesc":22},[166,145,184,177,176,175,179,180,181,183,191,178,185,24,186,187,188,189,190,182]]