Repolode
Предложить
199-biotechnologies

199-biotechnologies/motion-dev-animations-skill

Навык Claude Code для создания веб-анимаций Motion.dev в React, Next.js, Svelte и Astro со встроенными рекомендациями по доступности и производительности.

Открыть на GitHub
Звёзды
194
Форки
34
Открытые issues
0
Последний коммит
7 месяцев назад

Что это?

Этот проект — навык Claude Code, который обучает ассистента паттернам анимации Motion.dev, чтобы тот мог генерировать TypeScript-код анимаций по запросам на естественном языке, например добавить анимацию появления первого экрана, параллакс при прокрутке или перетаскивание элементов списка. Навык рассчитан на React 19+, Next.js 15+, Svelte 5+ и Astro 4+; Vue поддерживается через пакет motion-v.

В сгенерированном коде предпочтение отдается свойствам с GPU-ускорением (transform, opacity, filter), учитывается настройка prefers-reduced-motion и обрабатывается фокус клавиатуры. Навык охватывает анимации появления, эффекты прокрутки, взаимодействия с жестами, микроанимации и анимации макета, такие как перестановка элементов по FLIP, аккордеоны с AnimatePresence и переходы между вкладками с layoutId.

Репозиторий построен на принципе постепенной загрузки: сначала загружается основной файл инструкций, а примеры, справочник API, пресеты пружин, стартовые шаблоны и валидатор конфигурации подключаются только при необходимости. Установить навык можно, клонировав репозиторий в каталог навыков Claude Code или добавив его как git submodule.

Ключевые возможности

  • 01Генерирует код анимаций Motion.dev по запросам на естественном языке в Claude Code
  • 02Поддерживает React, Next.js App Router, Svelte, Astro и Vue через motion-v
  • 03Охватывает анимации появления, прокрутки, жестов, микроанимации и макета
  • 04Использует свойства transform и opacity, подходящие для GPU, и учитывает prefers-reduced-motion
  • 05Включает примеры паттернов, пресеты пружин, стартовые шаблоны и валидатор конфигурации

Сценарии использования

  • Добавление анимации появления первого экрана на лендинг на Next.js
  • Создание параллакса или эффектов прогресса, связанных с прокруткой, для маркетингового сайта
  • Создание списков с перетаскиванием для изменения порядка элементов или интерактивных кнопок с эффектами при наведении и магнитным притяжением
  • Добавление единообразной и доступной анимации в проект на Svelte или Astro без изучения всей документации API

Быстрый старт

  1. 1

    Клонируйте skill в папку skills для Claude Code

    git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations
  2. 2

    Попросите Claude Code создать анимацию на естественном языке

Что важно знать

  • Это skill для Claude Code, поэтому она работает только внутри Claude Code и не запускается как самостоятельная библиотека.
  • В README указана поддержка только React, Next.js, Svelte, Astro и Vue через отдельный пакет, поэтому другие фреймворки не поддерживаются.

Темы

#animation#motion-dev#claude-code#react#nextjs#svelte#scroll-animations#typescript#accessibility#animation-library

Частые вопросы

Что такое motion-dev-animations-skill?
Навык Claude Code для создания веб-анимаций Motion.dev в React, Next.js, Svelte и Astro со встроенными рекомендациями по доступности и производительности. Этот проект — навык Claude Code, который обучает ассистента паттернам анимации Motion.dev, чтобы тот мог генерировать TypeScript-код анимаций по запросам на естественном языке, например добавить анимацию появления первого экрана, параллакс при прокрутке или перетаскивание элементов списка. Навык рассчитан на React 19+, Next.js 15+, Svelte 5+ и Astro 4+; Vue поддерживается через пакет motion-v.
motion-dev-animations-skill можно использовать бесплатно? Какая у него лицензия?
motion-dev-animations-skill распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
motion-dev-animations-skill всё ещё поддерживается?
Нет коммитов больше 6 месяцев. Последний коммит в motion-dev-animations-skill — 30 мар. 2026 г..
Для чего можно использовать motion-dev-animations-skill?
Добавление анимации появления первого экрана на лендинг на Next.js Создание параллакса или эффектов прогресса, связанных с прокруткой, для маркетингового сайта Создание списков с перетаскиванием для изменения порядка элементов или интерактивных кнопок с эффектами при наведении и магнитным притяжением Добавление единообразной и доступной анимации в проект на Svelte или Astro без изучения всей документации API
Как установить motion-dev-animations-skill?
Клонируйте skill в папку skills для Claude Code: git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations Попросите Claude Code создать анимацию на естественном языке
Где скачать motion-dev-animations-skill?
Исходный код и инструкции по установке — на GitHub: https://github.com/199-biotechnologies/motion-dev-animations-skill

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты