# spline-interactive

Справочник по интеграции 3D-сцен Spline в веб-проекты. Помогает встроить интерактивную графику в React без ручного написания WebGL-кода.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2800 установок · ★ 1133
- Автор: freshtechbro
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/authoring-motion/skills/spline-interactive/SKILL.md
- Обновлён: 2025-11-20
- HTML: https://affpapa.org/nevibecode/skills/spline-interactive

## Что делает

Скилл передаёт агенту готовые шаблоны интеграции веб-сцен Spline. Внутри описана структура проектов: объекты, источники света, камеры, переходы между состояниями анимации и обработчики пользовательских действий вроде кликов или скролла.

В коде агент опирается на пакеты `@splinetool/react-spline` и `@splinetool/runtime`. Через `useRef` и метод `findObjectByName` компонент получает доступ к элементам сцены, что позволяет менять координаты `position`, угол поворота `rotation` или цвет `material.color` из обычных функций React.

Для отображения сцены в приложении потребуется ссылка на файл `.splinecode` из экспорта Spline. Если в проекте нужен глубокий контроль над шейдерами или физикой сложного уровня, разработчику стоит выбрать Three.js или Babylon.js вместо визуального редактора.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill spline-interactive -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill spline-interactive -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill spline-interactive -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install freshtechbro/claudedesignskills spline-interactive
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill spline-interactive -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/freshtechbro/claudedesignskills --path plugins/bundles/authoring-motion/skills/spline-interactive
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill spline-interactive -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/authoring-motion/skills/spline-interactive/SKILL.md

## Когда брать
- встроить готовую 3D-сцену Spline в компонент React
- настроить обработку кликов и наведения курсора на 3D-объекты
- изменять координаты, масштаб и цвет материалов из кода
- связать анимацию состояний сцены с событиями в браузере

## Примеры запросов агенту
- Покажи, как встроить сцену Spline в компонент React через @splinetool/react-spline
- Напиши обработчик клика на объект Button внутри сцены Spline
- Как программно повернуть объект Product в Spline при нажатии на кнопку в React?

## Похожие
- [build-interactive-particle-trail](https://affpapa.org/nevibecode/skills/build-interactive-particle-trail.md) — скилл · 1100 установок
- [3dsvg-interactive-react](https://affpapa.org/nevibecode/skills/3dsvg-interactive-react.md) — скилл · 529 установок
- [title-sequence-3d](https://affpapa.org/nevibecode/skills/title-sequence-3d.md) — скилл · 1500 установок
- [threejs-landscape](https://affpapa.org/nevibecode/skills/threejs-landscape.md) — скилл · 1200 установок
- [3d-web-experience](https://affpapa.org/nevibecode/skills/sickn33-3d-web-experience.md) — скилл · 5200 установок
- [libraries-dev](https://affpapa.org/nevibecode/skills/libraries-dev.md) — скилл · 1000 установок

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

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

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