·auto-animate
</>

auto-animate

Анимации без настройки для React, Vue, Solid, Svelte, Preact с @formkit/auto-animate (3,28 КБ). Предотвращает более 10 задокументированных ошибок: импорт SSR/Next.js, условные родительские элементы, отсутствующие ключи, ширина гибкого поля, отображение таблицы, конфигурация Jest/esbuild, конфликты позиций CSS, регистрация Vue/Nuxt, Angular ESM. Используйте, когда: анимация списков/аккордеонов/тостов/форм, устранение ошибок SSR-анимации, необходимость доступную анимацию (автоматическое предпочтение уменьшенного движения) или нужны плавные переходы без накладных расходов на движение.

29Установки·0Тренд·@ovachiever

Установка

$npx skills add https://github.com/ovachiever/droid-tings --skill auto-animate

Как установить auto-animate

Быстро установите AI-навык auto-animate в вашу среду разработки через командную строку

  1. Откройте терминал: Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.)
  2. Выполните команду установки: Скопируйте и выполните эту команду: npx skills add https://github.com/ovachiever/droid-tings --skill auto-animate
  3. Проверьте установку: После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw

Источник: ovachiever/droid-tings.

Package: @formkit/auto-animate@0.9.0 (Sept 2025) Frameworks: React, Vue, Solid, Svelte, Preact Last Updated: 2025-11-22

Why this matters: Prevents Issue #1 (SSR/Next.js import errors). AutoAnimate uses DOM APIs not available on server.

Issue #1: SSR/Next.js Import Errors Error: "Can't import the named export 'useEffect' from non EcmaScript module" Source: https://github.com/formkit/auto-animate/issues/55 Why It Happens: AutoAnimate uses DOM APIs not available on server Prevention: Use dynamic imports (see templates/vite-ssr-safe.tsx)

Анимации без настройки для React, Vue, Solid, Svelte, Preact с @formkit/auto-animate (3,28 КБ). Предотвращает более 10 задокументированных ошибок: импорт SSR/Next.js, условные родительские элементы, отсутствующие ключи, ширина гибкого поля, отображение таблицы, конфигурация Jest/esbuild, конфликты позиций CSS, регистрация Vue/Nuxt, Angular ESM. Используйте, когда: анимация списков/аккордеонов/тостов/форм, устранение ошибок SSR-анимации, необходимость доступную анимацию (автоматическое предпочтение уменьшенного движения) или нужны плавные переходы без накладных расходов на движение. Источник: ovachiever/droid-tings.

Факты (для цитирования)

Стабильные поля и команды для ссылок в AI/поиске.

Команда установки
npx skills add https://github.com/ovachiever/droid-tings --skill auto-animate
Источник
ovachiever/droid-tings
Категория
</>Разработка
Проверено
Впервые замечено
2026-02-01
Обновлено
2026-03-10

Browse more skills from ovachiever/droid-tings

Короткие ответы

Что такое auto-animate?

Анимации без настройки для React, Vue, Solid, Svelte, Preact с @formkit/auto-animate (3,28 КБ). Предотвращает более 10 задокументированных ошибок: импорт SSR/Next.js, условные родительские элементы, отсутствующие ключи, ширина гибкого поля, отображение таблицы, конфигурация Jest/esbuild, конфликты позиций CSS, регистрация Vue/Nuxt, Angular ESM. Используйте, когда: анимация списков/аккордеонов/тостов/форм, устранение ошибок SSR-анимации, необходимость доступную анимацию (автоматическое предпочтение уменьшенного движения) или нужны плавные переходы без накладных расходов на движение. Источник: ovachiever/droid-tings.

Как установить auto-animate?

Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.) Скопируйте и выполните эту команду: npx skills add https://github.com/ovachiever/droid-tings --skill auto-animate После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw

Где находится исходный репозиторий?

https://github.com/ovachiever/droid-tings