# animated-component-libraries

Скилл помогает добавлять готовые анимированные React-компоненты из Magic UI и React Bits. Пригодится при вёрстке лендингов, дашбордов и промо-страниц без ручной сборки анимаций на Framer Motion.

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

## Что делает

Скилл учит агента внедрять готовые анимированные элементы из двух каталогов: Magic UI и React Bits. Первый набор содержит более 150 TypeScript-компонентов под Tailwind CSS и Framer Motion, оформленных по структуре shadcn/ui. Второй каталог даёт более 90 независимых компонентов для фонов и текстовых эффектов с акцентом на скорость отрисовки.

Внутри собраны правила установки и шаблоны разметки. Для компонентов Magic UI ассистент использует вызовы `npx shadcn@latest add` либо копирует файлы в папку `components/ui/`, подключая утилиту `cn()` и библиотеку `motion`. Для отдельных визуальных эффектов React Bits вроде Particles или Plasma скилл предложит поставить пакет `ogl` под WebGL.

Без настроенного Tailwind CSS и вспомогательной функции `cn()` компоненты Magic UI работать не будут. Если проект не использует структуру shadcn/ui, перенос анимаций потребует ручной правки `globals.css` и параметров сборки.

## Установка

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

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install freshtechbro/claudedesignskills animated-component-libraries
```

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

### Gemini CLI

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

2. **Командой платформы**
```bash
gemini skills install https://github.com/freshtechbro/claudedesignskills --path plugins/bundles/animation-components/skills/animated-component-libraries
```

### Windsurf (Devin Desktop)

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

### OpenCode

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

### Claude.ai

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

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

## Когда брать
- добавить интерактивный фон AnimatedGridPattern на первый экран лендинга
- встроить посимвольное появление заголовка с помощью компонента BlurText
- подключить кнопки ShimmerButton и BorderBeam через shadcn CLI
- подобрать готовый React-компонент с анимацией вместо ручной вёрстки на Framer Motion

## Примеры запросов агенту
- Добавь анимированный фон AnimatedGridPattern на главный экран лендинга
- Как установить и настроить кнопку ShimmerButton из Magic UI в наш проект?
- Сделай анимацию появления заголовка по отдельным словам через BlurText из React Bits

## Похожие
- [aceternity-ui](https://affpapa.org/nevibecode/skills/aceternity-ui.md) — скилл · 1500 установок
- [ui-styling](https://affpapa.org/nevibecode/skills/ui-styling.md) — скилл · 40700 установок
- [shadcn-ui](https://affpapa.org/nevibecode/skills/giuseppe-trisciuoglio-shadcn-ui.md) — скилл · 22400 установок
- [tailwind-v4-shadcn](https://affpapa.org/nevibecode/skills/tailwind-v4-shadcn.md) — скилл · 8100 установок
- [magic-ui](https://affpapa.org/nevibecode/skills/magic-ui.md) — скилл · 1200 установок
- [ui-design-system](https://affpapa.org/nevibecode/skills/samhvw8-ui-design-system.md) — скилл · 3200 установок

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

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

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