# Pixijs 2d

Fast, lightweight 2D rendering engine for creating interactive graphics, particle...

- Repository: https://github.com/freshtechbro/claudedesignskills (1210 stars)
- Category: Design
- License: MIT
- Last updated: 2025-11-20
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add freshtechbro/claudedesignskills --skill pixijs-2d -g -a claude-code -y`
Codex: `npx skills add freshtechbro/claudedesignskills --skill pixijs-2d -g -a codex -y`
Cursor: `npx skills add freshtechbro/claudedesignskills --skill pixijs-2d -g -a cursor -y`
Gemini CLI: `npx skills add freshtechbro/claudedesignskills --skill pixijs-2d -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add freshtechbro/claudedesignskills`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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');

The rest: https://github.com/freshtechbro/claudedesignskills/blob/HEAD/.claude/skills/pixijs-2d/SKILL.md