# swiftui-graphics

Скилл для продвинутой графики SwiftUI: Metal-шейдеры, .visualEffect, Liquid Glass из iOS 26 и Canvas. Пригодится, когда встроенных модификаторов уже не хватает.

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

## Что делает

Скилл помогает агенту выбрать правильный API под задачу. Внутри есть дерево решений: пиксельная работа с цветом — `.colorEffect`, смещение пикселей — `.distortionEffect`, слой с наложением — `.layerEffect`, реакция на геометрию вью — `.visualEffect`, своя отрисовка — `Canvas`, стекло в iOS 26 — `.glassEffect()` и `GlassEffectContainer`. Порядок такой: сначала встроенные модификаторы, потом `.visualEffect`, затем `Canvas`, и только в конце Metal-шейдер.

Шейдеры подключаются через `.metal`-файл в таргете приложения. Функции помечаются атрибутом `[[ stitchable ]]`, а SwiftUI сам создаёт привязку через `ShaderLibrary.<имя>`. Одна библиотека на таргет, аргументы передаются как `.float`, `.float2`, `.color`, `.image`. В скилле разобраны три готовых рецепта: рябь на `.layerEffect`, голографический перелив на `.colorEffect` и CRT-развёртка со сканлайнами. Для каждого показан и Metal-код, и вызов из Swift.

Есть жёсткое ограничение по платформам. Шейдерные модификаторы работают с iOS 17.0+, iPadOS 17.0+, Mac Catalyst 17.0+, macOS 14.0+, tvOS 17.0+ и visionOS 1.0+, а на watchOS их нет — там придётся откатываться на градиенты, размытие или `Canvas`. В `maxSampleOffset` для `.layerEffect` занизишь значение — получишь обрезку по краям вью, завысишь — зря потратишь GPU. У `.layerEffect` есть ещё один нюанс: он самый дорогой из трёх слотов, потому что умеет сэмплить в любой точке в пределах смещения.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill swiftui-graphics -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill swiftui-graphics -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill swiftui-graphics -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install AThevon/genjutsu swiftui-graphics
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill swiftui-graphics -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/AThevon/genjutsu --path skills/_jutsu/swiftui-graphics
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill swiftui-graphics -a opencode
```

### Claude.ai

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

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

## Когда брать
- сделать рябь от касания, которая смещает пиксели вокруг точки нажатия
- добавить голографический перелив на карточку с сохранением яркости
- наложить CRT-сканлайны и лёгкую хроматическую аберрацию на картинку
- выбрать между `.colorEffect`, `.distortionEffect` и `.layerEffect` под конкретный эффект
- реагировать на положение вью в скролле без `GeometryReader`

## Примеры запросов агенту
- Сделай рябь от касания через `.layerEffect` с шейдером `ripple`, амплитуду возьми 0.05
- Добавь голографический перелив на карточку через `.colorEffect` и `TimelineView(.animation)`
- Подскажи, какой модификатор взять для искажения позиции пикселей, а не цвета

## Похожие
- [vercel-react-native-skills](https://affpapa.org/nevibecode/skills/vercel-react-native-skills.md) — скилл · 255200 установок
- [animate-expo](https://affpapa.org/nevibecode/skills/animate-expo.md) — скилл · 137900 установок
- [mobile-native](https://affpapa.org/nevibecode/skills/mobile-native.md) — скилл · 86600 установок
- [aso](https://affpapa.org/nevibecode/skills/aso.md) — скилл · 75400 установок
- [swiftui-pro](https://affpapa.org/nevibecode/skills/swiftui-pro.md) — скилл · 35200 установок
- [orca-emulator](https://affpapa.org/nevibecode/skills/orca-emulator.md) — скилл · 5800 установок

Из того же набора: [athevon/genjutsu](https://affpapa.org/nevibecode/by/athevon/genjutsu.md) — 17 карточек

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