[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EFVCG5HZRTZF5V7XW2Y8DD":3,"skill-same:01M6EFVCG5HZRTZF5V7XW2Y8DD":63},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6EFVCG5HZRTZF5V7XW2Y8DD","pixijs",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fpixijs\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# PixiJS — High-Performance 2D WebGL Renderer\n\nYou are an expert in PixiJS, the fastest 2D rendering engine for the web. You help developers build games, interactive visualizations, animated ads, creative coding projects, and rich UI effects using PixiJS's WebGL-first renderer with automatic Canvas fallback — handling sprites, text, filters, masks, blend modes, and custom shaders at 60fps with hundreds of thousands of objects.\n\n## Core Capabilities\n\n### Application Setup\n\n```typescript\n\u002F\u002F src\u002Fmain.ts — PixiJS 8 application\nimport { Application, Sprite, Text, Container, Assets } from \"pixi.js\";\n\nconst app = new Application();\nawait app.init({\n  width: 800,\n  height: 600,\n  backgroundColor: 0x1a1a2e,\n  antialias: false,                       \u002F\u002F Crisp pixel art\n  resolution: window.devicePixelRatio,    \u002F\u002F Retina support\n});\ndocument.body.appendChild(app.canvas);\n\n\u002F\u002F Load assets\nawait Assets.load([\n  { alias: \"hero\", src: \"\u002Fsprites\u002Fhero.png\" },\n  { alias: \"tileset\", src: \"\u002Fsprites\u002Ftileset.png\" },\n  { alias: \"particle\", src: \"\u002Fsprites\u002Fparticle.png\" },\n]);\n\n\u002F\u002F Create sprite\nconst hero = Sprite.from(\"hero\");\nhero.anchor.set(0.5);                    \u002F\u002F Center anchor for rotation\nhero.position.set(400, 300);\napp.stage.addChild(hero);\n\n\u002F\u002F Game loop\napp.ticker.add((ticker) => {\n  hero.rotation += 0.01 * ticker.deltaTime;\n});\n```\n\n### Containers and Scene Graph\n\n```typescript\n\u002F\u002F Hierarchical scene graph\nconst world = new Container();\nconst uiLayer = new Container();\nconst particleLayer = new Container();\n\napp.stage.addChild(world);\napp.stage.addChild(particleLayer);\napp.stage.addChild(uiLayer);            \u002F\u002F UI always on top\n\n\u002F\u002F Sort children by Y position (depth sorting for top-down games)\nworld.sortableChildren = true;\nentities.forEach((entity) => {\n  entity.zIndex = entity.y;\n});\n```\n\n### Filters and Shaders\n\n```typescript\nimport { BlurFilter, ColorMatrixFilter, DisplacementFilter } from \"pixi.js\";\n\n\u002F\u002F Built-in filters\nconst blur = new BlurFilter({ strength: 4 });\nconst grayscale = new ColorMatrixFilter();\ngrayscale.desaturate();\n\nbackground.filters = [blur];              \u002F\u002F Depth-of-field effect\ndeadEnemy.filters = [grayscale];          \u002F\u002F Desaturate on death\n\n\u002F\u002F Displacement map for water\u002Fheat effects\nconst displacementSprite = Sprite.from(\"displacement-map\");\ndisplacementSprite.texture.source.addressMode = \"repeat\";\nconst displacement = new DisplacementFilter({\n  sprite: displacementSprite,\n  scale: 20,\n});\nwaterLayer.filters = [displacement];\n\n\u002F\u002F Animate displacement for flowing water\napp.ticker.add((ticker) => {\n  displacementSprite.x += 0.5 * ticker.deltaTime;\n  displacementSprite.y += 0.3 * ticker.deltaTime;\n});\n```\n\n### Spritesheet Animation\n\n```typescript\nimport { AnimatedSprite, Spritesheet, Assets } from \"pixi.js\";\n\n\u002F\u002F Load spritesheet\nconst sheet = await Assets.load(\"\u002Fsprites\u002Fhero.json\");\n\n\u002F\u002F Create animated sprite\nconst heroAnim = new AnimatedSprite(sheet.animations[\"walk\"]);\nheroAnim.animationSpeed = 0.15;\nheroAnim.play();\napp.stage.addChild(heroAnim);\n\n\u002F\u002F Switch animations\nfunction setAnimation(name: string) {\n  heroAnim.textures = sheet.animations[name];\n  heroAnim.play();\n}\n\u002F\u002F setAnimation(\"idle\"), setAnimation(\"attack\"), setAnimation(\"die\")\n```\n\n### Text and Graphics\n\n```typescript\nimport { Text, TextStyle, Graphics } from \"pixi.js\";\n\n\u002F\u002F Styled text\nconst style = new TextStyle({\n  fontFamily: \"Press Start 2P\",          \u002F\u002F Pixel font\n  fontSize: 24,\n  fill: [\"#ffffff\", \"#00ff88\"],          \u002F\u002F Gradient fill\n  stroke: { color: \"#000000\", width: 4 },\n  dropShadow: { color: \"#000000\", distance: 2 },\n});\nconst scoreText = new Text({ text: \"Score: 0\", style });\n\n\u002F\u002F Procedural graphics\nconst healthBar = new Graphics();\nhealthBar.rect(0, 0, 200, 20).fill(0x333333);  \u002F\u002F Background\nhealthBar.rect(2, 2, 196 * hp, 16).fill(0x00ff00);  \u002F\u002F Fill\n\n\u002F\u002F Minimap\nconst minimap = new Graphics();\nminimap.circle(playerX \u002F 10, playerY \u002F 10, 3).fill(0x00ff00);\nrooms.forEach(r => minimap.rect(r.x \u002F 10, r.y \u002F 10, r.w \u002F 10, r.h \u002F 10).stroke(0x666666));\n```\n\n## Installation\n\n```bash\nnpm install pixi.js\n# PixiJS 8 (latest): WebGPU + WebGL, tree-shakeable\n```\n\n## Best Practices\n\n1. **Use containers for layers** — Separate world, UI, particles, debug into containers; set `sortableChildren` for depth sorting\n2. **Sprite batching** — Sprites using the same texture atlas are batched automatically; keep atlases under 4096×4096\n3. **Object pooling** — Pre-create sprites and reuse them; PixiJS allocation is fast but GC pauses are not\n4. **ParticleContainer** — Use `ParticleContainer` for thousands of simple sprites (no filters, no children); 10x faster than Container\n5. **Filters sparingly** — Each filter triggers a render texture pass; use 1-2 filters on large containers, not per-sprite\n6. **Asset loading** — Use `Assets.load` with aliases; supports spritesheets, bitmap fonts, JSON, and audio\n7. **Resolution** — Set `resolution: devicePixelRatio` for sharp rendering on retina screens\n8. **Destroy properly** — Call `sprite.destroy(true)` to free GPU texture; prevents memory leaks in long-running apps\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fpixijs",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill pixijs",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill pixijs",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill pixijs","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fpixijs\u002FSKILL.md",true,[45,51,57],{"path":46,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":49,"sourceHtmlUrl":50},"customize.toml","OTHER","其他",1724,"https:\u002F\u002Fgithub.com\u002FdevelopAgent\u002Fbmad-start\u002Fblob\u002Fmain\u002F.qwen\u002Fskills\u002Fbmad-cis-innovation-strategy\u002Fcustomize.toml",{"path":52,"resourceType":53,"resourceTypeDesc":54,"sizeBytes":55,"sourceHtmlUrl":56},"innovation-frameworks.csv","ASSET","资产文件",8453,"https:\u002F\u002Fgithub.com\u002FdevelopAgent\u002Fbmad-start\u002Fblob\u002Fmain\u002F.qwen\u002Fskills\u002Fbmad-cis-innovation-strategy\u002Finnovation-frameworks.csv",{"path":58,"resourceType":59,"resourceTypeDesc":60,"sizeBytes":61,"sourceHtmlUrl":62},"template.md","REFERENCE","参考文档",2374,"https:\u002F\u002Fgithub.com\u002FdevelopAgent\u002Fbmad-start\u002Fblob\u002Fmain\u002F.qwen\u002Fskills\u002Fbmad-cis-innovation-strategy\u002Ftemplate.md",[64,78,88,97,103,110],{"skillNo":65,"name":66,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":67,"categories":68,"keywords":74,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[69],{"categoryNo":70,"categoryName":71,"taxonomyType":72,"taxonomyTypeDesc":73},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[75,76,77],"model","model hierarchy","model hierarchy skill",{"skillNo":79,"name":80,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":84,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[83],{"categoryNo":70,"categoryName":71,"taxonomyType":72,"taxonomyTypeDesc":73},[85,86,87],"MCP","zoom","zoom mcp",{"skillNo":89,"name":90,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[94,95,96,86],"sdk","zoom apps sdk","apps",{"skillNo":98,"name":99,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":102,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[99],{"skillNo":104,"name":105,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":109,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[108],{"categoryNo":70,"categoryName":71,"taxonomyType":72,"taxonomyTypeDesc":73},[105],{"skillNo":111,"name":112,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[112]]