Transitions.dev

Установка

npx skillfoxx add skills/transitions-dev

npx skills add jakubantalik/transitions.dev --skill transitions-dev -a claude-code -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .claude/skills
cp -R "$tmp/skills/transitions-dev" .claude/skills/transitions-dev

npx skills add jakubantalik/transitions.dev --skill transitions-dev -a cursor -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .agents/skills
cp -R "$tmp/skills/transitions-dev" .agents/skills/transitions-dev

npx skills add jakubantalik/transitions.dev --skill transitions-dev -a github-copilot -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .github/skills
cp -R "$tmp/skills/transitions-dev" .github/skills/transitions-dev

npx skills add jakubantalik/transitions.dev --skill transitions-dev -a codex -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .agents/skills
cp -R "$tmp/skills/transitions-dev" .agents/skills/transitions-dev

npx skills add jakubantalik/transitions.dev --skill transitions-dev -a gemini-cli -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .agents/skills
cp -R "$tmp/skills/transitions-dev" .agents/skills/transitions-dev

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .devin/skills
cp -R "$tmp/skills/transitions-dev" .devin/skills/transitions-dev

npx skills add jakubantalik/transitions.dev --skill transitions-dev -a cline -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .cline/skills
cp -R "$tmp/skills/transitions-dev" .cline/skills/transitions-dev

npx skills add jakubantalik/transitions.dev --skill transitions-dev -a roo -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .roo/skills
cp -R "$tmp/skills/transitions-dev" .roo/skills/transitions-dev

npx skills add jakubantalik/transitions.dev --skill transitions-dev -a opencode -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .agents/skills
cp -R "$tmp/skills/transitions-dev" .agents/skills/transitions-dev

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .agents/skills
cp -R "$tmp/skills/transitions-dev" .agents/skills/transitions-dev

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .agents/skills
cp -R "$tmp/skills/transitions-dev" .agents/skills/transitions-dev

npx skills add Jakubantalik/transitions.dev

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

Что делает

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

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

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

Сделай, чтобы модалка открывалась плавно, и подбери переход под нее из 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.

Проверка безопасности

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

Коротко о README

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

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 |

Похожие