К основному содержанию
скилл CX Codex

pixijs — скилл для Claude Code: что делает и как установить

Маршрутизирует задачи по PixiJS v8 к специализированным инструкциям рендеринга и сцены.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add pixijs/pixijs-skills --skill pixijs -a claude-code
Открыть на GitHub

Что делает pixijs

Скилл служит точкой входа для экосистемы PixiJS v8. Он разбирает задачу разработчика и загружает нужный SKILL.md под конкретный контекст. Сюда входят инструкции по настройке Application и обновлению проектов с ветки v7.

Внутри зашита таблица маршрутизации по модулям рендеринга на WebGL или WebGPU. Инструкции охватывают кастомные шейдеры GlProgram и обработку событий ввода. Если метод редкий, скилл обращается к индексу документации.

Для сложных сцен придётся сразу выбрать подходящий узел: Container или специализированный ParticleContainer. Это спасёт от лишних перерисовок.

Какие задачи решает

  • настроить приложение Application с рендерером WebGPU или WebGL
  • перенести проект с PixiJS v7 на v8
  • оптимизировать отрисовку спрайтов через ParticleContainer
  • создать кастомный шейдер через GlProgram или GpuProgram

Примеры запросов агенту

  • Создай сцену PixiJS v8 с ParticleContainer для движущихся спрайтов.
  • Помоги переписать вызовы beginFill на синтаксис PixiJS v8.
  • Настрой Application с поддержкой WebGPU и опиши загрузку через Assets.load.

Как установить pixijs

1Через Skills CLI (Vercel)

npx skills add pixijs/pixijs-skills --skill pixijs -a claude-code

2Вручную: положить файлы

~/.claude/skills/pixijs/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/pixijs/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о pixijs

Как установить pixijs в Claude Code?

Выполните команду npx skills add pixijs/pixijs-skills --skill pixijs -a claude-code. Агент получит инструкции по маршрутизации задач.

Что делает скилл pixijs?

Он распознаёт задачу по PixiJS v8 и загружает подходящие инструкции для сцены, рендерера или шейдеров.

Как скилл помогает при переходе с v7 на v8?

Он направляет к правилам миграции, заменяя устаревшие классы вроде DisplayObject и старые методы заливки beginFill.

Исходный текст

SKILL.md · MIT
---
name: pixijs
description: "Use this skill first for ANY PixiJS v8 task; it routes to the right specialized skill for the job. Covers the full PixiJS surface: Application setup, the scene graph (Container, Sprite, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite), rendering (WebGL/WebGPU/Canvas, render loop, custom shaders, filters, blend modes), assets, events, color, math, ticker, accessibility, performance, environments, migration from v7, and project scaffolding. Triggers on: pixi, pixi.js, pixijs, PixiJS, v8, Application, app.init, Sprite, Container, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite, Assets, Ticker, renderer, WebGL, WebGPU, scene graph, filter, shader, blend mode, texture, 3D texture, depth slice, layer, storage texture, BitmapText, create-pixi, how do I draw, how do I render, how do I animate in pixi."
license: MIT
---

Entry point for the PixiJS v8 skill collection. PixiJS is the fastest library available for the web, working across all devices and allowing you to create rich, interactive graphics and cross-platform applications using WebGL, WebGPU, and Canvas as a fallback.

## How to use this skill

1. Find the specialized skill in the router below that best matches the task.
2. Load that skill's `SKILL.md` and follow its guidance.
3. If no sub-skill fits (the task references a specific class, function, option, or API surface not listed below), **WebFetch `https://pixijs.download/release/docs/llms.txt`**. That file is the auto-generated, always-current index of the full PixiJS API and guides. Each entry links to a `.html.md` page you can WebFetch for the detailed content.

For the long-form description and trigger keywords of every skill, see [references/index.md](references/index.md).

## Skill router

### Foundations

| Skill | Load when... |
|---|---|
| [pixijs-application](../pixijs-application/SKILL.md) | Creating or configuring a PixiJS `Application`, calling `app.init()`, accessing `app.stage`/`renderer`/`canvas`/`screen`, resize/ticker plugins, `app.destroy()`. |
| [pixijs-core-concepts](../pixijs-core-concepts/SKILL.md) | Understanding the renderer pipeline, choosing WebGL/WebGPU/Canvas, render loop internals, systems and pipes, renderer loader extensions, rendering into a `RenderTexture`/`RenderTarget` (`flipY`, `mipLevel`, `layer`, `bind`/`push`/`pop`, depth) or a depth slice of a 3D texture, WebGL context loss and WebGPU device loss. |
| [pixijs-create](../pixijs-create/SKILL.md) | Scaffolding a new project with the `create-pixi` CLI (bundler-vite, creation-web, framework-react templates), adding PixiJS to an existing project, or setting up `tsconfig.json` for TypeScript 5, 6, or 7 (`moduleResolution`, `@webgpu/types`, `@types/web`). |
| [pixijs-environments](../pixijs-environments/SKILL.md) | Running PixiJS in Web Workers, Node/SSR, or strict-CSP contexts (`DOMAdapter`, `WebWorkerAdapter`, `pixi.js/unsafe-eval`). |
| [pixijs-migration-v8](../pixijs-migration-v8/SKILL.md) | Upgrading from v7 to v8 or fixing v7 patterns (`beginFill`/`endFill`, `@pixi/*` packages, `BaseTexture`, `DisplayObject`). |
| [pixijs-scene-core-concepts](../pixijs-scene-core-concepts/SKILL.md) | Understanding the scene graph as a whole: containers vs leaves, transforms, render order, masking, `RenderLayer`. |

### Scene Objects

| Skill | Load when... |
|---|---|
| [pixijs-scene-container](../pixijs-scene-container/SKILL.md) | Working with `Container`: `addChild`/`removeChild`, transforms, `zIndex`, bounds, `toGlobal`/`toLocal`, `destroy`. |
| [pixijs-scene-sprite](../pixijs-scene-sprite/SKILL.md) | Drawing images: `Sprite`, `AnimatedSprite`, `NineSliceSprite`, `TilingSprite`. |
| [pixijs-scene-graphics](../pixijs-scene-graphics/SKILL.md) | Drawing vector shapes or paths: `Graphics`, `GraphicsContext`, `fill`/`stroke`, `FillGradient`, `FillPattern`, `textureSpace`, texture and pattern fills, SVG import (`svg()`, gradients). |
| [pixijs-scene-text](../pixijs-scene-text/SKILL.md) | Rendering text: `Text`, `BitmapText`, `HTMLText`, `SplitText`, `TextStyle`. |
| [pixijs-scene-mesh](../pixijs-scene-mesh/SKILL.md) | Custom geometry: `Mesh`, `MeshSimple`, `MeshPlane`, `MeshRope`, `PerspectiveMesh`. |
| [pixijs-scene-particle-container](../pixijs-scene-particle-container/SKILL.md) | Rendering thousands of lightweight sprites: `ParticleContainer`, `Particle`, `dynamicProperties`. |
| [pixijs-scene-dom-container](../pixijs-scene-dom-container/SKILL.md) | Overlaying HTML elements on the canvas: `DOMContainer`, `pixi.js/dom`. |
| [pixijs-scene-gif](../pixijs-scene-gif/SKILL.md) | Displaying animated GIFs: `GifSprite`, `GifSource`, `pixi.js/gif`. |
| [pixijs-html-source](../pixijs-html-source/SKILL.md) | Rendering live HTML/DOM elements or snapshots as textures (experimental, needs a browser that supports the HTML-in-Canvas spec): `HTMLSource`, `ElementImageSource`, `pixi.js/html-source`, `requestPaint`. |

### Utilities

| Skill | Load when... |
|---|---|
| [pixijs-assets](../pixijs-assets/SKILL.md) | Loading resources: `Assets.init`, `Assets.load`, bundles, manifests, spritesheets, caching. |
| [pixijs-color](../pixijs-color/SKILL.md) | Creating or converting colors: `Color` class, hex/rgb/hsl, `tint`, `premultiply`. |
| [pixijs-events](../pixijs-events/SKILL.md) | Handling pointer/mouse/touch/wheel input: `eventMode`, `FederatedEvent`, `hitArea`, `cursor`, drag. |
| [pixijs-math](../pixijs-math/SKILL.md) | Points, vectors, matrices, shapes, hit testing: `Point`, `Matrix`, `Rectangle`, `Polygon`, `Triangle`, `strokeContains`, `containsRect`, `Matrix.decompose` (mirrored matrices), `toGlobal`/`toLocal`. |
| [pixijs-ticker](../pixijs-ticker/SKILL.md) | Per-frame logic or controlling the render loop: `Ticker`, `deltaTime`, `UPDATE_PRIORITY`, `maxFPS`. |

### Advanced

| Skill | Load when... |
|---|---|
| [pixijs-accessibility](../pixijs-accessibility/SKILL.md) | Screen reader or keyboard navigation: `AccessibilitySystem`, `accessibleTitle`, `tabIndex`. |
| [pixijs-blend-modes](../pixijs-blend-modes/SKILL.md) | Compositing with blend modes: `add`, `multiply`, `screen`, `overlay`, `pixi.js/advanced-blend-modes`. |
| [pixijs-custom-rendering](../pixijs-custom-rendering/SKILL.md) | Writing custom shaders, uniforms, or batchers: `Shader.from`, `GlProgram`/`GpuProgram`, `UniformGroup`, custom `Filter`, WGSL `override` constants, `gpuLayout`, `TextureView`, `Buffer.update`, `TexturePool`, 3D/array textures, storage textures, render bundles, custom pipes. |
| [pixijs-filters](../pixijs-filters/SKILL.md) | Applying visual effects: `BlurFilter`, `ColorMatrixFilter`, `DisplacementFilter`, `Filter.from`, `pixi-filters`. |
| [pixijs-performance](../pixijs-performance/SKILL.md) | Profiling or optimizing FPS, draw calls, GPU memory: culling, `GCSystem`, `cacheAsTexture`, object pooling, transient MSAA render textures, render bundles, filter texture sizing. |

## Fallback: canonical PixiJS docs

If the task references a class, function, option, or API surface not covered by any sub-skill above, **WebFetch `https://pixijs.download/release/docs/llms.txt`**. It's the auto-generated index of the full PixiJS API and guides, regenerated on every release. Each entry links to a `.html.md` page you can WebFetch for the detailed content. Use this fallback whenever the router table doesn't point at an obvious match.

© pixijs · MIT · pixijs/pixijs-skills

Похожие скиллы

Всё по теме «Фронтенд и UI» →
pixijs-2d freshtechbro Скилл обучает агента создавать 2D-графику на PixiJS с WebGL и WebGPU: анимировать спрайты, выводить частицы и рисовать векторные фигуры на холсте. CX Codex +1 2 500установок pixijs-rendering gamedev-skills Скилл для сборки слоя рендера на PixiJS v8: асинхронный Application, загрузка текстур, сцена на Container, тикер и события указателя. CX Codex +1 5 400установок pixi-js Mindrally Скилл для ИИ-агента: подсказывает, как писать игры на Pixi.js с TypeScript и оптимизировать их под веб и мобильные устройства. CX Codex +1 948установок playcanvas-engine freshtechbro Помогает настраивать трёхмерные сцены и веб-игры на движке PlayCanvas с архитектурой ECS. Пригодится при разработке интерактивной 3D-графики на WebGL и WebGPU. CX Codex +1 2 300установок game-setup-and-config phaserjs Скилл помогает инициализировать инстанс Phaser 4 и собрать объект GameConfig с нужным рендерером, масштабированием и FPS. Пригодится при настройке канваса и пиксель-арта. CX Codex +1 1 200установок mint-threejs-skills mintdotgg Набор инструкций для создания браузерных 3D-приложений, игр и вьюверов на Three.js с генерацией моделей через Mint MCP. Помогает настроить пайплайн ассетов и рендеринг без рутины. CX Codex +1 616установок

Из того же набора25

pixijs-scene-graphics Скилл помогает ИИ-агенту писать код для векторной графики в PixiJS v8. Пригодится при рисовании фигур, контуров, градиентов и заливок по правилам обновлённого API. CX Codex +1 6 000установок pixijs-core-concepts Объясняет, как PixiJS v8 рисует кадры: выбор бэкенда, цикл рендера, работа с RenderTexture и потеря контекста. CX Codex +1 6 000установок pixijs-performance Скилл для профилирования и ускорения PixiJS v8: FPS, draw calls, память GPU. Пригодится, когда приложение тормозит или течёт память. CX Codex +1 6 000установок pixijs-application Помогает настроить приложение PixiJS v8 через асинхронный app.init(). Пригодится при сборке холста, подключении WebGPU или WebGL и настройке ресайза. CX Codex +1 6 000установок pixijs-scene-container Скилл по работе с узлом Container в PixiJS v8: группировка объектов сцены, трансформация, сортировка по zIndex и управление дочерними элементами. CX Codex +1 5 900установок pixijs-scene-sprite Скилл объясняет агенту, как рисовать изображения в PixiJS v8: Sprite, AnimatedSprite, NineSliceSprite и TilingSprite. Пригодится, когда в проекте уже есть PixiJS и нужно быстро получить рабочий код отрисовки. CX Codex +1 5 900установок pixijs-events Скилл для работы с указателем, мышью, тачем и колесом в PixiJS v8: режимы eventMode, типы FederatedEvent, всплытие и перехват, hitArea, курсоры, drag через globalpointermove. CX Codex +1 5 900установок pixijs-assets Скилл учит агента загружать ассеты в PixiJS v8 через синглтон Assets. Помогает настроить бандлы, шрифты, спрайтшиты и парсеры для ссылок без расширений. CX Codex +1 5 900установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой