# pixijs-blend-modes

Скилл подсказывает агенту, как смешивать объекты PixiJS v8 через blendMode: стандартные режимы, продвинутые и порядок для батчинга.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 5700 установок · ★ 358
- Автор: pixijs
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-blend-modes/SKILL.md
- Обновлён: 2026-10-01
- HTML: https://affpapa.org/nevibecode/skills/pixijs-blend-modes

## Что делает

Скилл включается, когда в коде PixiJS v8 появляется `blendMode`. Агент получает готовые шаблоны: стандартные режимы (`normal`, `add`, `multiply`, `screen`, `erase`, `min`, `max`) работают на GPU-уравнениях и стоят дёшево, а продвинутые вроде `color-burn` или `overlay` подключаются импортом `pixi.js/advanced-blend-modes` и идут через фильтры.

Главная ловушка — тихий откат. Забыли импорт расширения или не включили `useBackBuffer: true` при инициализации на WebGL — режим молча превращается в `normal`, а в консоли появляется предупреждение. В v8 нет рантайм-энума `BLEND_MODES`, только строковый тип, поэтому старый `BLEND_MODES.ADD` из v7 упадёт с ошибкой.

Ещё скилл разбирает порядок детей в контейнере. Смена режима разрывает батч: два объекта с `screen` подряд дают 2 draw call, а чередование `screen / normal / screen / normal` — уже 4. Продвинутые режимы завязаны на `Filter.defaultOptions` с разрешением 1, поэтому на high-DPI цели объект может выглядеть обрезанным или отрисованным частично — это повод проверить разрешение фильтра.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-blend-modes -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/pixijs-blend-modes/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/pixijs-blend-modes/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-blend-modes -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/pixijs-blend-modes/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-blend-modes -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/pixijs-blend-modes/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pixijs/pixijs-skills pixijs-blend-modes
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/pixijs-blend-modes/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-blend-modes -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/pixijs/pixijs-skills --path skills/pixijs-blend-modes
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/pixijs-blend-modes/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-blend-modes -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-blend-modes/SKILL.md

## Когда брать
- сложить glow-эффект из спрайтов через аддитивное смешивание
- затемнить сцену multiply-слоем без ручной правки пикселей
- подключить overlay и color-burn, которые не входят в стандартный набор
- переставить детей в контейнере, чтобы сократить число draw call
- перевести код с энума BLEND_MODES из v7 на строки v8

## Примеры запросов агенту
- Настрой спрайту свечения blendMode add и добавь его на сцену
- Подключи pixi.js/advanced-blend-modes и поставь оверлею color-burn
- Переупорядочи детей контейнера так, чтобы объекты с одинаковым blendMode шли подряд

## Похожие
- [pixijs-2d](https://affpapa.org/nevibecode/skills/pixijs-2d.md) — скилл · 2500 установок
- [threejs-postprocessing](https://affpapa.org/nevibecode/skills/threejs-postprocessing.md) — скилл · 13700 установок
- [pixijs-rendering](https://affpapa.org/nevibecode/skills/pixijs-rendering.md) — скилл · 5400 установок
- [shader-dev](https://affpapa.org/nevibecode/skills/minimax-ai-shader-dev.md) — скилл · 2500 установок
- [glsl](https://affpapa.org/nevibecode/skills/glsl.md) — скилл · 369 установок
- [threejs-animation](https://affpapa.org/nevibecode/skills/threejs-animation.md) — скилл · 20400 установок

Из того же набора: [pixijs/pixijs-skills](https://affpapa.org/nevibecode/by/pixijs/pixijs-skills.md) — 26 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md