SkillFoxx
Telegram

Transitions.dev — скилл

Скилл с готовыми CSS-переходами для веб-интерфейсов: модалки, выпадашки, тосты, лоадеры и десятки других анимаций по правилам подбора

  • 6 283 ★ репозитория
  • Последний коммит
Скилл

Минимальный доступ

Почему такой уровень

  • Скилл состоит из инструкций и CSS-сниппетов
  • CLI и инструмент Refine дополнительно записывают файлы в проект и обращаются к сервису за Pro-рецептами
Все причины и проверки

jakubantalik/transitions.devАвтор:Jakub Antalik

Установка

Ручная установка

npx skills add Jakubantalik/transitions.dev

Ставит скилл с переходами в каталог скиллов агента.

Доступ и проверки

Как мы проверяем

Минимальный доступИнструмент ничего не запускает и не ходит в сеть.

  • Скилл состоит из инструкций и CSS-сниппетов
  • CLI и инструмент Refine дополнительно записывают файлы в проект и обращаются к сервису за Pro-рецептами

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл дает агенту коллекцию портативных CSS-переходов, каждый вынесен в классы с префиксом t- и семантические CSS-переменные и снабжен защитой prefers-reduced-motion. В описании собраны правила подбора: по видимому элементу и действию агент выбирает подходящий переход, например выпадающее меню, модалку, ревил панели, смену иконок или тряску поля при ошибке. Есть команды: показать каталог переходов, проверить проект и предложить, где переходы пригодятся, применить один переход к элементу и заменить самодельную анимацию на общие токены движения. Тот же набор ставится через CLI, который вытягивает нужный CSS в проект, а инструмент Refine добавляет живую панель для настройки анимаций на работающем приложении.

Для кого. Для фронтенд-разработчиков и дизайнеров, которым нужны аккуратные переходы в интерфейсе без сбора анимаций с нуля.

Подходит, если

  • Нужно добавить плавный переход к модалке, выпадающему меню или тосту
  • Нужно подобрать анимацию под элемент по понятным правилам, а не на глаз
  • Нужно свести самодельные длительности и кривые к единым токенам движения

Не подходит, если

  • Нужна сложная анимация на JavaScript-библиотеке, а не портативный CSS
  • В проекте уже есть своя система движения и вводить чужие токены не нужно

Пример запроса к агенту

Сделай, чтобы модалка открывалась плавно, и подбери переход под нее из transitions.dev

Ограничения

Переходы это CSS-сниппеты, к части нужно подключить описанные HTML-хуки и для некоторых добавить оркестровку на JavaScript. Часть переходов помечена как Pro и открывается после входа в аккаунт Transitions Pro через браузер, бесплатный набор доступен без аккаунта. CLI и инструмент Refine ставятся из npm, Pro-рецепты подтягиваются с сервиса api.transitions.dev, установленные переходы покрыты отдельной лицензией сайта, тогда как код CLI под MIT.

Как отключить. Удалите папку скилла из каталога скиллов агента, например transitions-dev или transitions-pro из ~/.claude/skills/. Если добавляли живую панель Refine, уберите ее командой npx transitions-refine stop.

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

Все переходы бесплатны?

Часть переходов бесплатна и работает без аккаунта. Некоторые помечены как Pro и открываются после входа в аккаунт Transitions Pro через браузер.

Как агент выбирает нужный переход?

По правилам подбора из SKILL.md: сначала по видимому элементу, затем по действию, при нескольких подходящих берется более легкий вариант.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы

Скилл дает агенту подборку современных приемов CSS: одно правило вместо набора брейкпоинтов и CSS-возможность прежде скрипта.

СкиллМинимальный доступ403

Скиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций

СкиллМинимальный доступ11 тыс.

Скилл о мелких деталях интерфейса: анимации, типографика, иконки, тени, скругления, оптическое выравнивание и области нажатия

СкиллМинимальный доступ4 тыс.14

Скилл правит интерфейс в живом коде без лишних зависимостей: компоненты, секции, страницы и RTL с арабским под ваш стек

СкиллРасширенный доступ121

Скилл принципов motion-дизайна для агентов: тайминг, easing, хореография и приемы анимации Disney в применении к интерфейсу

СкиллМинимальный доступ3 тыс.

Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign

СкиллРасширенный доступ982

Коротко о README

README описывает Transitions.dev как коллекцию переиспользуемых CSS-переходов с интерактивным сайтом и копируемыми сниппетами. Есть три способа применения: CLI, который вытягивает переход в проект командой npx transitions-dev add, устанавливаемый скилл для агентов через npx skills add и инструмент Refine, который встраивает живую панель и локальный релей для согласования анимаций с токенами движения. Скилл генерируется из index.html, чтобы сниппеты совпадали с витриной сайта. Бесплатные переходы доступны без аккаунта, Pro открывается по входу через браузер. Код CLI под лицензией MIT.

Бейдж для README

Исходный SKILL.md

---
name: transitions-dev
description: Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs, tooltips, staggered text reveals, card hover tilt, plus-to-menu morph, accordions, toasts, like buttons, learn-more hovers, checkbox checks, spinning counters, toggles, AI thinking states, reasoning streams, streaming text, matrix dot loaders, or banner stacking. Triggers on "add a transition", "animate the dropdown", "make the modal open smoothly", "swap icon", "page slide", "stagger animation", and the commands transitions reveal, transitions review, transitions apply, transitions refine.
---

# Transitions.dev

Thirty-two portable CSS transitions, each namespaced under `t-*` selectors with semantic CSS custom properties. Drop-in: paste the snippet, wire the documented HTML hooks, done. No framework dependencies, no demo-specific markup, and every snippet ships a `prefers-reduced-motion` guard.

## Quick reference

| Transition | When to use | Reference |
| --- | --- | --- |
| **Card resize** | Tween a container's width or height when its layout state changes. | 01-card-resize.md |
| **Menu dropdown** | Open an origin-aware dropdown that grows from its trigger. | 05-menu-dropdown.md |
| **Modal open / close** | Scale-up modal dialog with a softer scale-down on close. | 06-modal.md |

Сообщить о проблеме