pixijs/pixijs-skills
25 skills33.2k installs5.2k starsGitHub
Install
npx skills add https://github.com/pixijs/pixijs-skillsSkills in this repo
1PixijsPixiJS is a meta routing skill for the PixiJS v8 skills collection on Prism: it gives solo builders and small teams a scannable index that maps natural language and API terms to the right deep-dive skill. Instead of one monolithic doc, it separates foundations—Application bootstrap with async init and plugins, core renderer concepts across WebGL, WebGPU, and Canvas, and project scaffolding via create-pixi with multiple bundler and framework presets—from additional topic files referenced in the full index. Agents use it during Build when implementing 2D games, data viz, or rich canvas UIs where v8 API changes (init flow, systems-and-pipes renderer, environment detection) are easy to get wrong. Compatible with Claude Code, Cursor, Codex, and generic agents that load skill packages from skills.sh-style repos.1.6kinstalls2Pixijs ApplicationPixiJS Application is an agent skill that packages a structured reference for ApplicationOptions—the single options object passed to `app.init(options)` in a PixiJS v8-style application setup. It explains how defaults come from three layers: base auto-detect renderer sizing, application plugin mixins, and individual renderer subsystems, so solo builders do not guess which flag belongs where. If you are shipping a browser game, data viz, or interactive marketing experience with PixiJS, you use this skill when you need authoritative field names, types, and defaults instead of spelunking TypeScript definitions. It fits indie workflows where one developer owns both gameplay code and render performance: you can set resolution, resize behavior, ticker sharing, and culling in one pass. The skill does not scaffold a project; it is documentation-shaped procedural knowledge for correct initialization and fewer subtle canvas or DPI bugs.1.4kinstalls3Pixijs Core ConceptsPixiJS Core Concepts is an agent skill that teaches solo builders the mental model behind PixiJS v8 rendering: how the library auto-detects WebGL, WebGPU, or Canvas backends, how the render loop and systems-and-pipes pipeline turn your display list into pixels each frame, and how behavior shifts across browser, worker, and SSR environments. It is for indie game and interactive-app developers who already use or plan to use PixiJS and need to reason about performance, manual rendering with autoStart: false, and texture extraction without guessing API details. Invoke it when triggers mention renderer, render loop, render pipeline, WebGL, WebGPU, Canvas, systems, environments, or autoDetectRenderer—before diving into scene graph or Application configuration skills. Understanding this layer matters because misconfigured tickers, wrong backend assumptions, and environment mismatches are the usual root causes of blank screens and janky animation in shipped canvas games and rich web UIs.1.4kinstalls4Pixijs Scene Graphicspixijs-scene-graphics is an agent skill that encodes the PixiJS v8 Graphics and GraphicsContext API for solo builders shipping browser games, visualizers, or canvas-heavy UIs. It assumes you already know pixijs-scene-core-concepts and treats Graphics as a leaf node you wrap with containers rather than nesting children inside. The skill walks through the v8 shape-then-style workflow: emit geometry with rect, circle, ellipse, poly, roundRect, star, regularPoly, and path verbs, then apply fill and stroke, including cut and hole operations. It covers FillGradient and FillPattern styling, GraphicsPath reuse, default and explicit fillStyle/strokeStyle, transform helpers during draw, cloning and clearing contexts, bounds, and pointer hit testing with containsPoint. Triggers align with everyday implementation questions—GraphicsOptions, SVG round-trips, and shared contexts across instances—so agents produce chainable, idiomatic drawing code instead of deprecated Pixi patterns.1.4kinstalls5Pixijs Scene ContainerPixijs-scene-container is a procedural agent skill for solo and indie builders working in PixiJS v8 who need a reliable reference for the Container node—the backbone of the scene graph. It explains how to nest Sprites, Graphics, Text, and other leaves under a parent that applies transforms, alpha, tint, and blend mode to the whole subtree. You get concrete guidance on constructor options such as sortableChildren and boundsArea, child ordering APIs, pivot-aware scaling, and coordinate conversion between local and global space. The skill also covers zIndex sorting when sortableChildren is enabled, cullable optimization, optional per-frame onRender hooks, and safe destroy patterns so agents do not leak GPU resources. It assumes you already understand core scene concepts and pairs naturally with the pixijs-scene-core-concepts skill before you structure hero groups, UI layers, or camera rigs in a WebGL canvas game or interactive web experience.1.4kinstalls6Pixijs Scene Core Conceptspixijs-scene-core-concepts is an agent skill for indie game and interactive media builders using PixiJS v8. It teaches the preferred pattern for Container-derived nodes: pass a single options object to constructors such as Sprite and Container so transform, anchor, scale, tint, blendMode, label, and zIndex are declared upfront. The skill contrasts verbose line-by-line assignment with readable object literals and names explicit exceptions—values computed after the app exists, intentional runtime mutations, objects you cannot reconstruct, and batched point or scale updates via .set(). That framing reduces drift during agent-generated scene code and aligns new work with v8 APIs; teams migrating from v7 are pointed to the companion migration skill. Use it whenever agents scaffold entities, layers, or hero sprites so defaults and hierarchy stay consistent across files.1.4kinstalls7Pixijs AssetsPixiJS Assets background loading teaches solo builders how to prefetch images and bundles without blocking the main thread while menus, splash screens, or gameplay continue. The skill documents `backgroundLoad`, array loading, and `backgroundLoadBundle`, then shows how a later `Assets.load` or `loadBundle` call either resolves immediately or waits on work already in progress. That pattern matters for browser and hybrid games where stutter on level change kills retention. You install it when you already use PixiJS and need a repeatable preload strategy instead of cramming everything into a blocking initial load. It is procedural knowledge for the Assets cache layer—not a separate MCP or CLI—so it fits agents helping you wire level transitions and UI-first boot flows in TypeScript game clients.1.4kinstalls8Pixijs Performancepixijs-performance is an agent skill for solo builders shipping games, data viz, or rich web experiences on PixiJS v8 who hit real runtime pain—stuttering FPS, ballooning draw calls, or GPU memory that never returns. It enforces measure-first discipline with browser Performance and GPU tools, then maps bottlenecks to targeted fixes: correct destroy and cacheAsTexture lifecycles, Application-level GC tuning (gcMaxUnusedTime, gcFrequency), PrepareSystem warm-up, pooling, batching constraints, BitmapText instead of expensive dynamic text, and CullerPlugin-based culling. The readme ships quick-start snippets for extensions.add(CullerPlugin), cullArea rectangles, and init options reflecting 8.15 deprecations. Use during build when you architect hot paths, and again in ship when users report jank. It is procedural PixiJS knowledge packaged for coding agents, not a generic “make it faster” checklist.1.4kinstalls9Pixijs Mathpixijs-math is an agent skill that steers correct use of PixiJS v8 lightweight math primitives—points, affine matrices, geometric shapes, and layout rectangles—when solo builders implement 2D games, data viz, or interactive canvas apps. It is for developers who already chose PixiJS and need reliable guidance on ObservablePoint updates, Matrix composition, global/local transforms, and hit-area testing including strokeContains. The skill also documents math-extras imports for dot products, reflections, and intersection utilities that are easy to skip in ad-hoc snippets. Use it whenever triggers mention hitArea, getBounds, pad/fit/enlarge on rectangles, or confusion between PointData and PointLike types. It reduces subtle bugs in scaling hierarchies and pointer targets that are expensive to debug at ship time. Pair it with your rendering and asset-loading skills rather than treating math as a one-off copy-paste from outdated v7 examples.1.3kinstalls10Pixijs Eventspixijs-events is a PixiJS v8 agent skill for solo builders wiring pointer, mouse, touch, and wheel input on the scene graph. It explains how federated events mirror DOM semantics: opt containers in with eventMode, listen via on/addEventListener, and use globalpointermove when you need drag outside the original hit target. The skill covers propagation phases, custom hit areas, cursor styling, and when move events fire only over the listener versus globally. It points to related Pixi skills for accessibility, DOM overlays, and broader scene setup. Install it when triggers mention eventMode, FederatedPointerEvent, tap/click handlers, or drag—and you want consistent v8 patterns instead of guessing older Pixi APIs.1.3kinstalls11Pixijs Scene Spritepixijs-scene-sprite is a PixiJS reference skill for solo builders shipping 2D games or canvas experiences with Claude Code, Cursor, or Codex. It focuses on AnimatedSprite: loading a spritesheet JSON, wiring textures from sheet.animations, and controlling frame playback with animationSpeed, loop, and autoPlay while keeping standard Sprite transforms. Use it when you are building character walk cycles, one-shot effects, or looping HUD icons and need consistent patterns instead of ad-hoc Sprite hacks. The skill documents construction options, inheritance from Sprite, and stage placement so agents produce idiomatic Pixi v8-style code. It does not replace full scene-graph or physics architecture—it accelerates one high-friction slice of the render stack during frontend build work.1.3kinstalls12Pixijs TickerPixijs-ticker is an agent skill for solo and indie builders using PixiJS v8 who need the render loop explained as executable patterns, not scattered API notes. It covers registering frame callbacks with app.ticker, choosing deltaTime for frame-rate-independent motion versus deltaMS for real-time physics, ordering work with UPDATE_PRIORITY, and capping throughput with maxFPS, minFPS, and speed scaling. The skill also contrasts Ticker.shared with dedicated instances, documents the per-sprite onRender hook, and points to manual rendering when you decouple simulation from display. Triggers match everyday agent searches—Ticker, onRender, deltaTime, app.ticker—so Codex, Cursor, or Claude Code can implement rotation, movement, and staged updates consistently. Pair it with application setup and performance skills when you are assembling a full game or interactive canvas experience.1.3kinstalls13Pixijs Scene TextPixiJS Scene Text is a phase-specific agent skill that teaches solo game devs how to use BitmapText in PixiJS for high-frequency label updates—scores, timers, and HUD strings—by reusing a pre-generated glyph atlas. The readme walks through construction with minimal and styled options, stage parenting, and ticker-driven updates, and explains trade-offs versus canvas Text: limited styling, fixed glyph sets, and native pixel-perfect sizing unless you adopt MSDF fonts. It clarifies that style passes through TextStyle while many fields are ignored by the bitmap pipeline, and that resolution is tied to BitmapFont install time. Use it while building gameplay UI when perf stutter from Text updates shows up in profiling, or when an coding agent needs authoritative PixiJS text patterns instead of guessing APIs.1.3kinstalls14Pixijs Scene Particle Containerpixijs-scene-particle-container teaches solo builders and small teams how to use PixiJS v8 ParticleContainer for high-count, low-overhead sprite batches—particle effects, bullet hell patterns, and similar visuals that would choke a normal Container tree. Particles share one base texture and a restricted transform set; they live in particleChildren and must be added with addParticle, while grouping with other scene objects means wrapping the ParticleContainer in a standard Container. The skill walks constructor options (ParticleContainerOptions, ParticleOptions), dynamic property flags, bounds and pixel rounding, and update semantics so agents do not treat particles like full Container children. It is for builders already comfortable with Pixi scene basics who need production-ready particle performance, not for generic UI layout or backend services.1.3kinstalls15Pixijs FiltersPixiJS Filters is an agent skill for solo builders adding post-processing and visual effects in PixiJS v8. It explains how to attach single or chained filters to containers and sprites, configure built-in blur and color-matrix effects, and author custom shaders through Filter.from with the right options for resolution, padding, and blend requirements. The skill also covers filterArea scoping so agents do not tank frame rates on full-stage passes, and points to the pixi-filters ecosystem for richer presets. Use it while implementing game juice, UI glow, or cinematic transitions in WebGL/canvas apps. It assumes intermediate graphics literacy and pairs with pixijs-custom-rendering and pixijs-performance when shaders or GPU cost need deeper tuning. Ideal for Claude Code, Cursor, and Codex sessions where generic CSS filter advice would be wrong for Pixi’s container filter stack.1.3kinstalls16Pixijs ColorPixiJS Color is an agent skill for solo and indie builders shipping canvas or WebGL experiences with PixiJS v8. It teaches when explicit Color objects matter versus passing raw ColorSource values, and how to convert between hex, numeric, array, and RGBA representations for tints, fills, and strokes. The skill walks through accepted input formats, alpha and premultiply behavior, and the shared singleton workflow so agents do not hallucinate deprecated APIs. Use it during frontend implementation whenever agents touch Graphics fills, Sprite tinting, or any API that documents ColorSource. It pairs with other pixijs-scene skills so color choices stay consistent with blend modes and drawing primitives. Complexity is intermediate because you need a running PixiJS app and basic graphics concepts, but patterns are copy-paste friendly for Claude Code, Cursor, and Codex.1.3kinstalls17Pixijs Custom RenderingPixiJS Custom Rendering is a reference skill for solo builders shipping canvas games, data viz, or interactive media with PixiJS v8. When you add custom shaders or GPU effects, UniformGroup entries need exact type strings and correctly shaped CPU-side values; mismatches silently break draws or produce garbage on screen. This skill is the lookup table: PixiJS type names aligned with WGSL and GLSL, plus whether to pass a number, a two-element array, or a sized Float32Array for mats. It does not replace PixiJS docs on pipeline setup—it accelerates agent-assisted implementation so you do not guess vec3 versus vec4 layout or matrix element order. Best paired with an active frontend or game build where WebGPU or WebGL custom programs are already in scope.1.3kinstalls18Pixijs Scene Dom Containerpixijs-scene-dom-container is a procedural agent skill for solo builders shipping browser games, data viz, or creative tools on PixiJS v8 who need real DOM controls on top of the WebGL canvas. It walks through DOMContainer setup: creating elements, anchoring, driving CSS transforms from the scene graph, and when to import pixi.js/dom. It assumes pixijs-scene-core-concepts and treats DOMContainer as a leaf node incompatible with nested Pixi children or Web Worker contexts. Use it when triggers mention DOMContainer, DOMPipe, HTML overlay, iframe on canvas, or native inputs that must move with sprites. It reduces glue-code mistakes around experimental APIs and custom bundle registration before you ship interactive prototypes or production HUDs.1.3kinstalls19Pixijs CreatePixiJS Create is an agent skill for solo builders starting 2D WebGL or canvas games, interactive demos, or embedded graphics without guessing how Pixi v8 wants to be bootstrapped. It centers on the official create-pixi CLI: interactive template picking or `--template` for bundler-vite, bundler-webpack, bundler-esbuild, bundler-import-map, creation-web, framework-react, and extension-default. The skill explains adding pixi.js to an existing package with npm install, Node version floors, and the usual cd, install, npm run dev loop after scaffold. It is deliberately scoped to project creation and first-run dev—not sprite pipelines, filters, or performance tuning. Triggers align with quick start, scaffold, and template keywords so agents pick the right preset before writing game loop code. Pair with other pixijs-skills once the repo exists.1.3kinstalls20Pixijs Blend ModesPixiJS Blend Modes is an agent skill for solo builders compositing 2D layers in PixiJS v8 when flat alpha stacking is not enough for lights, shadows, or stylized overlays. It documents setting blendMode on containers and sprites, distinguishes built-in GPU equations from advanced modes that require the advanced-blend-modes package and filter pipeline, and warns that mode changes break render batches so like-mode children should stay grouped. Typical triggers include additive glows, multiply tinting, screen highlights, erase holes, and color-burn atmosphere. Complexity sits at intermediate because wrong ordering costs frames and advanced modes interact with filters. Use during scene polish in Build, then cross-check pixijs-performance when draw calls spike. The skill does not scaffold projects or load assets—it assumes a running Pixi stage from pixijs-create or an existing app.1.3kinstalls21Pixijs Scene MeshPixiJS Scene Mesh documents PerspectiveMesh, a mesh that renders a textured plane with perspective projection defined by four corner coordinates in local space. Solo builders shipping browser games, interactive demos, or rich marketing canvases use it when flat Sprites cannot sell depth—tilted cards, faux 3D floors, or billboard props in a 2D engine. The skill explains constructor options, default Texture.WHITE, and how increasing vertex subdivisions smooths UV interpolation across the quad. It is reference-style procedural knowledge aligned with PixiJS v8 patterns (Assets.load, stage graph). Reach for it during frontend build work before you invest in full 3D stacks or custom shaders, especially when you already run PixiJS for performance and want one documented mesh primitive instead of guessing plane math.1.3kinstalls22Pixijs EnvironmentsPixiJS Environments is an agent skill for solo builders shipping canvas-heavy web games, data viz, or branded experiences who must run PixiJS v8 outside a normal browser tab. It documents how DOMAdapter abstracts canvas creation, image loading, fetch, and XML parsing so you can call DOMAdapter.set(...) before Application.init() in workers, Node, or SSR pipelines. The quick-start shows posting an OffscreenCanvas into a worker and initializing width and height there. For content security policies without unsafe-eval, the skill requires importing pixi.js/unsafe-eval ahead of renderer init. Triggers include WebWorkerAdapter, headless, and strict CSP keywords so agents do not default to browser-only patterns that fail in production embeds or edge renderers.1.3kinstalls23Pixijs Scene Gifpixijs-scene-gif is a focused PixiJS v8 reference for solo builders dropping animated GIFs into games, interactive ads, or rich web experiences. It walks through the non-obvious loader registration, explains why Assets.load on a .gif yields GifSource instead of Texture, and shows how GifSprite extends Sprite as a leaf node you should wrap in Containers when grouping. Playback tuning—autoPlay, loop, animationSpeed—and frame-level callbacks let you sync HUD states or cutscenes without ad-hoc timers. The skill also flags the cost model: each frame becomes its own canvas texture, so performance-sensitive loops should migrate to spritesheets with AnimatedSprite. Triggers align with GifSprite, GifSource, constructor options, and event hooks named in SKILL.md. Assumes you already understand pixijs-scene-core-concepts for the display list. Use during Build when GIF fidelity matters more than atlas prep time.1.2kinstalls24Pixijs Accessibilitypixijs-accessibility is an agent skill for solo and indie builders shipping PixiJS v8 games or interactive web experiences who need real screen-reader and keyboard paths on canvas content. It walks through enabling the renderer AccessibilitySystem, turning on accessibility after init when needed, and marking sprites and containers with titles, hints, and tab order so the engine mirrors interactive elements in a shadow DOM layer. The guidance covers default Tab activation, optional immediate enablement, mobile touch-hook activation, and how accessibleChildren groups nested UI for assistive traversal. You install it when triggers mention accessibility, a11y, ARIA, keyboard navigation, or AccessibilitySystem options—not when your UI is plain HTML. It complements related PixiJS skills for application bootstrap, events, and HTML-on-canvas patterns so agents do not treat the canvas as an opaque bitmap for users relying on assistive technology.1.2kinstalls25Pixijs Migration V8Pixijs-migration-v8 is an agent skill that walks indie builders through PixiJS v8 breaking changes after living on v7. It is for anyone hitting broken builds from @pixi sub-packages, beginFill/endFill, cacheAsBitmap, or BaseTexture assumptions after bumping the dependency. The skill frames work as a category checklist you execute top-down so imports, async app initialization, Graphics fill and stroke, text constructors, events, shaders, filters, and destroy patterns are not missed in random order. It pairs conceptually with sibling Pixi skills for application setup, scene graphics, custom rendering, text, and performance. Use it when triggers mention v8 migration, DisplayObject removal, or deprecated Pixi APIs—not for greenfield Pixi tutorials. The outcome is a v8-aligned codebase that compiles and renders with the single-package model and modern Graphics API.1.1kinstalls