transitions-ui-generation — скилл для Claude Code: эффекты генерации
Скилл добавляет анимацию, будто агент строит интерфейс, заголовок или изображение. Пригодится для показа результата генерации на странице.
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a claude-codeЧто делает transitions-ui-generation
Скилл помогает добавить к элементу страницы анимацию построения с последующим показом настоящего содержимого. Для компонентов он рисует точечную схему, направляющие и контуры частей, а затем открывает интерфейс через движущуюся линию. Для заголовков, небольшого текста и изображений предусмотрены отдельные варианты; auto выбирает их по типу и размеру содержимого.
Есть режим с одной анимацией и режим с дополнительными подписями: журналом действий агента, записью CSS-анимации и строкой этапов. Вызов generate(el, { variant }) передаёт анимацию текста и изображений; для этих вариантов в скилле есть text-image-generation.js. Среда выполнения не требует зависимостей и рассчитана на vanilla, React, Next.js, Vue и Svelte.
Это эффект для момента появления результата, а не для каждой смены маршрута или строки списка: для частых обновлений скилл советует выбрать другой вариант показа. Для установки в Claude Code используется npx skills add с указанием платформы, а файлы скилла размещаются в ~/.claude/skills/transitions-ui-generation/.
Какие задачи решает
- показать построение интерфейсного компонента перед его появлением
- нарисовать заголовок точками по контурам букв
- анимировать появление изображения через тоновый эскиз
- добавить журнал действий агента к демонстрации результата
Примеры запросов агенту
- Добавь к карточке анимацию построения интерфейса перед показом содержимого.
- Покажи заголовок так, будто агент выводит его точками по контурам букв.
- Оформи появление изображения через эскиз и цветные точки.
Как установить transitions-ui-generation
1Через Skills CLI (Vercel)
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a claude-code2Вручную: положить файлы
~/.claude/skills/transitions-ui-generation/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/transitions-ui-generation/
1Через Skills CLI (Vercel)
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a codex2Вручную: положить файлы
.agents/skills/transitions-ui-generation/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a cursor2Вручную: положить файлы
.cursor/skills/transitions-ui-generation/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Jakubantalik/transitions.dev transitions-ui-generation2Вручную: положить файлы
.github/skills/transitions-ui-generation/SKILL.md1Через Skills CLI (Vercel)
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a gemini-cli2Командой платформы
gemini skills install https://github.com/Jakubantalik/transitions.dev --path skills/transitions-ui-generationВручную: положить файлы
.devin/skills/transitions-ui-generation/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о transitions-ui-generation
Как установить transitions-ui-generation в Claude Code?
Выполните npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a claude-code. Файлы скилла находятся в ~/.claude/skills/transitions-ui-generation/SKILL.md.
Что делает transitions-ui-generation?
Добавляет анимацию построения для интерфейса, текста или изображения, а затем показывает настоящий элемент страницы. Можно включить режим с журналом агента и строкой этапов.
Подходит ли скилл для анимации при каждой смене маршрута?
Нет: в описании это эффект для появления результата, а не для частых переходов между маршрутами или строками списка. Для таких случаев предлагается использовать другой вариант показа.
