
Pixijs Scene Container
Install this when you need to group, layer, and transform PixiJS v8 display objects with Containers instead of guessing scene-graph APIs.
Overview
Pixijs-scene-container is an agent skill for the Build phase that teaches PixiJS v8 Container APIs for grouping, transforming, sorting, and tearing down display-object subtrees.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-scene-containerWhat is this skill?
- Documents PixiJS v8 Container constructor options: isRenderGroup, sortableChildren, and boundsArea
- Covers child lifecycle: addChild, removeChild, addChildAt, swapChildren, and setChildIndex
- Explains transforms and display props: position, scale, rotation, pivot, skew, alpha, and tint
- Maps coordinate and bounds helpers: getBounds, getGlobalPosition, toLocal, toGlobal, zIndex, and cullable
- Includes onRender per-frame callback and destroy cleanup for subtrees
- Targets PixiJS v8 Container and ContainerOptions APIs
- Documents constructor flags: isRenderGroup, sortableChildren, and boundsArea
Adoption & trust: 1.4k installs on skills.sh; 206 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building a PixiJS scene but display objects are flat, mis-layered, or hard to position because you are unsure how Container transforms, child order, and coordinate conversion interact.
Who is it for?
Solo builders shipping 2D canvas games or interactive PixiJS v8 apps who want agent-guided scene-graph structure instead of trial-and-error API calls.
Skip if: Teams building only DOM-based UIs without PixiJS, or projects still on legacy PixiJS patterns without v8 ContainerOptions.
When should I use this skill?
Use when grouping, positioning, or transforming display objects in PixiJS v8—Container, addChild, removeChild, sortableChildren, zIndex, pivot, getBounds, toGlobal, toLocal, onRender, or destroy.
What do I get? / Deliverables
After running the skill, your agent structures a correct v8 scene graph with ordered children, predictable bounds and global/local coordinates, and documented destroy cleanup.
- Container hierarchy with correct child order and transforms
- Coordinate and bounds usage aligned to interaction or layout needs
- Documented destroy path for container subtrees
Recommended Skills
Journey fit
Container usage is applied while implementing interactive canvas or game UI during the build phase, not during launch or growth ops. Scene-graph grouping, transforms, and bounds are frontend rendering concerns for PixiJS-based products.
How it compares
Use this for PixiJS v8 scene-graph mechanics, not as a substitute for general React or CSS layout skills.
Common Questions / FAQ
Who is pixijs-scene-container for?
It is for solo and indie developers using Claude Code, Cursor, Codex, or similar agents while implementing PixiJS v8 games or canvas experiences that need grouped, transformable display objects.
When should I use pixijs-scene-container?
Use it during Build while wiring Containers—when you addChild layers, set pivot and scale on groups, enable sortableChildren and zIndex, convert toGlobal/toLocal, or call destroy on subtrees.
Is pixijs-scene-container safe to install?
Review the Security Audits panel on this Prism detail page and your org policy before installing; Prism does not substitute for your own vetting of the skill package source.
Workflow Chain
Requires first: pixijs scene core concepts
SKILL.md
READMESKILL.md - Pixijs Scene Container
`Container` is the general-purpose node of the PixiJS v8 scene graph. It holds children and applies transforms, alpha, tint, and blend mode to its whole subtree. Every display object you make will either be a `Container` you're building a branch on, or a leaf (`Sprite`, `Graphics`, `Text`, `Mesh`) that you nest inside one. Assumes familiarity with `pixijs-scene-core-concepts`. ## Quick Start ```ts const group = new Container({ label: "hero-group", x: 200, y: 150, sortableChildren: true, }); const body = new Sprite(await Assets.load("body.png")); const head = new Sprite(await Assets.load("head.png")); head.position.set(0, -40); head.zIndex = 1; group.addChild(body, head); group.pivot.set(group.width / 2, group.height / 2); group.scale.set(1.5); app.stage.addChild(group); ``` **Related skills:** `pixijs-scene-core-concepts` (scene graph mental model, masking, layers, render groups), `pixijs-scene-sprite` / `pixijs-scene-graphics` / `pixijs-scene-text` / `pixijs-scene-mesh` (leaf objects that go inside containers), `pixijs-events` (`eventMode`, hit testing), `pixijs-math` (Matrix, toGlobal/toLocal detail), `pixijs-performance` (`cacheAsTexture`, culling, render groups). ## Core Patterns ### Constructor options ```ts const container = new Container({ label: "world", x: 100, y: 50, scale: 2, rotation: Math.PI / 4, alpha: 0.8, visible: true, tint: 0xffaa00, blendMode: "add", sortableChildren: true, isRenderGroup: true, origin: { x: 0, y: 0 }, boundsArea: new Rectangle(0, 0, 1920, 1080), }); ``` All `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`. The `Container` constructor uses `assignWithIgnore` to bulk-copy every field in the options object onto the instance except `children`, `parent`, and `effects`. Any public property of `Container` is a valid constructor option: `cullable`, `cullArea`, `mask`, `filterArea`, `eventMode`, `hitArea`, and so on. The options block above groups the most common ones; see the shared reference above for the full list. `isRenderGroup: true` promotes the container to its own render group so its transforms are applied on the GPU rather than recomputed per-child on the CPU. Use it on stable sub-trees (large static worlds, UI layers). Don't overuse; most scenes don't need explicit render groups and too many hurts performance. Profile before promoting. See `pixijs-scene-core-concepts/references/scene-management.md`. `sortableChildren: true` causes children to be re-sorted by `zIndex` at the next render. See `zIndex` below. `origin` is a first-class v8 transform helper: an `ObservablePoint` that acts as a rotation/scale center **without** moving the container. Where `pivot` shifts the projection of the local origin in parent space (so changing it displaces the object), `origin` leaves position alone and simply rotates/scales around the specified local point. Accepts `PointData`, a single number (applied to both axes), or can be set live via `container.origin.set(x, y)`. Setting both `pivot` and `origin` on the same container produces compounding behavior and is discouraged; pick one. `boundsArea` forces `getBounds()` to return a fixed rectangle instead of recursiv