[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7CSZHV7P2AB20QM5BWR1C9V":3,"skill-same:01M7CSZHV7P2AB20QM5BWR1C9V":46},{"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":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":6,"ownerDescription":30,"updatedAt":31,"install":32,"resources":45},"01M7CSZHV7P2AB20QM5BWR1C9V","pixijs-scene-sprite",null,"Use this skill when drawing images in PixiJS v8. Covers Sprite with anchor\u002Ftint\u002Ftexture, AnimatedSprite for frame animation, NineSliceSprite for resizable UI panels, TilingSprite for scrolling\u002Frepeating backgrounds. Triggers on: Sprite, AnimatedSprite, NineSliceSprite, TilingSprite, Sprite.from, anchor, tint, tilePosition, animationSpeed, gotoAndPlay, leftWidth, topHeight, constructor options, SpriteOptions, AnimatedSpriteOptions, NineSliceSpriteOptions, TilingSpriteOptions.","om-scogo\u002Fskillsh-scraper","om-scogo","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F160466840?v=4","01M79AWB6DFVCQ7RK70CS34B96","Om Achrekar","01M79AWB6ZM9SKR8KDH1WSSM22",0,"MIT","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fpixijs-pixijs-skills\u002Fpixijs-scene-sprite\u002Fskills\u002Fpixijs-scene-sprite\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: pixijs-scene-sprite\ndescription: \"Use this skill when drawing images in PixiJS v8. Covers Sprite with anchor\u002Ftint\u002Ftexture, AnimatedSprite for frame animation, NineSliceSprite for resizable UI panels, TilingSprite for scrolling\u002Frepeating backgrounds. Triggers on: Sprite, AnimatedSprite, NineSliceSprite, TilingSprite, Sprite.from, anchor, tint, tilePosition, animationSpeed, gotoAndPlay, leftWidth, topHeight, constructor options, SpriteOptions, AnimatedSpriteOptions, NineSliceSpriteOptions, TilingSpriteOptions.\"\nlicense: MIT\n---\n\nPixiJS has three sprite classes for different drawing tasks. `Sprite` is the default image-drawing leaf; `NineSliceSprite` is a resizable UI-panel variant that preserves corner art; `TilingSprite` repeats a texture across an area. The `AnimatedSprite` subclass of `Sprite` cycles through texture frames for frame-based animation.\n\nAssumes familiarity with `pixijs-scene-core-concepts`. All sprite classes are leaf nodes; they cannot have children. Wrap multiple sprites in a `Container` to group them.\n\n## Quick Start\n\n```ts\nconst texture = await Assets.load(\"bunny.png\");\n\nconst sprite = new Sprite({\n  texture,\n  anchor: 0.5,\n  tint: 0xff8888,\n});\nsprite.x = app.screen.width \u002F 2;\nsprite.y = app.screen.height \u002F 2;\n\napp.stage.addChild(sprite);\n```\n\nPosition is set after construction because `app.screen.width \u002F 2` depends on the live renderer size. Literal positions can go directly in the options object via `x`\u002F`y` (inherited from `Container`).\n\n**Related skills:** `pixijs-scene-core-concepts` (leaves, transforms), `pixijs-assets` (texture loading), `pixijs-scene-particle-container` (thousands of sprites), `pixijs-performance` (spritesheets, batching).\n\n## Variants\n\n| Variant           | Use when                                                  | Trade-offs                                      | Reference                                                        |\n| ----------------- | --------------------------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------------- |\n| `Sprite`          | Draw a single texture at a position                       | Fixed size = texture size                       | [references\u002Fsprite.md](references\u002Fsprite.md)                     |\n| `AnimatedSprite`  | Frame-based animation from a texture array or spritesheet | Pre-rendered frames only; no tweening           | [references\u002Fanimated-sprite.md](references\u002Fanimated-sprite.md)   |\n| `NineSliceSprite` | Resizable UI panels, buttons, dialog frames               | Border width is fixed; center stretches         | [references\u002Fnineslice-sprite.md](references\u002Fnineslice-sprite.md) |\n| `TilingSprite`    | Scrolling backgrounds, parallax, repeating patterns       | Single texture repeated; `tilePosition` scrolls | [references\u002Ftiling-sprite.md](references\u002Ftiling-sprite.md)       |\n\n`AnimatedSprite` is a subclass of `Sprite`; all `Sprite` properties (anchor, tint, position) apply.\n\nEach variant's constructor options are documented in its sub-reference file (`references\u002F{variant}.md`). All variants also accept the `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) — see `skills\u002Fpixijs-scene-core-concepts\u002Freferences\u002Fconstructor-options.md`.\n\n## When to use what\n\n- **\"I want to draw a single image at a position\"** → `Sprite`. The default choice for 90% of 2D game and app content.\n- **\"I want to animate a character through a series of frames\"** → `AnimatedSprite`. Load a spritesheet via Assets and pass `sheet.animations['walk']`. See `references\u002Fanimated-sprite.md`.\n- **\"I want a UI button\u002Fpanel that resizes without stretching the borders\"** → `NineSliceSprite`. Set border widths, then set `width`\u002F`height`. See `references\u002Fnineslice-sprite.md`.\n- **\"I want a scrolling repeating background\"** → `TilingSprite`. Animate `tilePosition` to scroll. See `references\u002Ftiling-sprite.md`.\n- **\"I want thousands of identical sprites\"** → Use `ParticleContainer` with `Particle` instances (see `pixijs-scene-particle-container`), not plain sprites.\n- **\"I want to draw shapes or paths\"** → Use `Graphics` (see `pixijs-scene-graphics`), not a sprite.\n\n## Quick concepts\n\n### Anchor vs pivot\n\n`Sprite.anchor` is normalized `[0, 1]` and shifts only the texture draw origin; no position offset. `Container.pivot` is pixel-space and shifts both the transform origin and the visual position. For centering a sprite, always use `anchor.set(0.5)`.\n\n### Loading before creating\n\n`Sprite.from(id)` only reads the Assets cache; it does not fetch. Always `await Assets.load(...)` first, or pass the returned `Texture` directly to `new Sprite(texture)`.\n\n### Dynamic textures\n\nOnce a texture is loaded, modifying its `frame` or swapping its source does not automatically notify sprites. Set `texture.dynamic = true` once, or call `sprite['onViewUpdate']()` manually after changes.\n\n## Common Mistakes\n\n### [HIGH] Using `Texture.from(url)` to load\n\nWrong:\n\n```ts\nconst texture = Texture.from(\"https:\u002F\u002Fexample.com\u002Fimage.png\");\n```\n\nCorrect:\n\n```ts\nconst texture = await Assets.load(\"https:\u002F\u002Fexample.com\u002Fimage.png\");\n```\n\n`Texture.from()` only reads the cache in v8. Use `Assets.load()` first; its return value is the texture.\n\n\n### [HIGH] Confusing anchor and pivot\n\nWrong:\n\n```ts\nsprite.pivot.set(sprite.width \u002F 2, sprite.height \u002F 2);\n```\n\nCorrect:\n\n```ts\nsprite.anchor.set(0.5);\n```\n\n`anchor` shifts only the draw origin. `pivot` shifts the transform origin AND the visual position, causing the sprite to move unexpectedly.\n\n\n### [HIGH] Old `NineSlicePlane` name\n\n`NineSlicePlane` was renamed to `NineSliceSprite` in v8 and switched to an options-object constructor: `new NineSliceSprite({ texture, leftWidth, topHeight, rightWidth, bottomHeight })`.\n\n\n### [MEDIUM] Adding children to a sprite\n\n`Sprite`, `NineSliceSprite`, and `TilingSprite` all set `allowChildren = false`. Wrap in a `Container` to group sprites with other content.\n\n\n## API Reference\n\n- [Sprite](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.Sprite.html.md)\n- [SpriteOptions](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.SpriteOptions.html.md)\n- [AnimatedSprite](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.AnimatedSprite.html.md)\n- [NineSliceSprite](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.NineSliceSprite.html.md)\n- [TilingSprite](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.TilingSprite.html.md)\n- [Texture](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Frendering.Texture.html.md)\n","PixiJS has three sprite classes for different drawing tasks. `Sprite` is the default image-drawing leaf; `NineSliceSprite` is a resizable UI-panel variant that preserves corner art; `TilingSprite` repeats a texture across an area. The `AnimatedSprite` subclass of `Sprite` cycles through texture frames for frame-based animation.\n\nAssumes familiarity with `pixijs-scene-core-concepts`. All sprite classes are leaf nodes; they cannot have children. Wrap multiple sprites in a `Container` to group them.\n\n## Quick Start\n\n```ts\nconst texture = await Assets.load(\"bunny.png\");\n\nconst sprite = new Sprite({\n  texture,\n  anchor: 0.5,\n  tint: 0xff8888,\n});\nsprite.x = app.screen.width \u002F 2;\nsprite.y = app.screen.height \u002F 2;\n\napp.stage.addChild(sprite);\n```\n\nPosition is set after construction because `app.screen.width \u002F 2` depends on the live renderer size. Literal positions can go directly in the options object via `x`\u002F`y` (inherited from `Container`).\n\n**Related skills:** `pixijs-scene-core-concepts` (leaves, transforms), `pixijs-assets` (texture loading), `pixijs-scene-particle-container` (thousands of sprites), `pixijs-performance` (spritesheets, batching).\n\n## Variants\n\n| Variant           | Use when                                                  | Trade-offs                                      | Reference                                                        |\n| ----------------- | --------------------------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------------- |\n| `Sprite`          | Draw a single texture at a position                       | Fixed size = texture size                       | [references\u002Fsprite.md](references\u002Fsprite.md)                     |\n| `AnimatedSprite`  | Frame-based animation from a texture array or spritesheet | Pre-rendered frames only; no tweening           | [references\u002Fanimated-sprite.md](references\u002Fanimated-sprite.md)   |\n| `NineSliceSprite` | Resizable UI panels, buttons, dialog frames               | Border width is fixed; center stretches         | [references\u002Fnineslice-sprite.md](references\u002Fnineslice-sprite.md) |\n| `TilingSprite`    | Scrolling backgrounds, parallax, repeating patterns       | Single texture repeated; `tilePosition` scrolls | [references\u002Ftiling-sprite.md](references\u002Ftiling-sprite.md)       |\n\n`AnimatedSprite` is a subclass of `Sprite`; all `Sprite` properties (anchor, tint, position) apply.\n\nEach variant's constructor options are documented in its sub-reference file (`references\u002F{variant}.md`). All variants also accept the `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) — see `skills\u002Fpixijs-scene-core-concepts\u002Freferences\u002Fconstructor-options.md`.\n\n## When to use what\n\n- **\"I want to draw a single image at a position\"** → `Sprite`. The default choice for 90% of 2D game and app content.\n- **\"I want to animate a character through a series of frames\"** → `AnimatedSprite`. Load a spritesheet via Assets and pass `sheet.animations['walk']`. See `references\u002Fanimated-sprite.md`.\n- **\"I want a UI button\u002Fpanel that resizes without stretching the borders\"** → `NineSliceSprite`. Set border widths, then set `width`\u002F`height`. See `references\u002Fnineslice-sprite.md`.\n- **\"I want a scrolling repeating background\"** → `TilingSprite`. Animate `tilePosition` to scroll. See `references\u002Ftiling-sprite.md`.\n- **\"I want thousands of identical sprites\"** → Use `ParticleContainer` with `Particle` instances (see `pixijs-scene-particle-container`), not plain sprites.\n- **\"I want to draw shapes or paths\"** → Use `Graphics` (see `pixijs-scene-graphics`), not a sprite.\n\n## Quick concepts\n\n### Anchor vs pivot\n\n`Sprite.anchor` is normalized `[0, 1]` and shifts only the texture draw origin; no position offset. `Container.pivot` is pixel-space and shifts both the transform origin and the visual position. For centering a sprite, always use `anchor.set(0.5)`.\n\n### Loading before creating\n\n`Sprite.from(id)` only reads the Assets cache; it does not fetch. Always `await Assets.load(...)` first, or pass the returned `Texture` directly to `new Sprite(texture)`.\n\n### Dynamic textures\n\nOnce a texture is loaded, modifying its `frame` or swapping its source does not automatically notify sprites. Set `texture.dynamic = true` once, or call `sprite['onViewUpdate']()` manually after changes.\n\n## Common Mistakes\n\n### [HIGH] Using `Texture.from(url)` to load\n\nWrong:\n\n```ts\nconst texture = Texture.from(\"https:\u002F\u002Fexample.com\u002Fimage.png\");\n```\n\nCorrect:\n\n```ts\nconst texture = await Assets.load(\"https:\u002F\u002Fexample.com\u002Fimage.png\");\n```\n\n`Texture.from()` only reads the cache in v8. Use `Assets.load()` first; its return value is the texture.\n\n\n### [HIGH] Confusing anchor and pivot\n\nWrong:\n\n```ts\nsprite.pivot.set(sprite.width \u002F 2, sprite.height \u002F 2);\n```\n\nCorrect:\n\n```ts\nsprite.anchor.set(0.5);\n```\n\n`anchor` shifts only the draw origin. `pivot` shifts the transform origin AND the visual position, causing the sprite to move unexpectedly.\n\n\n### [HIGH] Old `NineSlicePlane` name\n\n`NineSlicePlane` was renamed to `NineSliceSprite` in v8 and switched to an options-object constructor: `new NineSliceSprite({ texture, leftWidth, topHeight, rightWidth, bottomHeight })`.\n\n\n### [MEDIUM] Adding children to a sprite\n\n`Sprite`, `NineSliceSprite`, and `TilingSprite` all set `allowChildren = false`. Wrap in a `Container` to group sprites with other content.\n\n\n## API Reference\n\n- [Sprite](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.Sprite.html.md)\n- [SpriteOptions](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.SpriteOptions.html.md)\n- [AnimatedSprite](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.AnimatedSprite.html.md)\n- [NineSliceSprite](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.NineSliceSprite.html.md)\n- [TilingSprite](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.TilingSprite.html.md)\n- [Texture](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Frendering.Texture.html.md)\n",{"name":5,"license":15,"description":7},"main","8859218955d9504cd18b59e7892100718039d3b4","data\u002Fskills\u002Fpixijs-pixijs-skills\u002Fpixijs-scene-sprite\u002Fskills\u002Fpixijs-scene-sprite",1,"https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper","https:\u002F\u002Fgithub.com\u002Fom-scogo","SDE-1 @ Scogo ","2026-07-18 12:22:46",{"source":8,"skillName":5,"commands":33,"prompt":43,"zipAvailable":44},[34,37,40],{"tool":35,"command":36},"npx","npx skills add om-scogo\u002Fskillsh-scraper --skill pixijs-scene-sprite",{"tool":38,"command":39},"bunx","bunx skills add om-scogo\u002Fskillsh-scraper --skill pixijs-scene-sprite",{"tool":41,"command":42},"pnpm","pnpm dlx skills add om-scogo\u002Fskillsh-scraper --skill pixijs-scene-sprite","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fpixijs-pixijs-skills\u002Fpixijs-scene-sprite\u002Fskills\u002Fpixijs-scene-sprite\u002FSKILL.md",true,[],[47,54,59,66,71,78],{"skillNo":48,"name":49,"nameZh":6,"description":50,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":51,"categories":52,"keywords":53,"publishedAt":19},"01M7D6MC9FAAEV4CMNYX8W7JTG","arxiv-search","Search arXiv physics, math, and computer science preprints using natural language queries. Powered by Valyu semantic search.","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fyorkeccak-scientific-skills\u002Farxiv-search\u002Fskills\u002Farxiv-search\u002FSKILL.md",[],[],{"skillNo":55,"name":49,"nameZh":6,"description":50,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":56,"categories":57,"keywords":58,"publishedAt":19},"01M7D6M85CKKN87TA98VCQV4H7","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fyorkeccak-scientific-skills\u002Farxiv-search\u002FSkill.md",[],[],{"skillNo":60,"name":61,"nameZh":6,"description":62,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":65,"publishedAt":19},"01M7D4ZTCS4DR3CE4JY06X84T2","working-with-legacy-code","Safely change and test untested codebases using Feathers' \"Working Effectively with Legacy Code\". Use when the user mentions \"legacy code\", \"no tests\", \"untested codebase\", \"how do I test this\", \"seams\", \"characterization tests\", \"golden master\", \"sprout method\", \"afraid to change this code\", \"monster method\", \"dependency breaking\", or \"inherited a messy codebase\". Also trigger when changing code without tests safely, getting a class under test when constructors, statics, or singletons block it, adding features to tangled modules, or planning incremental test coverage for an old codebase. Covers the legacy-code change algorithm, seams, characterization tests, sprout\u002Fwrap, and dependency-breaking techniques. For refactoring code that already has tests, see refactoring-patterns. For day-to-day code quality, see clean-code.","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fworking-with-legacy-code\u002Fworking-with-legacy-code\u002FSKILL.md",[],[],{"skillNo":67,"name":61,"nameZh":6,"description":62,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":68,"categories":69,"keywords":70,"publishedAt":19},"01M7D4ZHZKJD2RSNGAF63V14P4","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fworking-with-legacy-code\u002FSkill.md",[],[],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":77,"publishedAt":19},"01M7D4ZB4CJBFW5JE67CPH2QRV","web-typography","Select, pair, and implement typefaces for web projects. Use when the user mentions \"font pairing\", \"which typeface\", \"line height\", \"responsive typography\", \"web font loading\", \"type hierarchy\", \"variable fonts\", \"FOUT\u002FFOIT\", \"typographic scale\", or \"the text is hard to read\". Also trigger when choosing between system fonts and web fonts, optimizing font-loading performance, or designing readable long-form content. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design.","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fweb-typography\u002Fweb-typography\u002FSKILL.md",[],[],{"skillNo":79,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":19},"01M7D4Z4MVYVY3NMJ18BNV6WNA","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fweb-typography\u002FSkill.md",[],[]]