Skip to main content
skill CX Codex

pixijs — Claude Code skill: what it does, how to install

Routes PixiJS v8 tasks to specialized sub-skills for rendering and scene setup.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add pixijs/pixijs-skills --skill pixijs -a claude-code
Open on GitHub

What pixijs does

This skill serves as the main entry point for PixiJS v8. It inspects the task and delegates work to specialized SKILL.md files. Coverage includes Application bootstrap with app.init() and migration paths from v7.

The internal router targets WebGL or WebGPU pipelines. It directs the agent toward custom shaders via GlProgram and event handling. When an API method falls outside the table, it consults the documentation index.

Heavy scenes require choosing between Container and ParticleContainer early on. That prevents wasteful redraws.

What it helps with

  • initialize a PixiJS v8 Application using WebGPU or WebGL
  • upgrade legacy code from PixiJS v7 to v8
  • render sprite batches with ParticleContainer
  • write custom shaders using GlProgram or GpuProgram

Example prompts for the agent

  • Set up a PixiJS v8 scene with ParticleContainer for moving sprites.
  • Migrate our v7 graphics code away from beginFill to the v8 API.
  • Configure an Application with WebGPU support and preload textures using Assets.load.

How to install pixijs

1Skills CLI (Vercel)

npx skills add pixijs/pixijs-skills --skill pixijs -a claude-code

2Manually: put the files in place

~/.claude/skills/pixijs/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/pixijs/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about pixijs

How to install pixijs in Claude Code?

Run npx skills add pixijs/pixijs-skills --skill pixijs -a claude-code. It installs the routing instructions directly into your agent setup.

What does pixijs do?

It identifies the PixiJS v8 task and loads specialized instructions for scene setup, renderers, or shaders.

How does the skill handle migration from v7 to v8?

It routes migration tasks to rules that update legacy patterns, replacing DisplayObject and old methods like beginFill.

Source text

SKILL.md · MIT
---
name: pixijs
description: "Use this skill first for ANY PixiJS v8 task; it routes to the right specialized skill for the job. Covers the full PixiJS surface: Application setup, the scene graph (Container, Sprite, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite), rendering (WebGL/WebGPU/Canvas, render loop, custom shaders, filters, blend modes), assets, events, color, math, ticker, accessibility, performance, environments, migration from v7, and project scaffolding. Triggers on: pixi, pixi.js, pixijs, PixiJS, v8, Application, app.init, Sprite, Container, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite, Assets, Ticker, renderer, WebGL, WebGPU, scene graph, filter, shader, blend mode, texture, 3D texture, depth slice, layer, storage texture, BitmapText, create-pixi, how do I draw, how do I render, how do I animate in pixi."
license: MIT
---

Entry point for the PixiJS v8 skill collection. PixiJS is the fastest library available for the web, working across all devices and allowing you to create rich, interactive graphics and cross-platform applications using WebGL, WebGPU, and Canvas as a fallback.

## How to use this skill

1. Find the specialized skill in the router below that best matches the task.
2. Load that skill's `SKILL.md` and follow its guidance.
3. If no sub-skill fits (the task references a specific class, function, option, or API surface not listed below), **WebFetch `https://pixijs.download/release/docs/llms.txt`**. That file is the auto-generated, always-current index of the full PixiJS API and guides. Each entry links to a `.html.md` page you can WebFetch for the detailed content.

For the long-form description and trigger keywords of every skill, see [references/index.md](references/index.md).

## Skill router

### Foundations

| Skill | Load when... |
|---|---|
| [pixijs-application](../pixijs-application/SKILL.md) | Creating or configuring a PixiJS `Application`, calling `app.init()`, accessing `app.stage`/`renderer`/`canvas`/`screen`, resize/ticker plugins, `app.destroy()`. |
| [pixijs-core-concepts](../pixijs-core-concepts/SKILL.md) | Understanding the renderer pipeline, choosing WebGL/WebGPU/Canvas, render loop internals, systems and pipes, renderer loader extensions, rendering into a `RenderTexture`/`RenderTarget` (`flipY`, `mipLevel`, `layer`, `bind`/`push`/`pop`, depth) or a depth slice of a 3D texture, WebGL context loss and WebGPU device loss. |
| [pixijs-create](../pixijs-create/SKILL.md) | Scaffolding a new project with the `create-pixi` CLI (bundler-vite, creation-web, framework-react templates), adding PixiJS to an existing project, or setting up `tsconfig.json` for TypeScript 5, 6, or 7 (`moduleResolution`, `@webgpu/types`, `@types/web`). |
| [pixijs-environments](../pixijs-environments/SKILL.md) | Running PixiJS in Web Workers, Node/SSR, or strict-CSP contexts (`DOMAdapter`, `WebWorkerAdapter`, `pixi.js/unsafe-eval`). |
| [pixijs-migration-v8](../pixijs-migration-v8/SKILL.md) | Upgrading from v7 to v8 or fixing v7 patterns (`beginFill`/`endFill`, `@pixi/*` packages, `BaseTexture`, `DisplayObject`). |
| [pixijs-scene-core-concepts](../pixijs-scene-core-concepts/SKILL.md) | Understanding the scene graph as a whole: containers vs leaves, transforms, render order, masking, `RenderLayer`. |

### Scene Objects

| Skill | Load when... |
|---|---|
| [pixijs-scene-container](../pixijs-scene-container/SKILL.md) | Working with `Container`: `addChild`/`removeChild`, transforms, `zIndex`, bounds, `toGlobal`/`toLocal`, `destroy`. |
| [pixijs-scene-sprite](../pixijs-scene-sprite/SKILL.md) | Drawing images: `Sprite`, `AnimatedSprite`, `NineSliceSprite`, `TilingSprite`. |
| [pixijs-scene-graphics](../pixijs-scene-graphics/SKILL.md) | Drawing vector shapes or paths: `Graphics`, `GraphicsContext`, `fill`/`stroke`, `FillGradient`, `FillPattern`, `textureSpace`, texture and pattern fills, SVG import (`svg()`, gradients). |
| [pixijs-scene-text](../pixijs-scene-text/SKILL.md) | Rendering text: `Text`, `BitmapText`, `HTMLText`, `SplitText`, `TextStyle`. |
| [pixijs-scene-mesh](../pixijs-scene-mesh/SKILL.md) | Custom geometry: `Mesh`, `MeshSimple`, `MeshPlane`, `MeshRope`, `PerspectiveMesh`. |
| [pixijs-scene-particle-container](../pixijs-scene-particle-container/SKILL.md) | Rendering thousands of lightweight sprites: `ParticleContainer`, `Particle`, `dynamicProperties`. |
| [pixijs-scene-dom-container](../pixijs-scene-dom-container/SKILL.md) | Overlaying HTML elements on the canvas: `DOMContainer`, `pixi.js/dom`. |
| [pixijs-scene-gif](../pixijs-scene-gif/SKILL.md) | Displaying animated GIFs: `GifSprite`, `GifSource`, `pixi.js/gif`. |
| [pixijs-html-source](../pixijs-html-source/SKILL.md) | Rendering live HTML/DOM elements or snapshots as textures (experimental, needs a browser that supports the HTML-in-Canvas spec): `HTMLSource`, `ElementImageSource`, `pixi.js/html-source`, `requestPaint`. |

### Utilities

| Skill | Load when... |
|---|---|
| [pixijs-assets](../pixijs-assets/SKILL.md) | Loading resources: `Assets.init`, `Assets.load`, bundles, manifests, spritesheets, caching. |
| [pixijs-color](../pixijs-color/SKILL.md) | Creating or converting colors: `Color` class, hex/rgb/hsl, `tint`, `premultiply`. |
| [pixijs-events](../pixijs-events/SKILL.md) | Handling pointer/mouse/touch/wheel input: `eventMode`, `FederatedEvent`, `hitArea`, `cursor`, drag. |
| [pixijs-math](../pixijs-math/SKILL.md) | Points, vectors, matrices, shapes, hit testing: `Point`, `Matrix`, `Rectangle`, `Polygon`, `Triangle`, `strokeContains`, `containsRect`, `Matrix.decompose` (mirrored matrices), `toGlobal`/`toLocal`. |
| [pixijs-ticker](../pixijs-ticker/SKILL.md) | Per-frame logic or controlling the render loop: `Ticker`, `deltaTime`, `UPDATE_PRIORITY`, `maxFPS`. |

### Advanced

| Skill | Load when... |
|---|---|
| [pixijs-accessibility](../pixijs-accessibility/SKILL.md) | Screen reader or keyboard navigation: `AccessibilitySystem`, `accessibleTitle`, `tabIndex`. |
| [pixijs-blend-modes](../pixijs-blend-modes/SKILL.md) | Compositing with blend modes: `add`, `multiply`, `screen`, `overlay`, `pixi.js/advanced-blend-modes`. |
| [pixijs-custom-rendering](../pixijs-custom-rendering/SKILL.md) | Writing custom shaders, uniforms, or batchers: `Shader.from`, `GlProgram`/`GpuProgram`, `UniformGroup`, custom `Filter`, WGSL `override` constants, `gpuLayout`, `TextureView`, `Buffer.update`, `TexturePool`, 3D/array textures, storage textures, render bundles, custom pipes. |
| [pixijs-filters](../pixijs-filters/SKILL.md) | Applying visual effects: `BlurFilter`, `ColorMatrixFilter`, `DisplacementFilter`, `Filter.from`, `pixi-filters`. |
| [pixijs-performance](../pixijs-performance/SKILL.md) | Profiling or optimizing FPS, draw calls, GPU memory: culling, `GCSystem`, `cacheAsTexture`, object pooling, transient MSAA render textures, render bundles, filter texture sizing. |

## Fallback: canonical PixiJS docs

If the task references a class, function, option, or API surface not covered by any sub-skill above, **WebFetch `https://pixijs.download/release/docs/llms.txt`**. It's the auto-generated index of the full PixiJS API and guides, regenerated on every release. Each entry links to a `.html.md` page you can WebFetch for the detailed content. Use this fallback whenever the router table doesn't point at an obvious match.

© pixijs · MIT · pixijs/pixijs-skills

Similar skills

Everything for Frontend and UI →

From the same set26

pixijs-scene-graphics Guides AI coding agents on drawing vector paths and primitives in PixiJS v8. Useful when building procedural UI, canvas graphics, and custom shapes. CX Codex +1 6,000installs pixijs-core-concepts Explains how PixiJS v8 puts frames on screen: backend selection, the render loop, RenderTexture work and context loss recovery. CX Codex +1 6,000installs pixijs-performance A skill for profiling and speeding up PixiJS v8 apps: FPS, draw calls, GPU memory. Useful when your app stutters or leaks memory. CX Codex +1 6,000installs pixijs-application Guides PixiJS v8 Application setup via async app.init(). Useful when configuring canvas rendering, choosing between WebGPU and WebGL, and handling window resize. CX Codex +1 6,000installs pixijs-scene-container Skill for PixiJS v8 scene graph operations: nesting children, handling transforms, zIndex sorting, and configuring Container options. CX Codex +1 5,900installs pixijs-scene-sprite This skill tells your agent how to draw images in PixiJS v8 with Sprite, AnimatedSprite, NineSliceSprite and TilingSprite. Useful when the project already runs PixiJS and you want working draw code fast. CX Codex +1 5,900installs pixijs-events A skill for pointer, mouse, touch and wheel input in PixiJS v8: eventMode values, FederatedEvent types, propagation and capture, hitArea, cursors, drag with globalpointermove. CX Codex +1 5,900installs pixijs-assets Provides PixiJS v8 resource management patterns for AI coding agents. Helps configure Assets.load, bundles, manifests, and explicit parsers for extension-less URLs. CX Codex +1 5,900installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor