Pixijs Scene Graphics
Draw and style vector shapes, paths, gradients, and SVG in PixiJS v8 without mixing up the shape-then-fill Graphics API.
Overview
pixijs-scene-graphics is an agent skill for the Build phase that teaches the PixiJS v8 Graphics API for vector shapes, paths, fills, strokes, holes, gradients, and SVG workflows.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-scene-graphicsWhat is this skill?
- Shape-then-fill pattern: rect, circle, poly, star, roundRect, chamferRect, then fill, stroke, and cut
- Path API: moveTo, lineTo, bezierCurveTo, arc, arcToSvg, closePath, plus holes via beginHole
- FillGradient linear/radial, FillPattern, shared GraphicsContext, clone, clear, bounds
- SVG import/export (graphicsContextToSvg), containsPoint hit testing, draw-time transforms with save/restore
Adoption & trust: 1.4k installs on skills.sh; 206 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building a PixiJS v8 scene but the Graphics API’s shape-then-fill model, holes, gradients, and shared GraphicsContext behavior are easy to get wrong.
Who is it for?
Indie game or canvas developers who already use PixiJS and need precise vector-drawing guidance during feature work.
Skip if: Teams not using PixiJS v8, or builders who only need high-level scene graph setup without custom vector drawing.
When should I use this skill?
Drawing vector shapes and paths in PixiJS v8 with Graphics, fills, strokes, holes, gradients, SVG, or hit testing.
What do I get? / Deliverables
After the skill runs, your agent emits correct chained Graphics calls with fills, strokes, hit tests, and optional SVG import/export aligned with v8 conventions.
- Idiomatic PixiJS v8 Graphics drawing code
- SVG or styled vector primitives as specified
Recommended Skills
Journey fit
How it compares
Use for leaf-node Graphics reference—not the broader pixijs-scene-core-concepts scene-graph primer.
Common Questions / FAQ
Who is pixijs-scene-graphics for?
Solo builders and small teams implementing 2D games or interactive graphics in PixiJS v8 who need accurate Graphics, GraphicsContext, and styling patterns.
When should I use pixijs-scene-graphics?
Use it during Build (frontend) when you draw shapes, paths, gradients, holes, SVG export, or hit testing with Graphics in PixiJS v8.
Is pixijs-scene-graphics safe to install?
Review the Security Audits panel on this Prism page for license and file-hash signals before adding the skill to your agent workspace.
SKILL.md
READMESKILL.md - Pixijs Scene Graphics
`Graphics` is the vector-drawing leaf of the PixiJS v8 scene graph. The v8 API follows a shape-then-style pattern: draw a shape or path with `rect`, `circle`, `moveTo`, etc., then apply `fill` and/or `stroke`. Every method returns `this` for chaining, and the drawing instructions live on a `GraphicsContext` that can be shared between instances. Assumes familiarity with `pixijs-scene-core-concepts`. `Graphics` is a leaf: do not nest children inside it. Wrap multiple `Graphics` objects in a `Container` to group them. ## Quick Start ```ts const g = new Graphics(); g.rect(10, 10, 200, 100) .fill({ color: 0x3498db, alpha: 0.8 }) .stroke({ width: 3, color: 0x2c3e50 }); g.circle(300, 60, 40).fill(0xe74c3c); g.moveTo(50, 200) .lineTo(200, 200) .bezierCurveTo(250, 250, 100, 300, 50, 250) .closePath() .fill(0x6c5ce7); app.stage.addChild(g); ``` **Related skills:** `pixijs-scene-core-concepts` (scene graph basics), `pixijs-scene-container` (group graphics with other objects), `pixijs-scene-core-concepts/references/masking.md` (Graphics as a stencil mask), `pixijs-filters` (effects), `pixijs-performance` (batching, `cacheAsTexture`). ## Constructor options All `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`. Leaf-specific options added by `GraphicsOptions`: | Option | Type | Default | Description | | ------------- | ----------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `context` | `GraphicsContext` | new `GraphicsContext()` | Shared drawing context. Passing a context reuses its tessellated geometry across multiple `Graphics` nodes, avoiding duplicate GPU work. If omitted, each `Graphics` creates and owns a new context. | | `roundPixels` | `boolean` | `false` | Rounds the final on-screen `x`/`y` to the nearest pixel. Produces crisper lines for pixel-art styles at the cost of smooth sub-pixel movement. | The constructor also accepts a `GraphicsContext` instance as its sole argument (`new Graphics(ctx)`), which is shorthand for `new Graphics({ context: ctx })`. ## Core Patterns ### Shape-then-fill workflow ```ts const g = new Graphics(); g.rect(10, 10, 200, 100) .fill({ color: 0x3498db, alpha: 0.8 }) .stroke({ width: 3, color: 0x2c3e50 }); g.circle(150, 200, 40).fill(0xe74c3c); g.roundRect(300, 10, 150, 80, 12).fill(0x2ecc71); g.poly([0, 0, 60, 0, 30, 50], true).fill(0x9b59b6); g.star(4