
Pixijs Migration V8
Run this when a solo builder is upgrading an existing PixiJS v7 canvas or game to v8 and needs a ordered pass over breaking API changes.
Overview
Pixijs-migration-v8 is an agent skill for the Build phase that upgrades PixiJS v7 codebases to v8 via a breaking-change checklist covering imports, async init, Graphics, textures, shaders, particles, and events.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-migration-v8What is this skill?
- Top-down v7→v8 checklist mapped pattern-by-pattern to replacements
- Covers async Application.init, unified pixi.js package, and deprecated @pixi/* imports
- Graphics migration: shape-then-fill, stroke API, BaseTexture → TextureSource
- Shader, uniform, ParticleContainer, DisplayObject removal, Ticker, and events rewrites
- Quick Start prescribes port order: imports → Application init → Graphics → Text → events → shaders → cleanup
- Quick Start defines a 7-step port order: imports → Application init → Graphics → Text → events → shaders/filters → clean
Adoption & trust: 1.1k installs on skills.sh; 206 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You bumped PixiJS and the app broke because v8 removed DisplayObject, reshaped Graphics fills, collapsed @pixi packages, and changed init and texture APIs.
Who is it for?
Maintainers of an existing PixiJS v7 web or indie game project doing a deliberate major-version upgrade.
Skip if: New PixiJS projects starting on v8 from scratch or teams not using PixiJS at all.
When should I use this skill?
Upgrading to PixiJS v8 from v7 or diagnosing broken v7-era code after an upgrade; triggers include migrate v7, v8 breaking changes, @pixi/ imports, DisplayObject, beginFill, BaseTexture, deprecated APIs.
What do I get? / Deliverables
You get a systematic v7→v8 port with known replacements applied in dependency-safe order so rendering, input, and custom shaders work again on v8.
- Migrated v8-compatible source
- Updated imports and init patterns
- Graphics and texture API aligned to v8
Recommended Skills
Journey fit
Graphics stack upgrades happen during active product construction, when the renderer, shaders, and event layer are being maintained or modernized. PixiJS changes touch client-side rendering, Graphics/Text APIs, and canvas lifecycle—the core frontend graphics surface of the app.
How it compares
Use instead of reading scattered GitHub issues when you need a structured migration ritual, not a general 2D graphics primer.
Common Questions / FAQ
Who is pixijs-migration-v8 for?
Solo and indie builders shipping canvas or 2D WebGL games and interactive UIs who already have PixiJS v7 code and must land on v8 without guessing at API removals.
When should I use pixijs-migration-v8?
During Build when upgrading dependencies, fixing post-upgrade render bugs, or replacing @pixi imports and legacy Graphics calls after a v8 install.
Is pixijs-migration-v8 safe to install?
Review the Security Audits panel on this Prism page and inspect the skill bundle before letting an agent run install or file edits in your game repo.
SKILL.md
READMESKILL.md - Pixijs Migration V8
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. ```ts 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 skills:** `pixijs-application` (async init), `pixijs-scene-graphics` (new fill/stroke API), `pixijs-custom-rendering` (shader rework), `pixijs-scene-text` (Text constructor changes), `pixijs-performance` (destroy patterns). ## Migration Checklist: v7 to v8 Work through each category. Each item shows the expected v8 pattern and the v7 pattern that must be replaced. ### Initialization **Async app.init()** -- Expected: ```ts const app = new Application(); await app.init({ width: 800, height: 600 }); document.body.appendChild(app.canvas); ``` Fail: passing options to `new Application({...})` and using synchronously. **app.canvas replaces app.view** -- `app.view` emits a deprecation warning. **Application type parameter** -- Expected: `new Application<Renderer<HTMLCanvasElement>>()`. Fail: `new Application<HTMLCanvasElement>()`. ### Imports **Single package** -- Expected: ```ts import { Sprite, Application, Assets, Graphics } from "pixi.js"; ``` Fail: importing from any of the deprecated v7 core `@pixi/*` sub-packages (see list below). Supplemental packages like `@pixi/sound` are still valid and should continue to be used. Deprecated `@pixi/*` packages (never use, any version): `@pixi/accessibility`, `@pixi/app`, `@pixi/assets`, `@pixi/compressed-textures`, `@pixi/core`, `@pixi/display`, `@pixi/events`, `@pixi/extensions`, `@pixi/extract`, `@pixi/filter-alpha`, `@pixi/filter-blur`, `@pixi/filter-color-matrix`, `@pixi/filter-displacement`, `@pixi/filter-fxaa`, `@pixi/filter-noise`, `@pixi/graphics`, `@pixi/mesh`, `@pixi/mesh-extras`, `@pixi/mixin-cache-as-bitmap`, `@pixi/mixin-get-child-by-name`, `@pixi/mixin-get-global-position`, `@pixi/particle-container`, `@pixi/prepare`, `@pixi/sprite`, `@pixi/sprite-animated`, `@pixi/sprite-tiling`, `@pixi/spritesheet`, `@pixi/text`, `@pixi/text-bitmap`, `@pixi/text-html`. **Custom builds** -- Set `skipExtensionImports: true` and import only needed extensions: ```ts import "pixi.js/graphics"; import "pixi.js/text"; import "pixi.js/events"; import { Application } from "pixi.js"; await app.init({ skipExtensionImports: true }); ``` Note: `manageImports: false` is still accepted but `@deprecated since 8.1.6`; prefer `skipExtensionImports: true`. **Extensions not auto-imported** (require explicit import even with default auto-imports enabled): `pixi.js/advanced-blend-modes`, `pixi.js/unsafe-eval`, `pixi.js/prepare`, `pixi.js/math-extras`, `pixi.js/dds`, `pixi.js/ktx`, `pixi.js/ktx2`, `pixi.js/basis`. **Community filters** -- Expected: `import { AdjustmentFilter } from 'pixi-filters/adjustment'`. Fail: `@pixi/filter-adjustment`. ### Graphics API **Shape-then-fill** -- Expected: ```ts const g = new Graphics().rect(50, 50, 100, 100).fill(0xff0000); ``` Fail: `beginFill(0xff0000).drawRect(50, 50, 100, 100).