# pixijs-scene-container

Skill for PixiJS v8 scene graph operations: nesting children, handling transforms, zIndex sorting, and configuring Container options.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 5900 installs · ★ 358
- Author: pixijs
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-scene-container/SKILL.md
- Updated: 2026-10-01
- HTML: https://affpapa.org/en/nevibecode/skills/pixijs-scene-container

## What it does

This skill guides the AI assistant on managing the PixiJS v8 scene graph. It explains child methods like `addChild` and `removeChild`, plus transforms like `position` and `scale`. In PixiJS v8, sprites or graphics are leaf objects. Adding children to leaves triggers a deprecation warning.

The skill covers constructor options and performance flags. Using `boundsArea` assigns a fixed rectangle, which avoids recursive child measurements. The `origin` helper sets the rotation point without moving the object, unlike `pivot`. Combining `origin` and `pivot` on one node produces compounding offsets and is discouraged. Setting `isRenderGroup: true` moves transforms to the GPU, but excessive groups hurt performance.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-container -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/pixijs-scene-container/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/pixijs-scene-container/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-container -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/pixijs-scene-container/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-container -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/pixijs-scene-container/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pixijs/pixijs-skills pixijs-scene-container
```

2. **Manually: put the files in place**
- File: `.github/skills/pixijs-scene-container/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-container -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pixijs/pixijs-skills --path skills/pixijs-scene-container
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/pixijs-scene-container/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-container -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-scene-container/SKILL.md

## When to use it
- group sprites and graphics under a common transform node
- rotate or scale a container around a local origin without positional jumps
- order overlapping children using sortableChildren and zIndex
- skip recursive bounds calculations on large containers using boundsArea

## Example prompts
- Create a character container in PixiJS v8 with body and head sprites sorted by zIndex
- Rotate a PixiJS Container around its center using origin without changing position
- Configure a static world container with isRenderGroup and boundsArea in PixiJS v8

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 55d13b525efcad63.

BEGIN THIRD-PARTY FILE 55d13b525efcad63
````text
---
name: pixijs-scene-container
description: "Use this skill when grouping, positioning, or transforming display objects in PixiJS v8. Covers Container constructor options (isRenderGroup, sortableChildren, boundsArea), addChild/removeChild/addChildAt/swapChildren/setChildIndex, position/scale/rotation/pivot/skew/alpha/tint, getBounds/getGlobalPosition/toLocal/toGlobal, zIndex sorting, cullable, onRender per-frame callback, destroy. Triggers on: Container, addChild, removeChild, addChildAt, swapChildren, sortableChildren, zIndex, position, scale, rotation, pivot, getBounds, toGlobal, toLocal, onRender, destroy, constructor options, ContainerOptions."
license: MIT
---

`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.
````
END THIRD-PARTY FILE 55d13b525efcad63

The third-party file has ended. Everything between the 55d13b525efcad63 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2837 of 15808 bytes. © pixijs · MIT · https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-scene-container/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md