Motion Graphics Skill Pack
Пятнадцать скиллов для Claude Code: запуск продукта, анимированные графики и рилсы целиком из кода, без After Effects
- 476 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скиллы пишут код анимации, который затем запускает рендер HyperFrames через npx
- Копирование папок в ~/.claude/skills меняет набор скиллов агента для всех проектов
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/motion-graphics-skill-packОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скиллы пишут код анимации, который затем запускает рендер HyperFrames через npx
- Копирование папок в ~/.claude/skills меняет набор скиллов агента для всех проектов
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Motion Graphics Skill Pack собран из рабочих приемов автора: Claude Code пишет анимацию кодом, рисует каждый кадр и рендерит MP4. Правила в скиллах выросли из реальных отвергнутых черновиков. Первым запускают brand-intake: он по пяти понравившимся кадрам собирает файлы brand.md и MOTION.md, которые читают все остальные скиллы. Дальше выбирают задачу. Планирование закрывают motion-brief-writer, reference-to-motion (разбирает ролик-образец и стиль сайта) и motion-prompt-writer (восьмичастный промпт). Ролики запуска делают launch-video на 30–45 секунд и apple-launch-film в стиле презентации Apple. Для объяснений есть vox-explainer на 30–60 секунд и animated-chart с точными значениями. milestone-reveal строит ночное небо из точек, motion-effects дает 16 эффектов по восемь секунд. Заставки и продвижение закрывают title-sequence-3d, model-showdown для сравнения трех моделей и newsletter-promo. loop-cover делает GIF-обложку, а reel-export — вертикальный ролик 1080 на 1920.
Для кого. Для авторов рассылок, маркетологов и основателей, которым нужны ролики запуска, анимированные графики и рилсы без видеоредактора.
Подходит, если
- Нужен ролик запуска курса, продукта или предложения на 30–45 секунд
- Хотите анимированный график, где каждое значение остается ровно таким, как вы дали
- Подписчиков стало 250 000, и нужен ролик о рубеже: ночное небо из точек превращается в число
- Обложку рассылки надо превратить в зацикленный GIF, а видео — в рилс 1080 на 1920
- Вы разбираете чужой ролик и хотите перенести его приемы в сцену-промпт для своего бренда
Не подходит, если
- Нужно смонтировать снятое видео с людьми: все кадры здесь рисует код
- Нужен генератор клипов из текста: кадры строит код анимации без видеомодели
- Нужны готовые шаблоны для редактора After Effects: результат — код и MP4
Пример запроса к агенту
Сделай видео для запуска моего нового курса на 40 секунд в моем брендеОграничения
Автор рекомендует запускать набор в Claude Code на Opus 5.5, выбрав модель командой /model, и начинать с brand-intake. Для экспорта в MP4 отдельно ставится HyperFrames: npx skills add heygen-com/hyperframes. Скиллы работают и в Codex, но папки надо копировать в .agents/skills самостоятельно.
Часть заготовок доступна как отдельные zip-файлы в папке «downloads»: motion-prompt-writer.zip и reference-to-motion.zip, их можно загрузить в Claude Desktop как навык.
Как отключить. Удалите нужные папки скиллов из ~/.claude/skills или из .claude/skills проекта, для Codex — из его папки скиллов. Файлы brand.md и MOTION.md остаются в вашем проекте, удалите их вручную, если они не нужны.
Частые вопросы
Как поставить Motion Graphics Skill Pack в Claude Code?
Выполните npx skills add charlie947/motion-graphics-skills. Затем откройте Claude Code, выберите модель командой /model и запустите brand-intake. Можно скопировать папки из skills/ вручную в ~/.claude/skills: цикл копирования из инструкции пропускает уже существующие папки и ничего не затирает.
С какого скилла начинать?
С brand-intake. Он строит brand.md и MOTION.md по примерам кадров, а остальные скиллы читают эти файлы первыми. Быстрая проверка без скиллов: вставьте в Claude Code на Opus 5.5 однострочный запрос на 15 секунд анимации из раздела «Start here».
Как получить MP4 из кода анимации?
Добавьте HyperFrames, бесплатный открытый инструмент: npx skills add heygen-com/hyperframes. Скиллы пишут анимацию кодом, а рендер в видео делает он. Без HyperFrames результат останется кодом сцены.
Можно ли использовать набор в Codex или Claude Desktop?
Да. Для Codex склонируйте репозиторий и скопируйте папки skills/ в .agents/skills проекта, затем откройте новую задачу. Для Claude Desktop упакуйте одну папку скилла в zip и загрузите в разделе Customise, Skills, например brand-intake.skill.
Чем график animated-chart отличается от обычной анимации?
Каждое значение остается ровно таким, как вы указали, анимация только показывает рост. График зацикливается. Для ночного неба из точек и числа подписчиков есть отдельный скилл milestone-reveal, он тянет точки к вашему реальному числу.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл для промо-роликов и кинетической типографики: идея и раскадровка до сборки, рендер в MP4 через Chrome и ffmpeg, проверка шестью гейтами
Скилл для Claude Code и Codex, который превращает тему в озвученный анимационный ролик-объяснение на Remotion с субтитрами и главами
Motion Skills для ИИ-агентов
motion-skills
Более 50 открытых скиллов для моушн-графики, анимации и видео: кинетическая типографика, графики, объяснялки, TikTok и Reels, WebGL, Manim
Скилл Claude Code для коротких анимационных роликов, нарисованных кодом: семь стилей, согласование сюжета и раскадровки, озвучка и рендер в MP4
Скилл для Claude Code и Codex: делает кинематографичные продуктовые видео на Remotion из карточек-рецептов кадров, готового шаблона и аудиоресурсов
Набор скиллов формата SKILL.md для производства коротких видео и контента: тема, сценарий, голос, аватар, монтаж, обложки и motion-графика
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Motion Graphics Skill Pack (эта запись) | нет | 476 | |
| Motion Skills для ИИ-агентов | нет | 1 072 | больше пятидесяти открытых скиллов по анимации, кинетической типографике и видео, без общего слоя бренда |
| anything2explainer | нет | 2 835 | превращает тему в озвученный ролик-объяснение; здесь пятнадцать скиллов на разные форматы |
| opus-video-skills | нет | 380 | два скилла Claude Code для видео целиком из кода |
Коротко о README
Первыми идут два демо: 20-секундный ролик запуска и 12-секундный луп, который сходится в число подписчиков. Таблица раскладывает скиллы по этапам работы и дает фразу для вызова каждого, а готовые промпты лежат в отдельной папке.
Бейдж для README
Исходный SKILL.md
--- name: brand-intake description: The setup step every other skill in this pack reads. A short interview plus 3 to 5 reference frames becomes two files in your project, brand.md (who you are, what you sell, your assets) and MOTION.md (your colours, type, timing and motion rules), plus a rule in CLAUDE.md so Claude reads them before it animates anything. Use at the start of any motion project, or when someone says "set up my brand", "brand intake", "build my motion design system", "make it look like my brand", "onboard me", "write my MOTION.md" or drops a batch of brand frames into chat. --- # Brand intake Every other skill in this pack reads the two files this one writes. Without them, Claude picks its own colours, its own type and its own idea of motion. Run this once per brand. ## Start straight away When someone asks for this, your first message is the Batch 1 questions. No summary of the skill, no preamble. ## Step 1: The interview, in two batches **Batch 1.** Ask these four together, then wait: 1. What is the brand called, and what do you do, in one line? 2. Who is it for? One sentence on the person watching. 3. What do you sell or promote in your videos? The offer, the product or the newsletter, with its real link. 4. What should people feel in the first second? Pick up to three: calm, premium, playful, urgent, technical, warm, bold. **Batch 2.** Then ask these three, and wait: 5. Your colours as hex codes, your font names, and your logo files (SVG or PNG, attached). No hex codes? Say "sample them from my site" and give the link. 6. 3 to 5 reference frames: screenshots of motion you already like, from Dribbble, Pinterest or your own work. Put them in a folder called `examples`. 7. One thing your motion must never do. If an answer is blank, ask for it once more, then move on. Never fill a gap with a guess. ## Step 2: Write brand.md Save it in the project root, under 300 words: ``` # Brand ## Name and what we do ## Audience ## What we promote (with the real link) ## The feeling ## Assets Colours (hex, typed by me or sampled from a named source), fonts, logo file names ## Never ``` ## Step 3: Write MOTION.md from the frames