[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7165BTRMECY3E2H6ASJXCWT":3,"skill-same:01M7165BTRMECY3E2H6ASJXCWT":64},{"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":18,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":14,"repositoryHtmlUrl":47,"repositoryHomepageUrl":6,"ownerHtmlUrl":48,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":49,"install":50,"resources":63},"01M7165BTRMECY3E2H6ASJXCWT","web-games",null,"Web browser game development principles. Framework selection, WebGPU, optimization, PWA.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fgame-development\u002Fweb-games\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"games","web games","web","game","2026","Game Development Principles","unknown","principles","selection","community","framework selection","pwa","web browser","game development","Optimization","framework","browser","development","webgpu","2026-11-10 10:12:30",false,"---\nname: web-games\ndescription: \"Web browser game development principles. Framework selection, WebGPU, optimization, PWA.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# Web Browser Game Development\n\n> Framework selection and browser-specific principles.\n\n---\n\n## 1. Framework Selection\n\n### Decision Tree\n\n```\nWhat type of game?\n│\n├── 2D Game\n│   ├── Full game engine features? → Phaser\n│   └── Raw rendering power? → PixiJS\n│\n├── 3D Game\n│   ├── Full engine (physics, XR)? → Babylon.js\n│   └── Rendering focused? → Three.js\n│\n└── Hybrid \u002F Canvas\n    └── Custom → Raw Canvas\u002FWebGL\n```\n\n### Comparison (2025)\n\n| Framework | Type | Best For |\n|-----------|------|----------|\n| **Phaser 4** | 2D | Full game features |\n| **PixiJS 8** | 2D | Rendering, UI |\n| **Three.js** | 3D | Visualizations, lightweight |\n| **Babylon.js 7** | 3D | Full engine, XR |\n\n---\n\n## 2. WebGPU Adoption\n\n### Browser Support (2025)\n\n| Browser | Support |\n|---------|---------|\n| Chrome | ✅ Since v113 |\n| Edge | ✅ Since v113 |\n| Firefox | ✅ Since v131 |\n| Safari | ✅ Since 18.0 |\n| **Total** | **~73%** global |\n\n### Decision\n\n- **New projects**: Use WebGPU with WebGL fallback\n- **Legacy support**: Start with WebGL\n- **Feature detection**: Check `navigator.gpu`\n\n---\n\n## 3. Performance Principles\n\n### Browser Constraints\n\n| Constraint | Strategy |\n|------------|----------|\n| No local file access | Asset bundling, CDN |\n| Tab throttling | Pause when hidden |\n| Mobile data limits | Compress assets |\n| Audio autoplay | Require user interaction |\n\n### Optimization Priority\n\n1. **Asset compression** - KTX2, Draco, WebP\n2. **Lazy loading** - Load on demand\n3. **Object pooling** - Avoid GC\n4. **Draw call batching** - Reduce state changes\n5. **Web Workers** - Offload heavy computation\n\n---\n\n## 4. Asset Strategy\n\n### Compression Formats\n\n| Type | Format |\n|------|--------|\n| Textures | KTX2 + Basis Universal |\n| Audio | WebM\u002FOpus (fallback: MP3) |\n| 3D Models | glTF + Draco\u002FMeshopt |\n\n### Loading Strategy\n\n| Phase | Load |\n|-------|------|\n| Startup | Core assets, \u003C2MB |\n| Gameplay | Stream on demand |\n| Background | Prefetch next level |\n\n---\n\n## 5. PWA for Games\n\n### Benefits\n\n- Offline play\n- Install to home screen\n- Full screen mode\n- Push notifications\n\n### Requirements\n\n- Service worker for caching\n- Web app manifest\n- HTTPS\n\n---\n\n## 6. Audio Handling\n\n### Browser Requirements\n\n- Audio context requires user interaction\n- Create AudioContext on first click\u002Ftap\n- Resume context if suspended\n\n### Best Practices\n\n- Use Web Audio API\n- Pool audio sources\n- Preload common sounds\n- Compress with WebM\u002FOpus\n\n---\n\n## 7. Anti-Patterns\n\n| ❌ Don't | ✅ Do |\n|----------|-------|\n| Load all assets upfront | Progressive loading |\n| Ignore tab visibility | Pause when hidden |\n| Block on audio load | Lazy load audio |\n| Skip compression | Compress everything |\n| Assume fast connection | Handle slow networks |\n\n---\n\n> **Remember:** Browser is the most accessible platform. Respect its constraints.\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n","# Web Browser Game Development\n\n> Framework selection and browser-specific principles.\n\n---\n\n## 1. Framework Selection\n\n### Decision Tree\n\n```\nWhat type of game?\n│\n├── 2D Game\n│   ├── Full game engine features? → Phaser\n│   └── Raw rendering power? → PixiJS\n│\n├── 3D Game\n│   ├── Full engine (physics, XR)? → Babylon.js\n│   └── Rendering focused? → Three.js\n│\n└── Hybrid \u002F Canvas\n    └── Custom → Raw Canvas\u002FWebGL\n```\n\n### Comparison (2025)\n\n| Framework | Type | Best For |\n|-----------|------|----------|\n| **Phaser 4** | 2D | Full game features |\n| **PixiJS 8** | 2D | Rendering, UI |\n| **Three.js** | 3D | Visualizations, lightweight |\n| **Babylon.js 7** | 3D | Full engine, XR |\n\n---\n\n## 2. WebGPU Adoption\n\n### Browser Support (2025)\n\n| Browser | Support |\n|---------|---------|\n| Chrome | ✅ Since v113 |\n| Edge | ✅ Since v113 |\n| Firefox | ✅ Since v131 |\n| Safari | ✅ Since 18.0 |\n| **Total** | **~73%** global |\n\n### Decision\n\n- **New projects**: Use WebGPU with WebGL fallback\n- **Legacy support**: Start with WebGL\n- **Feature detection**: Check `navigator.gpu`\n\n---\n\n## 3. Performance Principles\n\n### Browser Constraints\n\n| Constraint | Strategy |\n|------------|----------|\n| No local file access | Asset bundling, CDN |\n| Tab throttling | Pause when hidden |\n| Mobile data limits | Compress assets |\n| Audio autoplay | Require user interaction |\n\n### Optimization Priority\n\n1. **Asset compression** - KTX2, Draco, WebP\n2. **Lazy loading** - Load on demand\n3. **Object pooling** - Avoid GC\n4. **Draw call batching** - Reduce state changes\n5. **Web Workers** - Offload heavy computation\n\n---\n\n## 4. Asset Strategy\n\n### Compression Formats\n\n| Type | Format |\n|------|--------|\n| Textures | KTX2 + Basis Universal |\n| Audio | WebM\u002FOpus (fallback: MP3) |\n| 3D Models | glTF + Draco\u002FMeshopt |\n\n### Loading Strategy\n\n| Phase | Load |\n|-------|------|\n| Startup | Core assets, \u003C2MB |\n| Gameplay | Stream on demand |\n| Background | Prefetch next level |\n\n---\n\n## 5. PWA for Games\n\n### Benefits\n\n- Offline play\n- Install to home screen\n- Full screen mode\n- Push notifications\n\n### Requirements\n\n- Service worker for caching\n- Web app manifest\n- HTTPS\n\n---\n\n## 6. Audio Handling\n\n### Browser Requirements\n\n- Audio context requires user interaction\n- Create AudioContext on first click\u002Ftap\n- Resume context if suspended\n\n### Best Practices\n\n- Use Web Audio API\n- Pool audio sources\n- Preload common sounds\n- Compress with WebM\u002FOpus\n\n---\n\n## 7. Anti-Patterns\n\n| ❌ Don't | ✅ Do |\n|----------|-------|\n| Load all assets upfront | Progressive loading |\n| Ignore tab visibility | Pause when hidden |\n| Block on audio load | Lazy load audio |\n| Skip compression | Compress everything |\n| Assume fast connection | Handle slow networks |\n\n---\n\n> **Remember:** Browser is the most accessible platform. Respect its constraints.\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n",{"name":5,"risk":25,"source":28,"date_added":43,"description":7},"2026-02-27","main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fcursor\u002Fgame-development\u002Fweb-games","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill web-games",{"tool":56,"command":57},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill web-games",{"tool":59,"command":60},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill web-games","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fgame-development\u002Fweb-games\u002FSKILL.md",true,[],[65,88,114,124,137,156],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":76,"publishedAt":38},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[71],{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000037","律师与法务","PROFESSION","适用职业",[77,78,79,80,81,82,83,84,21,85,86,87],"wechat search","wechat","search","capabilities","openclaw","design","web search","compliance","official","fetch","with",{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":38},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[95,96,97,98,99,100,79,101,102,103,104,105,106,107,108,109,110,111,112,113],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","when","brew","live","data","google","install","read","across","api",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":38},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[121,122,95,106,107,108,109,99,79,111,123,112,113,105,103,102,101,110,100,98],"trend radar","radar","pulse",{"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":130,"publishedAt":38},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[131,132,133,134,135,136],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":138,"name":139,"nameZh":6,"description":140,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":141,"categories":142,"keywords":148,"publishedAt":38},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[143],{"categoryNo":144,"categoryName":145,"taxonomyType":146,"taxonomyTypeDesc":147},"01JBSEEDCAT000000000000021","资料检索与研究","SCENARIO","使用场景",[139,21,149,150,151,87,106,152,153,154,97,155,110],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":157,"name":158,"nameZh":6,"description":159,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":160,"categories":161,"keywords":162,"publishedAt":38},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[158,163,164,165,110,166,153,167,168,169,170,171],"status","play","go","latest","github","discover","control","cmd","volume"]