New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Pixijs Rendering

by gamedev-skills in gamedev-skills/awesome-gamedev-agent-skills

Build a PixiJS v8 render layer: create the async Application, load textures with Assets, compose the scene graph with Container and Sprite, drive the ticker loop, wire pointer events, and group…

Apache-2.0Auto-check passedGame Development

Install Pixijs Rendering

skills CLI
$ npx skills add gamedev-skills/awesome-gamedev-agent-skills --skill pixijs-rendering -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install gamedev-skills/awesome-gamedev-agent-skills pixijs-rendering --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/gamedev-skills/awesome-gamedev-agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/web-engines/pixijs-rendering .claude/skills/pixijs-rendering && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
pixijs-rendering
GitHub stars
1.4k
Token cost
~2.3k tokens
SKILL.md length
715 words
Files
2 (incl. references)
Skills in repo
53
Repo updated
First seen
Licence
Apache-2.0

At a glance

Build a PixiJS v8 render layer: create the async Application, load textures with Assets, compose the scene graph with Container and Sprite, drive the ticker loop, wire pointer events, and group…

  • Works in 6 steps: Async Application boot (the v8 entry… → Containers for a relative-transform… → The ticker loop (frame-rate independent) → …
  • Debugging PixiJS v8 — when the user mentions PixiJS
  • SKILL.md covers When to use, Core workflow, Patterns and Pitfalls, plus 2 more sections
  • Reaches pixijs.com

What it does

Pixijs Rendering is an agent skill from gamedev-skills/awesome-gamedev-agent-skills. Build a PixiJS v8 render layer: create the async Application, load textures with Assets, compose the scene graph with Container and Sprite, drive the ticker loop, wire pointer events, and group draws with render groups. Use when building or debugging PixiJS v8 — when the user mentions PixiJS, Pixi, Application, app.stage, Container, Sprite, Assets.load, app.ticker, or eventMode. Pins the v8 async init() API.

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/assets-and-display.md`).

It sits in Game Development. The repository describes itself as: 74 game-dev skills for AI coding agents — Godot, Unity, Unreal, Phaser, PixiJS, three.js, Bevy, pygame, LÖVE, Roblox. Portable SKILL.md Agent Skills (the format Anthropic… The licence is Apache-2.0.

When your agent uses it

  • Debugging PixiJS v8 — when the user mentions PixiJS

Example prompts

  • “/pixijs-rendering”

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Async Application boot (the v8 entry point)
  2. Containers for a relative-transform scene graph
  3. The ticker loop (frame-rate independent)
  4. Pointer events (federated)
  5. Loading many assets by name (bundles)
  6. Render groups for large static layers

What it can do on your machine

Read from SKILL.md and the folder at commit 0a70cfc. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • pixijs.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Pixijs Rendering loads about 2.3k tokens when it runs, and up to ~3.7k if it reads all its reference files. Until then it costs about 107 tokens; SKILL.md has 715 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~107
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from gamedev-skills/awesome-gamedev-agent-skills at commit 0a70cfc, republished under its Apache-2.0 licence (© gamedev-skills). 715 words, ~2,311 tokens.

Download SKILL.mdSave it as .claude/skills/pixijs-rendering/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
pixijs-rendering
description
Build a PixiJS v8 render layer: create the async Application, load textures with Assets, compose the scene graph with Container and Sprite, drive the ticker loop, wire pointer events, and group draws with render groups. Use when building or debugging PixiJS v8 — when the user mentions PixiJS, Pixi, Application, app.stage, Container, Sprite, Assets.load, app.ticker, or eventMode. Pins the v8 async init() API.

PixiJS 8.21 Rendering

Set up and structure a PixiJS 8.21 application: the async Application, asset loading via Assets, the Container/Sprite scene graph, the ticker loop, pointer events, and render groups. Pins the 8.21 API (async init, unified Assets, eventMode).

When to use

  • Use when starting a PixiJS v8 project, fixing a blank canvas, structuring the display list, loading textures, animating via the ticker, or handling pointer input.
  • Use when package.json depends on pixi.js (v8) and code does import { Application } from 'pixi.js'.

When not to use: Phaser's scene/loader model → phaser-core. 3D scenes → threejs-scene-setup. PixiJS v7-and-earlier code (synchronous new Application({...}), Loader, beginFill/endFill) needs the v8 migration first; this skill targets v8 only. (interactive = true still works in v8 as an alias for eventMode = 'static', but prefer the explicit eventMode.)

Core workflow

  1. Create and await the Application. In v8, new Application() is empty; configuration happens in await app.init({...}). Append app.canvas (not app.view) to the DOM. Wrap top-level await in an async function for bundlers.
  2. Load assets with Assets. await Assets.load(url) returns a Texture. For many assets, register a manifest/bundle and load by name. There is no v7 Loader.
  3. Build the scene graph. Everything descends from app.stage (a Container). Group related objects in Containers; child transforms are relative to the parent. Draw order = insertion order (later = on top).
  4. Animate with the ticker. app.ticker.add((ticker) => {...}). Scale motion by ticker.deltaTime (frames, ~1 at 60fps) or ticker.deltaMS (milliseconds) so speed is frame-rate independent.
  5. Enable events per object by setting eventMode = 'static' (or 'dynamic'), then obj.on('pointerdown', ...). Federated pointer events cover mouse/touch/pen.
  6. Promote big static subtrees to render groups (isRenderGroup: true) so the GPU caches their transforms. Profile before and after; confirm pixels on screen.

Patterns

1. Async Application boot (the v8 entry point)
js
import { Application, Assets, Sprite } from 'pixi.js';

(async () => {
  // v8: construct empty, then await init(). Config does NOT go in the constructor.
  const app = new Application();
  await app.init({
    background: '#1099bb',
    resizeTo: window,        // track the window size
    antialias: true,
    // preference: 'webgpu',  // hint only; default order tries 'webgl' first.
    //                        // Pixi falls back if the backend is unavailable —
    //                        // branch on app.renderer.name, don't assume it took.
  });

  document.body.appendChild(app.canvas); // v8 uses app.canvas, not app.view

  const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
  const bunny = new Sprite(texture);
  bunny.anchor.set(0.5);
  bunny.position.set(app.screen.width / 2, app.screen.height / 2);
  app.stage.addChild(bunny);
})();
2. Containers for a relative-transform scene graph
js
import { Container, Sprite } from 'pixi.js';

const world = new Container();
app.stage.addChild(world);

// Children are positioned relative to `world`; move/scale/rotate the whole group
// by transforming the parent.
for (let i = 0; i < 10; i++) {
  const coin = new Sprite(coinTexture);
  coin.x = i * 40;
  world.addChild(coin);
}
world.position.set(100, 100);
world.scale.set(2);            // every coin scales with the container
3. The ticker loop (frame-rate independent)
js
let elapsed = 0;
app.ticker.add((ticker) => {
  // deltaTime ≈ 1 at 60fps; deltaMS is milliseconds since last frame.
  elapsed += ticker.deltaMS;
  bunny.rotation += 0.05 * ticker.deltaTime;          // smooth at any frame rate
  bunny.y = app.screen.height / 2 + Math.sin(elapsed / 500) * 50;
});
4. Pointer events (federated)
js
bunny.eventMode = 'static';   // 'static' = interactive, doesn't move on its own
bunny.cursor = 'pointer';     // hover cursor; `buttonMode` was removed in v8
bunny.on('pointerdown', (event) => {
  bunny.tint = 0xff0000;
  // event.global is the pointer position in stage space.
});
bunny.on('pointerover', () => bunny.scale.set(1.1));
bunny.on('pointerout',  () => bunny.scale.set(1.0));

Dragging needs globalpointermove, not pointermove. In v8 pointermove fires only while the pointer is over the object, so a drag that follows the cursor past the object's edge stops updating. globalpointermove fires on every move:

js
let dragging = false;
bunny.on('pointerdown', () => { dragging = true; });
bunny.on('pointerup', () => { dragging = false; });
bunny.on('pointerupoutside', () => { dragging = false; }); // release off the object
bunny.on('globalpointermove', (event) => {
  if (dragging) bunny.position.copyFrom(event.global);
});
5. Loading many assets by name (bundles)
js
import { Assets } from 'pixi.js';

await Assets.init({
  manifest: {
    bundles: [{
      name: 'level-1',
      assets: [
        { alias: 'hero',  src: 'assets/hero.png' },
        { alias: 'tiles', src: 'assets/tiles.png' },
      ],
    }],
  },
});

const bundle = await Assets.loadBundle('level-1'); // { hero: Texture, tiles: Texture }
const hero = new Sprite(bundle.hero);
6. Render groups for large static layers
js
// A big, rarely-changing background subtree: let the GPU cache its transforms.
const background = new Container({ isRenderGroup: true });
app.stage.addChild(background);
// Add hundreds of static tiles to `background`. Moving `background` itself stays
// cheap; constantly re-adding/removing children negates the benefit.
Show full SKILL.md (359 more words)Show less

Pitfalls

  • Blank canvas / "app.stage is undefined" → you didn't await app.init(), or you configured the constructor. In v8 the constructor is empty; all options go to init(). app.renderer/app.canvas/app.screen are undefined until the init() promise resolves.
  • app.view is undefined → v8 renamed it to app.canvas.
  • Porting v7 code → Loader/loader.add → Assets.load (the Loader class is gone); synchronous new Application({...}) → empty constructor + async init() (options in the constructor are ignored with a deprecation warning, not an error); beginFill()/endFill() → shape-first .rect(...).fill(...). interactive = true and app.view still work as deprecated aliases.
  • Ticker callback arg is the Ticker, not a delta number → app.ticker.add((dt) => { obj.rotation += dt; }) compiles, but dt is the whole Ticker object, so the math yields NaN and nothing animates. Read ticker.deltaTime off the argument.
  • Top-level await build error (Vite ≤6.0.6) → wrap boot in (async () => { ... })().
  • Speed varies with frame rate → multiply movement by ticker.deltaTime (~1 at 60fps) or scale by ticker.deltaMS; never assume 60fps. deltaTime is a dimensionless multiplier, not milliseconds.
  • Clicks do nothing → the object's eventMode is still 'passive' (the v8 default: self not interactive, children still are); set it to 'static' (or 'dynamic' for objects that move under a stationary cursor).
  • Drag stops at the object's edge → pointermove fires only while the pointer is over the object in v8; use globalpointermove for drag/global tracking.
  • Texture.from(url) returns a blank/undefined texture → in v8 it only reads the Assets cache; await Assets.load(url) first, then use the returned Texture.
  • WebGPU features error out → preference is a hint. If the backend is unavailable Pixi falls back (WebGL, then Canvas); branch on app.renderer.name before using backend-specific code.
  • Textures look blurry on pixel art → set texture.source.scaleMode = 'nearest' (or pass it when loading).
  • Memory grows → removeChild does not free GPU memory; call sprite.destroy() and Assets.unload(url) for assets you're done with.
  • Flicker/corruption after tearing down and re-creating an app in the same tab → destroy with app.destroy({ releaseGlobalResources: true }); otherwise pooled batches/textures from the old app leak into the new one.

References

  • For the texture/asset pipeline (sprite sheets/atlases, Assets.add, background loading, unloading) and Graphics/Text/TilingSprite/ParticleContainer plus filters, read references/assets-and-display.md.
  • phaser-core — a batteries-included 2D framework (scenes, physics, input).
  • threejs-scene-setup — 3D in the browser with three.js.
  • prototype-fast — greybox a playable slice quickly (often cites PixiJS).

© gamedev-skills, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in skills/web-engines/pixijs-rendering of gamedev-skills/awesome-gamedev-agent-skills.

  • SKILL.md
  • references/assets-and-display.md

Open the folder on GitHubat commit 0a70cfc

Compare with similar skills

Pixijs Rendering next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Pixijs Rendering compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Pixijs Rendering this skillgamedev-skills/awesome-gamedev-agent-skills1.4k—~2.3kAutomated safety check: PassApache-2.0
Dev StoryDonchitos/Claude-Code-Game-Studios26k—~2.4kAutomated safety check: NotesMIT
Blockbench Pluginsjasonjgardner/blockbench-mcp-plugin500—~2.8kAutomated safety check: PassGPL-3.0
Portal Connectgosuda/portal-tunnel308—~2.9kAutomated safety check: PassMIT
Aibridge Development WorkflowFlameskyDexive/Legends-Of-Heroes928—~790Automated safety check: PassMIT
Designvladikk/modularity555—~3.8kAutomated safety check: PassCustom licence

Similar skills

  • Dev Story

    Donchitos/Claude-Code-Game-Studios

    Implement a story: ADR guidelines, right programmer agent, code plus test.

    26k GitHub stars~2.4k tokensUpdated 3 days ago
    Game DevelopmentAuto-check: notes

  • Blockbench Plugins

    jasonjgardner/blockbench-mcp-plugin

    Blockbench plugin/extension development for the 3D modeling tool.

    500 GitHub stars~2.8k tokensUpdated 9 days ago
    Game DevelopmentAuto-check passed

  • Portal Connect

    gosuda/portal-tunnel

    Reach, inspect, or consume a service that someone published through a Portal relay.

    308 GitHub stars~2.9k tokensUpdated today
    Game DevelopmentAuto-check passed

  • Aibridge Development Workflow

    FlameskyDexive/Legends-Of-Heroes

    AIBridge/Unity 项目的标准开发工作流。Use when creating, modifying, fixing, refactoring, or validating C code, Unity assets, prefabs, editor tools, package structure, tests, AGENTS.md, or local Skills.

    928 GitHub stars~790 tokensUpdated 19 days ago
    Game DevelopmentAuto-check passed

  • Design

    vladikk/modularity

    Designs modular high-level architectures from functional requirements and produces design documents for each module.

    555 GitHub stars~3.8k tokensUpdated 1 mo ago
    Game DevelopmentAuto-check passed

  • Sokol Net

    elix22/Sokol.NET

    Sokol.NET framework development — use for ANY work in this repo: creating or debugging examples, building/running for desktop/Android/iOS/Web, writing or compiling shaders, adding a new C/C++…

    154 GitHub stars~2.8k tokensUpdated yesterday
    Game DevelopmentAuto-check passed

More from gamedev-skills/awesome-gamedev-agent-skills

All 53 skills in this repo

  • Create Game Assets

    gamedev-skills/awesome-gamedev-agent-skills

    Plan, generate, source, normalize, and validate cohesive visual game assets.

    1.4k GitHub stars~2k tokensUpdated 2 days ago
    Auto-check passed

  • Roblox UI

    gamedev-skills/awesome-gamedev-agent-skills

    Build production Roblox interfaces with ScreenGui/PlayerGui lifecycle, responsive UDim2 layouts, safe insets, reusable editable Instances, cross-device input and selection, restrained motion…

    1.4k GitHub stars~2.9k tokensUpdated 2 days ago
    Auto-check passed

  • AI Behavior Trees Utility AI

    gamedev-skills/awesome-gamedev-agent-skills

    Build a production behavior-tree runtime (Blackboard, action/condition leaves, sequence/selector/parallel composites, decorators) and a Utility AI system (response curves — linear, exponential…

    1.4k GitHub stars~2k tokensUpdated 2 days ago
    Auto-check passed

  • Bevy Ecs

    gamedev-skills/awesome-gamedev-agent-skills

    Structure a Bevy app around its Entity Component System: build the App with plugins, define Component/Resource types, write systems with Query/Res/Commands, filter and order systems, and use the…

    1.4k GitHub stars~2.5k tokensUpdated 2 days ago
    Auto-check passed

  • Card Game

    gamedev-skills/awesome-gamedev-agent-skills

    Build a card game: card data, deck/hand/discard zones, draw/shuffle/reshuffle, a turn structure, costs, and effect resolution.

    1.4k GitHub stars~1.6k tokensUpdated 2 days ago
    Auto-check passed

  • Fps Shooter

    gamedev-skills/awesome-gamedev-agent-skills

    Build a first-person shooter: move+mouse-look controller, hitscan or projectile shooting, weapons, health, and enemy AI.

    1.4k GitHub stars~1.5k tokensUpdated 2 days ago
    Auto-check passed

Categories

Questions about Pixijs Rendering

What does Pixijs Rendering do?

Build a PixiJS v8 render layer: create the async Application, load textures with Assets, compose the scene graph with Container and Sprite, drive the ticker loop, wire pointer events, and group…. Pixijs Rendering is an agent skill from gamedev-skills/awesome-gamedev-agent-skills. Build a PixiJS v8 render layer: create the async Application, load textures with Assets, compose the scene graph with Container and Sprite, drive the ticker loop, wire pointer events, and group draws with render groups.

When should I use Pixijs Rendering?

Pixijs Rendering fits situations like: debugging PixiJS v8 — when the user mentions PixiJS.

How do I install Pixijs Rendering in Claude Code?

Run `npx skills add gamedev-skills/awesome-gamedev-agent-skills --skill pixijs-rendering -a claude-code`. Or copy the skill folder (skills/web-engines/pixijs-rendering in gamedev-skills/awesome-gamedev-agent-skills) into .claude/skills/pixijs-rendering in your project. Claude Code loads it when a task matches its description.

How do I install Pixijs Rendering in Codex?

Run `npx skills add gamedev-skills/awesome-gamedev-agent-skills --skill pixijs-rendering -a codex`. Or copy the skill folder (skills/web-engines/pixijs-rendering in gamedev-skills/awesome-gamedev-agent-skills) into .agents/skills/pixijs-rendering in your project. Codex loads it when a task matches its description.

Can I use Pixijs Rendering in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add gamedev-skills/awesome-gamedev-agent-skills --skill pixijs-rendering -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/pixijs-rendering, .gemini/skills/pixijs-rendering, .github/skills/pixijs-rendering and .opencode/skills/pixijs-rendering in your project.

What does Pixijs Rendering need to run?

SKILL.md names no scripts, command-line tools or credentials: Pixijs Rendering is instructions for the agent only.

Does Pixijs Rendering access the network?

SKILL.md names 1 domain. In commands or code: pixijs.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Pixijs Rendering safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Pixijs Rendering use?

Pixijs Rendering is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Pixijs Rendering use?

About 2.3k tokens (SKILL.md is roughly 9.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.4k tokens, read only when the agent opens those files.

What are the alternatives to Pixijs Rendering?

Skills that share tags, products or a category with Pixijs Rendering: Dev Story (Donchitos/Claude-Code-Game-Studios, 26k stars), Blockbench Plugins (jasonjgardner/blockbench-mcp-plugin, 500 stars), Portal Connect (gosuda/portal-tunnel, 308 stars) and Aibridge Development Workflow (FlameskyDexive/Legends-Of-Heroes, 928 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Pixijs Rendering?

gamedev-skills (a GitHub organization) maintains it in gamedev-skills/awesome-gamedev-agent-skills, which has 1,389 GitHub stars. The repository holds 53 skills in this directory. The repository was last updated on October 9, 2026.

Source: gamedev-skills/awesome-gamedev-agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.