# barba-js

Скилл по Barba.js: помогает настроить плавные переходы между страницами без полной перезагрузки и связать их с GSAP.

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

## Что делает

Barba.js перехватывает клики по ссылкам, подтягивает новую страницу через AJAX и меняет только контейнер с контентом. Скилл объясняет эту схему агенту: структуру `data-barba="wrapper"`, `data-barba="container"` и `data-barba-namespace`, чтобы разметка сразу была правильной.

Внутри разобраны 11 хуков жизненного цикла — от `beforeLeave` до `afterEnter` — и порядок их вызова при первой загрузке и при каждом переходе. Отдельно показаны views: логика, которая привязывается к namespace страницы и запускается только на ней. Есть готовые примеры переходов на GSAP: fade, crossfade в режиме `sync: true` и слайд с наложением.

Библиотека весит 7kb в сжатом виде и не привязана к фреймворку. Ставить её советуют как dev-зависимость: `npm install --save-dev @barba/core`. Если в проекте уже есть свой роутер с переходами, Barba будет с ним конфликтовать — это повод проверить, кто управляет историей браузера.

## Установка

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

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install freshtechbro/claudedesignskills barba-js
```

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

### Gemini CLI

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

2. **Командой платформы**
```bash
gemini skills install https://github.com/freshtechbro/claudedesignskills --path plugins/bundles/extended-3d-scroll/skills/barba-js
```

### Windsurf (Devin Desktop)

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

### OpenCode

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

### Claude.ai

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

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

## Когда брать
- сделать многостраничный сайт похожим на SPA
- убрать белую вспышку между переходами
- повесить анимацию ухода и прихода на разные страницы
- запускать скрипты только для нужного namespace
- связать переходы с GSAP-анимациями

## Примеры запросов агенту
- Настрой переходы между страницами на Barba.js с fade через GSAP
- Добавь crossfade-переход в режиме sync для страниц блога
- Раздели логику страниц по namespace через views в Barba.js

## Похожие
- [route-based](https://affpapa.org/nevibecode/skills/route-based.md) — скилл · 1400 установок
- [gsap-scrolltrigger](https://affpapa.org/nevibecode/skills/gsap-scrolltrigger.md) — скилл · 72200 установок
- [gsap-timeline](https://affpapa.org/nevibecode/skills/gsap-timeline.md) — скилл · 69100 установок
- [gsap-web](https://affpapa.org/nevibecode/skills/gsap-web.md) — скилл · 2500 установок
- [gsap](https://affpapa.org/nevibecode/skills/mengto-gsap.md) — скилл · 1800 установок
- [firebase-hosting-basics](https://affpapa.org/nevibecode/skills/firebase-hosting-basics.md) — скилл · 170300 установок

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

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

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