pixijs
Skill571 starsChanged 3 months agoApache-2.0View on GitHub
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, BitmapText, create-pixi, how do I draw, how do I render, how do I animate in pixi.
Files
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
- 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. |
| pixijs-create | Scaffolding a new project with the create-pixi CLI (bundler-vite, creation-web, framework-react templates). |
| 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, SVG. |
| 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, 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. |
| 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. |
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.
Other versions5 projects use a version of this.
Word for word · 0
None found.
Edited · 4
- pixijs/pixijs★ 48k85% same
- pixijs/pixijs-skills★ 34685% same
- WordPress/desktop-mode★ 27799% same
- delorenj/skills★ 1658% same
Wrote their own version · 1
- jammyfu/open-game-skills★ 4same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository52 other files it gives its agents.
- AGENTS.mdAGENTS.md
- adaptSkill
- animateSkill
- arrangeSkill
- auditSkill
- bolderSkill
- clarifySkill
- colorizeSkill
- critiqueSkill
- delightSkill
- distillSkill
- extractSkill
- frontend-designSkill
- hardenSkill
- normalizeSkill
- onboardSkill
- optimizeSkill
- overdriveSkill
- pixijs-accessibilitySkill
- pixijs-applicationSkill
- pixijs-assetsSkill
- pixijs-blend-modesSkill
- pixijs-colorSkill
- pixijs-core-conceptsSkill
- pixijs-createSkill
- pixijs-custom-renderingSkill
- pixijs-environmentsSkill
- pixijs-eventsSkill
- pixijs-filtersSkill
- pixijs-html-sourceSkill
- pixijs-mathSkill
- pixijs-migration-v8Skill
- pixijs-performanceSkill
- pixijs-scene-containerSkill
- pixijs-scene-core-conceptsSkill
- pixijs-scene-dom-containerSkill
- pixijs-scene-gifSkill
- pixijs-scene-graphicsSkill
- pixijs-scene-meshSkill
- pixijs-scene-particle-containerSkill
- pixijs-scene-spriteSkill
- pixijs-scene-textSkill
- pixijs-tickerSkill
- polishSkill
- quieterSkill
- teach-impeccableSkill
- typesetSkill
- cohub-appsSkill
- cohub-boardSkill
- cohub-generateSkill
- cohubSkill
- public-filesSkill
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
Reviews can't be read right now.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.