pixijs-migration-v8
This skill guides developers through upgrading PixiJS projects from version 7 to version 8, covering all breaking changes and API shifts. It provides a structured migration checklist and explains modern patterns for the fast WebGL-based 2D rendering engine. Perfect for teams maintaining graphics-heavy web applications.
pixijs-migration-v8 addresses the major API shifts between versions. Key breaking changes include the Graphics API moving from beginFill/endFill to a shape-then-fill pattern, deprecated @pixi/* sub-packages consolidating into a single pixi.js import, DisplayObject property removals, async App initialization, eventMode replacing the interactive property, and shader/uniform rework. The skill provides a complete checklist to systematically identify and fix each category of breakage in your codebase.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-04
pixijs-migration-v8 addresses the major API shifts between versions. Key breaking changes include the Graphics API moving from beginFill/endFill to a shape-then-fill pattern, deprecated @pixi/* sub-packages consolidating into a single pixi.js import, DisplayObject property removals, async App initialization, eventMode replacing the interactive property, and shader/uniform rework. The skill provides a complete checklist to systematically identify and fix each category of breakage in your codebase.
Use it when
- pixijs-migration-v8 guides you through a structured upgrade process.
- pixijs-migration-v8 explains the new Graphics API.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
pixijs/pixijs-skills/pixijs-migration-v8
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are the main pixijs breaking changes in v8?
pixijs-migration-v8 addresses the major API shifts between versions. Key breaking changes include the Graphics API moving from beginFill/endFill to a shape-then-fill pattern, deprecated @pixi/* sub-packages consolidating into a single pixi.js import, DisplayObject property removals, async App initialization, eventMode replacing the interactive property, and shader/uniform rework. The skill provides a complete checklist to systematically identify and fix each category of breakage in your codebase.
How do I upgrade pixi v7 to v8 in my project?
pixijs-migration-v8 guides you through a structured upgrade process. Start by updating your package.json to PixiJS v8, then work through the breaking changes checklist: migrate Graphics calls to the new shape-then-fill API, replace @pixi/* imports with pixi.js, update event handlers to use eventMode, fix Text constructor options, adapt shader uniforms, and handle async App initialization. The skill covers each migration step with concrete examples and common pitfalls to avoid.
What replaces pixi beginFill and endFill in v8?
pixijs-migration-v8 explains the new Graphics API. Instead of chaining beginFill().drawRect().endFill(), v8 uses a shape-then-fill pattern: you call a shape method like rect(), then apply fill() and stroke() separately. This provides clearer separation of concerns and more flexible styling. The skill shows side-by-side comparisons of v7 and v8 syntax, helping you quickly refactor your drawing code.
How do I migrate deprecated @pixi/* packages to pixi.js?
pixijs-migration-v8 covers package consolidation. In v7, you imported from @pixi/graphics, @pixi/text, @pixi/sprite, etc. In v8, all exports come from the single pixi.js package. Replace import statements like `import { Graphics } from '@pixi/graphics'` with `import { Graphics } from 'pixi.js'`. The skill lists the most commonly used sub-packages and their v8 equivalents, making the transition straightforward.
What shader and uniform changes does pixijs v8 require?
pixijs-migration-v8 addresses rendering pipeline updates. Shader uniforms, texture sources, and BaseTexture/TextureSource relationships have been reworked for better performance. The skill explains how to update uniform declarations, adapt TextureSource usage, and handle the new async initialization patterns. Event handler signatures and ticker callbacks have also changed; the skill shows the updated patterns for both.
What are common pixijs v8 migration mistakes to avoid?
pixijs-migration-v8 highlights frequent pitfalls: forgetting to await App.init() in async contexts, mixing old and new Graphics syntax in the same file, leaving @pixi/* imports after consolidation, not updating eventMode alongside removing interactive, and overlooking Text constructor option changes. The skill provides a checklist to catch these errors early, plus diagnostic techniques to fix broken code after upgrading.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
This skill is a breaking-change checklist for bringing a v7 codebase up to v8. Work top-down through the categories; the list maps each v7 pattern to its v8 replacement.
Quick Start
Install the single package, then port in this order: imports → Application init → Graphics → Text → events → shaders/filters → cleanup.
const app = new Application();
await app.init({ width: 800, height: 600 });
document.body.appendChild(app.canvas);
const g = new Graphics()
.rect(0, 0, 100, 100)
.fill({ color: 0xff0000 })
.stroke({ width: 2, color: 0x000000 });
app.stage.addChild(g);
**Related
(truncated - see the full file via the links below)
File tree — 1 file
skills/pixijs-migration-v8/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Upgrade PixiJS codebase from v7 to v8 with breaking change checklist”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Pixi.js is a lightweight 2D rendering engine that leverages WebGL for blazing-fast graphics performance. Perfect for creating games, data visualizations, and interactive experiences, it provides a straightforward API for sprites, animations, and effects without the overhead of heavier frameworks.
PixiJS is a high-performance 2D rendering engine built for the web. This skill collection guides agents through core PixiJS v8 concepts—from application initialization and scene management to advanced rendering techniques, custom shaders, and optimization strategies. Whether building interactive graphics or migrating from earlier versions, these skills provide structured pathways to solve rendering challenges efficiently.
Master input handling in PixiJS v8 by learning how to capture and respond to pointer, mouse, touch, and wheel events. This skill covers event binding techniques, listener management, and best practices for building responsive interactive graphics. Perfect for developers building games and applications with PixiJS's fast 2D rendering engine.
This skill equips you to bootstrap PixiJS v8 projects with modern async patterns, handling application setup and renderer initialization. Perfect for developers building 2D web games or interactive graphics who need a structured foundation for their rendering pipeline.
Master shader development for PixiJS v8 by writing custom GLSL and WGSL code with properly typed uniforms. This skill covers the shader pipeline, uniform management, and integration with PixiJS's rendering system to unlock advanced visual effects and performance optimization.
This skill teaches you how to leverage PixiJS v8's powerful filter system to enhance your 2D graphics with visual effects. You'll learn to apply filters to display objects, chain multiple effects together, and optimize performance when working with complex rendering scenarios. Master both built-in filters and custom implementations to bring professional polish to your WebGL and Canvas-based applications.
More skills pixijs-environments (MIT) · pixijs-accessibility (MIT) · pixijs-core-concepts (MIT) · pixijs-ticker (MIT) · pixijs-scene-core-concepts (MIT) · pixijs-application (MIT) · pixijs-blend-modes (MIT)