Cinematic UI — скилл
Скилл заставляет агента выбрать режиссера и раскадровку для сайта, снять страницу со скроллом и проверить кадры.
- 104 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скрипты на Node запускают браузер и могут скачивать клипы из открытых библиотек в проект.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/cinematic-uiОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скрипты на Node запускают браузер и могут скачивать клипы из открытых библиотек в проект.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Cinematic UI, скилл версии 2.8, ведет агента от замысла к сайту как съемочный процесс. Агент подбирает режиссера и материал картинки (чернила, пиксель, печать, неон, фотография, 3D), пишет сценарий и раскадровку для каждой секции, собирает страницу с таймлайном на скролле и проверяет результат по отрисованным кадрам в трех размерах окна. Отдельный режим приложения задает правила для дашбордов и админок, где кино занимает малую часть кадра. В комплекте JS-модули в `kit/`, 44 текстовых эффекта и скрипт `find-footage.mjs`: он ищет видео в открытых библиотеках и записывает источники в `CREDITS.md`.
Для кого. Фронтенд-разработчикам и дизайнерам, которые делают лендинги, портфолио и дашборды в Claude Code или Codex и хотят уйти от шаблонного вида.
Подходит, если
- Лендинг кофейной подписки должен выглядеть как авторский проект, а не как набор карточек.
- Заказчик привел референс из фильма, и его атмосферу переносят в сайт: цвет, ритм, материал.
- Админку или дашборд делают с одной узнаваемой деталью вместо обычного ряда метрик.
- Готовый сайт проверяют по кадрам в трех размерах окна и получают список правок.
Не подходит, если
- Типовую страницу по готовой теме нужно собрать за один проход: десять этапов процесса избыточны.
- Задача не про сайт или веб-приложение: скилл режиссирует интерфейсы в браузере.
- Фирменный стиль расписан до мелочей и меняться не должен.
Пример запроса к агенту
/cinematic-ui главная страница подписки на кофе, режиссера и материал выбери сам.Ограничения
Скрипты проверки и записи требуют в проекте `playwright-core` и установленный Chrome или Edge, для видео нужен ffmpeg. Материалы агент запрашивает один раз: их присылает пользователь, берут из бесплатной библиотеки, генерируют или меняют кадр. Клипы из открытых библиотек приходят с отдельными источниками в `CREDITS.md`. Живые демо на сайте автора сделаны для вымышленных брендов. Скилл ведет процесс из десяти этапов, и на небольшую правку такой путь окажется тяжеловатым. Репозиторий распространяется под лицензией MIT.
Как отключить. Удалите папку `~/.claude/skills/cinematic-ui` (или `~/.codex/skills/cinematic-ui`). Если ставили `playwright-core` ради проверки, уберите его из зависимостей проекта отдельно.
Частые вопросы
Как запустить скилл?
Командой `/cinematic-ui` с описанием страницы. Агент сам выбирает режиссера, материал и раскадровку, а спрашивает лишь при неясном продукте, нехватке материалов или перед публикацией.
Подходит ли он для админок?
Да. Режим приложения действует на дашборды и консоли: кино занимает малую часть кадра, а экраны проверяются в восьми состояниях скриптом `app-screening.mjs`.
Работает ли он в Codex?
Да, папку клонируют в `~/.codex/skills/cinematic-ui`. Для других агентов достаточно указать на `SKILL.md`.
Можно ли записать сайт в видео?
Да: `node scripts/render-film.mjs ./site --tour 30 --out tour.mp4`, нужен ffmpeg.
Попадут ли названия фильмов в интерфейс?
Нет, если не просили дань уважения. Заимствуются приемы: положение камеры, ритм, свет, материал.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл Claude Code и других агентов для сборки сайтов, где режиссура задается до кода: арт-дирекшн, генерация ассетов локальными CLI и проверка анти-слоп линтеро
Три скилла для сайтов, которые запоминаются: скролл-сцены и 3D, аудит скролла и стратегия посадочной страницы.
Скилл для Claude Code и Codex: делает из AI-видео и кадров веб-анимацию, которая следует за прокруткой, курсором, касанием или наклоном устройства
Скилл собирает лендинг с одним полетом камеры сквозь сцены: прокрутка двигает время ролика вперед и назад.
Скилл, который собирает лендинг с полетом камеры сквозь сгенерированный 3D-мир, управляемым прокруткой
Бесплатный скилл для Claude: пишет ТЗ, подбирает видео и 3D, собирает кинематографичный лендинг и проверяет его скриншотами
Коротко о README
В README расписаны десять этапов съемки от замысла до отчета, десять живых демо на cinematicskill.com и отличие от запросов вида «сделай дорого»: режиссера выбирают по драматической задаче продукта, а результат проверяют на отрисованных кадрах.