Agentic Product Demo — скилл
Скилл и конвейер на Remotion: агент изучает ваш продукт и собирает демо-ролик кодом на React, без записи экрана
- 480 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Команда npm install тянет зависимости, а первый рендер скачивает около 100 МБ headless Chromium
- Агент читает ваш репозиторий, запущенное приложение и сайт, чтобы воссоздать экраны, и запускает рендер и ffmpeg на вашей машине
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/agentic-product-demoОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Команда npm install тянет зависимости, а первый рендер скачивает около 100 МБ headless Chromium
- Агент читает ваш репозиторий, запущенное приложение и сайт, чтобы воссоздать экраны, и запускает рендер и ffmpeg на вашей машине
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл product-demo работает в Claude Code, Cursor и других агентах, которые читают файлы скиллов, и лежит в проекте на Remotion. Агент изучает ваш репозиторий, запущенное приложение или сайт, составляет список кадров и ждет вашей правки. После подтверждения он пишет композицию в src/compositions/, смотрит кадры на каждой метке и рендерит видео. В комплекте словарь движения src/motion.ts, заглавная карточка, имитация окна приложения с курсором, скрипт предпросмотра, который снимает кадры на каждой метке и собирает контактный лист, и скрипт рендера. Рендер выдает mp4 размером 1536×960 с постером и прогоняет проверку: check-frames.mjs ищет битые кадры и скачки яркости, включая стык петли. Звук добавляется отдельным проходом scripts/add-sfx.sh и пишется в новый файл, беззвучный остается нетронутым. Команда npm run adopt берет цветовые токены и кривые из CSS вашего продукта, чтобы ролик выглядел и двигался как приложение. Девять правил движения скилл применяет сам: цифры досчитываются, текст печатается, элементы входят не группой со сдвигом в два кадра, вес и раскладка меняются ступенями, на фазу один главный акцент, курсор останавливается на кнопке, которую нажимает.
Для кого. Для основателей и разработчиков, которым нужен ролик для лендинга, документации, магазина приложений или соцсетей и которые готовы вести его через агента.
Подходит, если
- Нужен ролик на 14–40 секунд для лендинга, документации, онбординга или карточки в магазине приложений
- Запись экрана выглядит как слайд-шоу из телепортаций, а нужен ролик, где счетчики считают и текст печатается
- Цвета и кривые анимации ролика должны браться из CSS самого продукта командой npm run adopt
- Ролик зациклен, и нужна проверка кадров на мерцание и стык петли до публикации
- Нужна озвученная версия для запуска продукта: звуковой проход пишет отдельный mp4 и не трогает беззвучный
Не подходит, если
- Нужна запись реального экрана с настоящими данными: экран приложения воссоздается кодом на React
- Ваша компания больше трех человек и не готова платить за лицензию Remotion
- Нужен ролик с графикой на сетке или симметричном фоне: проверка кадров рассчитана на интерфейс продукта и там даст ложные срабатывания
- Вы хотите получить ролик без единого вопроса: агент сначала показывает список кадров и ждет вашей правки
Пример запроса к агенту
Прочитай мой репозиторий и приложение на localhost:3000, предложи список кадров для демо-ролика про выгрузку отчета и дождись моей правки перед рендеромОграничения
Набор помечен как MIT, но сам Remotion распространяется на своих условиях: он бесплатен для частных лиц, некоммерческих организаций и компаний до трех сотрудников, остальным нужна платная Company License. Условия действуют с момента npm install. Нужен Node.js 20 или новее, первый рендер скачивает около 100 МБ Chromium. На macOS старше 15 встроенный Chromium не запускается: укажите установленный Chrome в переменной CHROME_PATH и закройте Chrome перед рендером. Бинарные файлы ffmpeg приходят из ffmpeg-static со своими условиями. Проверка кадров пропускает неверную картинку: панель поверх шапки, пустую фазу, курсор не на той кнопке. Поэтому до рендера посмотрите кадры, снятые скриптом предпросмотра.
Как отключить. Скилл лежит в .claude/skills/product-demo/ клона репозитория: удалите папку или весь клон. Копию для Cursor в .cursor/skills/ удалите так же. Готовые ролики остаются в папке out/.
Частые вопросы
Как поставить скилл product-demo в Claude Code?
Откройте клон репозитория с установленными зависимостями в Claude Code: скилл лежит в .claude/skills/product-demo/. Файл AGENTS.md в корне читают Claude Code, Codex, Cursor, Aider, Copilot, Gemini CLI и Windsurf, поэтому агент получает команды и правила сразу.
Как подключить скилл в Cursor?
Скопируйте папку .claude/skills/product-demo/ в .cursor/skills/. Файл скилла тот же самый в обоих местах.
Что агент спрашивает перед началом ролика?
Три вещи одним блоком: ролик про весь продукт или про одну функцию, где он будет жить (беззвучная петля на странице или отдельный ролик) и знаете ли вы шаги потока. Вариант агента уже выбран, поэтому ответом чаще служит один клик. Длина выводится из потока и вопросом не задается.
Что проверяет скрипт check-frames.mjs?
Он ищет два дефекта: битые кадры, где текстура страницы свернута или отражена, и скачки яркости, включая стык последнего кадра с первым. Для ролика без петли задайте STANDALONE=1. Верность самой картинки скрипт не оценивает.
Можно ли взять словарь движения без Remotion?
Да. Файл src/motion.ts ничего не импортирует: решатель кривых Безье, ограничитель интервала и затухающий осциллятор написаны прямо в нем. Он работает без изменений под Framer Motion, в цикле canvas и в React Native.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкиллы Remotion
Remotion Agent Skills
Официальные скиллы Remotion для создания видео на React: композиции, анимации, субтитры, карты и рендер
Скилл заставляет агента снять короткий фильм о продукте: идея, монтаж, звук и рендер на Remotion или HyperFrames
Скилл для Claude Code и Codex, который превращает тему в озвученный анимационный ролик-объяснение на Remotion с субтитрами и главами
Скилл для Cursor, Claude Code и Codex: по названию продукта или ссылке собирает 4K-ролик с музыкой, озвучкой и проверкой
Product Launch Motion
product-launch-motion
Скилл строит ролики запуска продукта кодом: сценарий, озвучка, камера, цвет и громкость, HTML, CSS и GSAP. Нужен ffmpeg
Скилл для Claude Code и Codex: делает кинематографичные продуктовые видео на Remotion из карточек-рецептов кадров, готового шаблона и аудиоресурсов
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Agentic Product Demo (эта запись) | нет | 480 | |
| Скиллы Remotion | нет | 5 891 | официальные скиллы Remotion про композиции, анимацию и субтитры вообще, без готового конвейера демо о продукте |
| AI Promo Video Maker | нет | 407 | по названию продукта или ссылке собирает 4K-промо с музыкой и озвучкой |
Коротко о README
Страница ведет от готового примера на 16 секунд к пошаговой инструкции: скопировать композицию, зарегистрировать, посмотреть в студии, снять кадры, отрендерить. Дальше идут девять правил движения, описание диалога с агентом, ограничения проверки кадров, раздел о доле Remotion в проекте, неполадки и лицензии.
Бейдж для README
Исходный SKILL.md
--- name: product-demo description: >- Shoot, animate, title and optionally score product demo videos with Remotion — for a landing page, docs, onboarding, an app store listing or a social post. Use when editing anything under src/compositions/, when the user asks for a new demo clip, an intro or an animated title, asks for sound or a version for social, says a clip feels dead or looks like a screen recording, or reports tiling, flashing or flickering in a rendered video. --- # Product demo videos One pipeline, three layers: the **story** (what the clip shows), the **motion** (how the interface behaves inside the frame), and the **title** (the two seconds that open it). Reference implementation: `src/compositions/Demo.tsx` + `src/motion.ts` + `src/title-card.tsx` + `scripts/render.sh`. New clips copy that pipeline. Do not invent a second one. --- ## 1. Settle the brief. Read what you can, ask what you can't. **Do not start a composition until the four things below are settled.** But *settled* is not the same as *asked* — and asking for what you could have found yourself is the fastest way to make a person regret starting. ### Read before you ask If you can reach the product — its repo, its running app, its live site — **read it and propose the whole plan.** Take the running order from the marketing site and the screens from the app; neither answers the other's question, and question 2 below has the measurement showing why. Then put the plan up and ask for one confirmation. ### Say that describing the flow beats letting you guess **Tell them this in your first message, in one line.** Reading the product gives you a *plausible* flow. It cannot give you the right one, because the code does not record which path converts, which step people get stuck on, which feature shipped last week and needs the attention, or which screen the founder is quietly embarrassed by. Only they know that, and most people do not volunteer it because they assume the agent has it covered.