# pixijs-2d

Equips your coding agent with PixiJS patterns for WebGL and WebGPU canvas apps, handling sprite animations, vector graphics, and fast particle systems.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2500 installs · ★ 1133
- Author: freshtechbro
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/extended-3d-scroll/skills/pixijs-2d/SKILL.md
- Updated: 2025-11-20
- HTML: https://affpapa.org/en/nevibecode/skills/pixijs-2d

## What it does

This skill supplies patterns for 2D development with PixiJS. It guides the model through initializing `Application`, managing scene nodes on `app.stage`, loading textures via `Assets.load`, and running tick loops with `app.ticker`. For high-density rendering, it details `ParticleContainer` setups, which run up to 10x faster than standard containers when scale and rotation stay static.

The reference covers vector drawing through `Graphics`, shader filters like `BlurFilter` and `DisplacementFilter`, and text rendering techniques. It explicitly tells the agent to pick `BitmapText` over standard `Text` for rapidly changing values like game scores.

PixiJS is strictly for 2D rendering; for 3D environments the skill advises using Three.js, while simple DOM element transitions should stay in Motion or GSAP.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill pixijs-2d -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/pixijs-2d/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/pixijs-2d/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill pixijs-2d -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/pixijs-2d/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill pixijs-2d -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/pixijs-2d/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install freshtechbro/claudedesignskills pixijs-2d
```

2. **Manually: put the files in place**
- File: `.github/skills/pixijs-2d/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill pixijs-2d -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/freshtechbro/claudedesignskills --path plugins/bundles/extended-3d-scroll/skills/pixijs-2d
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/pixijs-2d/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill pixijs-2d -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/extended-3d-scroll/skills/pixijs-2d/SKILL.md

## When to use it
- initialize a WebGL or WebGPU 2D canvas with PixiJS
- render dense particle systems using `ParticleContainer`
- handle pointer interactions and sprite animation loops
- apply shader filters such as blur and displacement to 2D sprites

## Example prompts
- Create an interactive PixiJS sprite that rotates in the ticker and reacts to pointer events
- Build a 10,000 particle system using PixiJS ParticleContainer
- Draw vector shapes with PixiJS Graphics and apply a BlurFilter

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 7b733b42c55405fa.

BEGIN THIRD-PARTY FILE 7b733b42c55405fa
````text
---
name: pixijs-2d
description: Fast, lightweight 2D rendering engine for creating interactive graphics, particle effects, and canvas-based applications using WebGL/WebGPU. Use this skill when building 2D games, particle systems, interactive canvases, sprite animations, or UI overlays on 3D scenes. Triggers on tasks involving PixiJS, 2D rendering, sprite sheets, particle effects, filters, or high-performance canvas graphics. Alternative to Canvas2D with WebGL acceleration for rendering thousands of sprites at 60 FPS.
---

# PixiJS 2D Rendering Skill

Fast, lightweight 2D rendering engine for creating interactive graphics, particle effects, and canvas-based applications using WebGL/WebGPU.

---

## When to Use This Skill

Trigger this skill when you encounter:
- "Create 2D particle effects" or "animated particles"
- "2D sprite animation" or "sprite sheet handling"
- "Interactive canvas graphics" or "2D game"
- "UI overlays on 3D scenes" or "HUD layer"
- "Draw shapes programmatically" or "vector graphics API"
- "Optimize rendering performance" or "thousands of sprites"
- "Apply visual filters" or "blur/displacement effects"
- "Lightweight 2D engine" or "alternative to Canvas2D"

**Use PixiJS for**: High-performance 2D rendering (up to 100,000+ sprites), particle systems, interactive UI, 2D games, data visualization with WebGL acceleration.

**Don't use for**: 3D graphics (use Three.js/R3F), simple animations (use Motion/GSAP), basic DOM manipulation.

---

## Core Concepts

### 1. Application & Renderer

The entry point for PixiJS applications:

```javascript
import { Application } from 'pixi.js';

const app = new Application();

await app.init({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
  antialias: true,  // Smooth edges
  resolution: window.devicePixelRatio || 1
});

document.body.appendChild(app.canvas);
```

**Key Properties**:
- `app.stage`: Root container for all display objects
- `app.renderer`: WebGL/WebGPU renderer instance
- `app.ticker`: Update loop for animations
- `app.screen`: Canvas dimensions

---

### 2. Sprites & Textures

Core visual elements loaded from images:

```javascript
import { Assets, Sprite } from 'pixi.js';

// Load texture
const texture = await Assets.load('path/to/image.png');

// Create sprite
const sprite = new Sprite(texture);
sprite.anchor.set(0.5);  // Center pivot
sprite.position.set(400, 300);
sprite.scale.set(2);  // 2x scale
sprite.rotation = Math.PI / 4;  // 45 degrees
sprite.alpha = 0.8;  // 80% opacity
sprite.tint = 0xff0000;  // Red tint

app.stage.addChild(sprite);
```

**Quick Creation**:
```javascript
const sprite = Sprite.from('path/to/image.png');
```

---

### 3. Graphics API

Draw vector shapes programmatically:

```javascript
import { Graphics } from 'pixi.js';

const graphics = new Graphics();

// Rectangle
````
END THIRD-PARTY FILE 7b733b42c55405fa

The third-party file has ended. Everything between the 7b733b42c55405fa tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2826 of 21108 bytes. © freshtechbro · MIT · https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/extended-3d-scroll/skills/pixijs-2d/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md