pixijs logo

pixijs

pixijs

pixijs/pixijs-skills1.4Kinstalls200stars

SKILL.md

Full skill instructions

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.

Skill router

Foundations

SkillLoad when...
pixijs-applicationCreating or configuring a PixiJS Application, calling app.init(), accessing app.stage/renderer/canvas/screen, resize/ticker plugins, app.destroy().
pixijs-core-conceptsUnderstanding the renderer pipeline, choosing WebGL/WebGPU/Canvas, render loop internals, systems and pipes.
pixijs-createScaffolding a new project with the create-pixi CLI (bundler-vite, creation-web, framework-react templates).
pixijs-environmentsRunning PixiJS in Web Workers, Node/SSR, or strict-CSP contexts (DOMAdapter, WebWorkerAdapter, pixi.js/unsafe-eval).
pixijs-migration-v8Upgrading from v7 to v8 or fixing v7 patterns (beginFill/endFill, @pixi/* packages, BaseTexture, DisplayObject).
pixijs-scene-core-conceptsUnderstanding the scene graph as a whole: containers vs leaves, transforms, render order, masking, RenderLayer.

Scene Objects

SkillLoad when...
pixijs-scene-containerWorking with Container: addChild/removeChild, transforms, zIndex, bounds, toGlobal/toLocal, destroy.
pixijs-scene-spriteDrawing images: Sprite, AnimatedSprite, NineSliceSprite, TilingSprite.
pixijs-scene-graphicsDrawing vector shapes or paths: Graphics, GraphicsContext, fill/stroke, FillGradient, SVG.
pixijs-scene-textRendering text: Text, BitmapText, HTMLText, SplitText, TextStyle.
pixijs-scene-meshCustom geometry: Mesh, MeshSimple, MeshPlane, MeshRope, PerspectiveMesh.
pixijs-scene-particle-containerRendering thousands of lightweight sprites: ParticleContainer, Particle, dynamicProperties.
pixijs-scene-dom-containerOverlaying HTML elements on the canvas: DOMContainer, pixi.js/dom.
pixijs-scene-gifDisplaying animated GIFs: GifSprite, GifSource, pixi.js/gif.
pixijs-html-sourceRendering 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

SkillLoad when...
pixijs-assetsLoading resources: Assets.init, Assets.load, bundles, manifests, spritesheets, caching.
pixijs-colorCreating or converting colors: Color class, hex/rgb/hsl, tint, premultiply.
pixijs-eventsHandling pointer/mouse/touch/wheel input: eventMode, FederatedEvent, hitArea, cursor, drag.
pixijs-mathPoints, vectors, matrices, shapes, hit testing: Point, Matrix, Rectangle, toGlobal/toLocal.
pixijs-tickerPer-frame logic or controlling the render loop: Ticker, deltaTime, UPDATE_PRIORITY, maxFPS.

Advanced

SkillLoad when...
pixijs-accessibilityScreen reader or keyboard navigation: AccessibilitySystem, accessibleTitle, tabIndex.
pixijs-blend-modesCompositing with blend modes: add, multiply, screen, overlay, pixi.js/advanced-blend-modes.
pixijs-custom-renderingWriting custom shaders, uniforms, or batchers: Shader.from, GlProgram/GpuProgram, UniformGroup, custom Filter.
pixijs-filtersApplying visual effects: BlurFilter, ColorMatrixFilter, DisplacementFilter, Filter.from, pixi-filters.
pixijs-performanceProfiling or optimizing FPS, draw calls, GPU memory: culling, GCSystem, cacheAsTexture, object pooling.

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.