javascript-animation-skills — плагин
Два скилла: короткие фильмы, где каждый кадр и музыка вычисляются кодом на canvas, без картинок и ключей, рендер в MP4
- 62 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скиллы запускают скрипты Node, открывают страницы в браузере через Playwright и пишут файлы и рендеры в проект.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/javascript-animation-skillsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скиллы запускают скрипты Node, открывают страницы в браузере через Playwright и пишут файлы и рендеры в проект.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
`javascript-animation-skills` — набор из двух скиллов для агентов. `javascript-animation` рисует короткие фильмы на HTML canvas: истории, объяснения, петли, книги с картинками из ваших фото. В нем библиотека рисования (чернила, иллюстрация, шелкография, гравюра одной линией, слова как формы), прогон страницы по кадрам в MP4, контактные листы и проверка отсутствия внешних ассетов. `soundtrack` пишет музыку Web Audio прямо в странице и рендерит ее в WAV. Агент сначала выбирает образ под тему, затем записывает сетку битов и список кадров как данные, а каждый кадр считает как функцию времени. Перед сдачей он сверяет звук и монтаж (смены кадров на долю), раскладку текста и сами кадры по раскадровке.
Для кого. Авторам коротких анимаций и объяснялок, которым нужен самодостаточный HTML-файл без стоковой графики и платной генерации.
Подходит, если
- Объяснение темы рисуют ручной графикой в 30–40 секунд, весь кадр в коде
- Из нескольких фото собирают анимированную историю или день из жизни питомца
- Музыку для ролика пишут в коде и ставят смены кадров на сильную долю
- Нужен ролик без картинок, шрифтов и ключей в одном HTML-файле
Не подходит, если
- Нужна фотореалистичная графика или живая съемка
- Агент не умеет смотреть изображения: самопроверка читает контактные листы
- Задача требует готового видеоредактора с таймлайном
Пример запроса к агенту
Сделай 40-секундное объяснение того, почему младенцы любят черно-белые карточки: ручная графика, каждый кадр кодом, музыкальная шкатулка.Ограничения
Нужны Node 18 или новее, `playwright-core`, `ffmpeg` и Chrome (либо Chromium через `npx playwright install chromium`). Ключи не нужны. Автор собирал и проверял набор на Claude Opus 5.5; на других моделях не пробовал, и от слабых стоит ждать более грубых рисунков. Самопроверка требует модели, которая смотрит изображения. Полный агент размещен на сайте iart.ai, а в README есть ссылки на его платные страницы. Образы людей и лиц на фото обрабатываются только по просьбе в самой задаче.
Как отключить. Удалите скиллы командой вашего менеджера скиллов или папки `javascript-animation` и `soundtrack` из каталога скиллов. Рендеры и HTML-файлы остаются в вашем проекте.
Частые вопросы
Как установить?
Выполните `npx skills add iart-ai/javascript-animation-skills` или добавьте маркетплейс `/plugin marketplace add iart-ai/javascript-animation-skills` и поставьте `/plugin install javascript-animation-skills`.
Нужны ли ключи или картинки?
Нет. Фильм складывается в один HTML-файл, звук синтезируется в Web Audio, внешние ассеты проверяет отдельный аудит.
В какие агенты ставится?
README называет Claude Code, Cursor, Codex и еще более сорока агентов.
Что проверяет агент перед сдачей?
Отсутствие внешних ассетов, синхронность звука и смен кадров, столкновения текста, кадр по каждому плану и общий просмотр контактного листа.
Можно ли взять свою музыку?
Да, `soundtrack` работает и с музыкой, сгенерированной ИИ, или вашей, но проверка совпадения смен кадров с ритмом применяется к любому звуку.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныДвенадцать скиллов, по которым агент собирает однофайловые HTML-анимации: слайды, схемы протоколов, архитектурные диаграммы и демо для записи экрана
Скилл для Claude Code и Codex: агент пишет сцены анимации, плеер в браузере их показывает, ролик уходит в MP4 и Lottie.
Скилл Claude Code для коротких анимационных роликов, нарисованных кодом: семь стилей, согласование сюжета и раскадровки, озвучка и рендер в MP4
Скилл для промо-роликов и кинетической типографики: идея и раскадровка до сборки, рендер в MP4 через Chrome и ffmpeg, проверка шестью гейтами
Набор скиллов учит агента писать видео на TypeScript и рендерить его на GPU без браузера: композитинг, моушн-графика, 3D.
Скилл и CLI, с которыми Claude Code или Codex делает видео как веб-страницы, а редактор Studio позволяет править результат
Коротко о README
Документация показывает примеры фильмов и галерею, установку, описание двух скиллов, ход работы агента, фразы активации, примеры запросов, требования к модели и ссылки на другие наборы коллекции iart.