About pixijs
pixijs is the entry point to a PixiJS v8 skill collection for developers. It routes tasks to focused guides and points to the canonical API index when no listed skill covers a topic.
Key features
- 01Routes tasks to specialized skills
- 02Covers foundations, scene objects, and utilities
- 03Includes advanced rendering and performance guides
- 04Falls back to the API index for uncovered topics
Use cases
- 01Plan PixiJS application setup and scene structure
- 02Look up asset, input, or text guidance
- 03Address custom rendering and performance
Install
Copy the command and run it in a terminal.
npx skills add https:/ / github.com/ pixijs/ pixijs-skills --skill pixijsAfter installing, type/pixijsin Claude Code to confirm it loaded.
Bundled filesreferences/index.md
Details
From the project READMEEntry 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
- Find the specialized skill in the router below that best matches the task.
- Load that skill's
SKILL.mdand follow its guidance. - 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.mdpage you can WebFetch for the detailed content.
For the long-form description and trigger keywords of every skill, see references/index.md.
Skill router
Foundations
| Skill | Load when... |
|---|---|
| pixijs-application | Creating or configuring a PixiJS Application, calling app.init(), accessing app.stage/renderer/canvas/screen, resize/ticker plugins, app.destroy(). |
| pixijs-core-concepts | 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 | 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 | Running PixiJS in Web Workers, Node/SSR, or strict-CSP contexts (DOMAdapter, WebWorkerAdapter, pixi.js/unsafe-eval). |
| pixijs-migration-v8 | Upgrading from v7 to v8 or fixing v7 patterns (beginFill/endFill, @pixi/* packages, BaseTexture, DisplayObject). |
| pixijs-scene-core-concepts | Understanding the scene graph as a whole: containers vs leaves, transforms, render order, masking, RenderLayer. |
Scene Objects
| Skill | Load when... |
|---|---|
| pixijs-scene-container | Working with Container: addChild/removeChild, transforms, zIndex, bounds, toGlobal/toLocal, destroy. |
| pixijs-scene-sprite | Drawing images: Sprite, AnimatedSprite, NineSliceSprite, TilingSprite. |
| pixijs-scene-graphics | Drawing vector shapes or paths: Graphics, GraphicsContext, fill/stroke, FillGradient, FillPattern, textureSpace, texture and pattern fills, SVG import (svg(), gradients). |
| pixijs-scene-text | Rendering text: Text, BitmapText, HTMLText, SplitText, TextStyle. |
| pixijs-scene-mesh | Custom geometry: Mesh, MeshSimple, MeshPlane, MeshRope, PerspectiveMesh. |
| pixijs-scene-particle-container | Rendering thousands of lightweight sprites: ParticleContainer, Particle, dynamicProperties. |
| pixijs-scene-dom-container | Overlaying HTML elements on the canvas: DOMContainer, pixi.js/dom. |
| pixijs-scene-gif | Displaying animated GIFs: GifSprite, GifSource, pixi.js/gif. |
| pixijs-html-source | 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 | Loading resources: Assets.init, Assets.load, bundles, manifests, spritesheets, caching. |
| pixijs-color | Creating or converting colors: Color class, hex/rgb/hsl, tint, premultiply. |
| pixijs-events | Handling pointer/mouse/touch/wheel input: eventMode, FederatedEvent, hitArea, cursor, drag. |
| pixijs-math | Points, vectors, matrices, shapes, hit testing: Point, Matrix, Rectangle, Polygon, Triangle, strokeContains, containsRect, Matrix.decompose (mirrored matrices), toGlobal/toLocal. |
| pixijs-ticker | Per-frame logic or controlling the render loop: Ticker, deltaTime, UPDATE_PRIORITY, maxFPS. |
Advanced
| Skill | Load when... |
|---|---|
| pixijs-accessibility | Screen reader or keyboard navigation: AccessibilitySystem, accessibleTitle, tabIndex. |
| pixijs-blend-modes | Compositing with blend modes: add, multiply, screen, overlay, pixi.js/advanced-blend-modes. |
| pixijs-custom-rendering | 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 | Applying visual effects: BlurFilter, ColorMatrixFilter, DisplacementFilter, Filter.from, pixi-filters. |
| pixijs-performance | 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.