# morphing-icons

Скилл помогает создавать компоненты иконок, плавно перетекающих друг в друга за счёт трансформации трёх SVG-линий вместо обычного crossfade.

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

## Что делает

Скилл задаёт строгую архитектуру иконок: каждый символ состоит ровно из трёх SVG-линий. Если для рисунка нужно меньше штрихов (как для галочки или минуса), лишние линии сворачиваются в нулевую точку в центре координатной сетки (рекомендуется `14x14`). За счёт одинакового числа отрезков любые две иконки трансформируются друг в друга без перекрытия прозрачностью.

В правила входят группировка вариантов вращения, поддержка `useSpring` для естественной физики и обязательная проверка `prefers-reduced-motion` через `useReducedMotion`. Если иконки входят в одну группу (`group`), поворот анимируется плавно; если нет — угол меняется мгновенно.

Без строгого соблюдения правила трёх линий морфинг сломается. Пропускать или передавать `null` нельзя: допустимы только координаты свёрнутой точки. Также скилл проверяет наличие `aria-hidden="true"` и скругление концов через `strokeLinecap="round"`.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add raphaelsalaja/skill --skill morphing-icons -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add raphaelsalaja/skill --skill morphing-icons -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add raphaelsalaja/skill --skill morphing-icons -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install raphaelsalaja/skill morphing-icons
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add raphaelsalaja/skill --skill morphing-icons -a gemini-cli
```

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add raphaelsalaja/skill --skill morphing-icons -a opencode
```

### Claude.ai

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

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

## Когда брать
- построить векторный морфинг между иконками без использования crossfade
- спроектировать иконки из ровно трёх SVG-линий со свёрнутыми точками
- настроить анимацию поворота связанных иконок через spring-физику
- отключить движение при включённом prefers-reduced-motion

## Примеры запросов агенту
- Помоги сделать иконку-переключатель из плюса в крестик через морфинг трёх линий.
- Проверь компонент MorphingIcon на соответствие правилам скилла morphing-icons.
- Как сгруппировать стрелки направлений, чтобы поворот анимировался через useSpring?

## Похожие
- [better-icons](https://affpapa.org/nevibecode/skills/better-icons.md) — скилл · 5900 установок
- [icons-badges](https://affpapa.org/nevibecode/skills/icons-badges.md) — скилл · 537 установок
- [Svg/icons MCP](https://affpapa.org/nevibecode/mcp/svgicons-mcp.md) — MCP-сервер
- [Keyline Icons](https://affpapa.org/nevibecode/mcp/keyline-icons.md) — MCP-сервер · ★ 181
- [icon-set-generator](https://affpapa.org/nevibecode/skills/icon-set-generator.md) — скилл · 1900 установок
- [Iconoteka](https://affpapa.org/nevibecode/mcp/iconoteka.md) — MCP-сервер · ★ 13

Из того же набора: [raphaelsalaja/skill](https://affpapa.org/nevibecode/by/raphaelsalaja/skill.md) — 3 карточки

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

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