скилл CX Codex

light-spotlight-render — скилл для Claude Code: HTML-анимация

Q: Как установить light-spotlight-render в Claude Code?

Выполните `npx skills add vibe-motion/skills --skill light-spotlight-render -a claude-code`. Файл скилла будет доступен по пути `~/.claude/skills/light-spotlight-render/SKILL.md`.

Скилл создаёт HTML-анимацию, в которой световое пятно раскрывает текст. Задайте параметры эффекта и получите файл для просмотра в браузере.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

npx skills add vibe-motion/skills --skill light-spotlight-render -a claude-code

Открыть на GitHub

Что делает light-spotlight-render

Скилл собирает автономную HTML-анимацию из шаблона assets/light_spotlight_template.html. Скрипт scripts/render_light_spotlight.py подставляет очищенные значения параметров: текст, угол и цикл поворота, размер лампы, свечение, цвета и размеры видео. Можно задать путь вывода; имя файла по умолчанию строится на основе текста.

В анимации сохраняется точка масштабирования у вершины лампы, поэтому пятно растёт от её кончика, а не от оси поворота. Цвет фона transparent подходит для прозрачного фона. Для работы нужен Python 3. Скрипт выдаёт HTML, а не видео: ролик после этого придётся получить отдельным инструментом или захватом из браузера.

Какие задачи решает

создать анимацию раскрытия текста световым пятном
настроить угол и цикл качания прожектора
изменить цвет текста, фона и маски
сохранить анимацию как автономный HTML-файл

Примеры запросов агенту

Создай HTML-анимацию, которая раскрывает текст «vibe-motion» прожектором.
Сделай световое пятно шире и измени цвет фона на прозрачный.
Сгенерируй анимацию логотипа в HTML и сохрани её в out/logo.html.

Как установить light-spotlight-render

1Через Skills CLI (Vercel)

npx skills add vibe-motion/skills --skill light-spotlight-render -a claude-code

2Вручную: положить файлы

~/.claude/skills/light-spotlight-render/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/light-spotlight-render/

1Через Skills CLI (Vercel)

npx skills add vibe-motion/skills --skill light-spotlight-render -a codex

2Вручную: положить файлы

.agents/skills/light-spotlight-render/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add vibe-motion/skills --skill light-spotlight-render -a cursor

2Вручную: положить файлы

.cursor/skills/light-spotlight-render/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install vibe-motion/skills light-spotlight-render

2Вручную: положить файлы

.github/skills/light-spotlight-render/SKILL.md

1Через Skills CLI (Vercel)

npx skills add vibe-motion/skills --skill light-spotlight-render -a gemini-cli

2Командой платформы

gemini skills install https://github.com/vibe-motion/skills --path light-spotlight-render

Вручную: положить файлы

.devin/skills/light-spotlight-render/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add vibe-motion/skills --skill light-spotlight-render -a opencode

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о light-spotlight-render

Как установить light-spotlight-render в Claude Code?

Выполните npx skills add vibe-motion/skills --skill light-spotlight-render -a claude-code. Файл скилла будет доступен по пути ~/.claude/skills/light-spotlight-render/SKILL.md.

Что делает light-spotlight-render?

Он создаёт автономную HTML-анимацию, в которой качающийся прожектор раскрывает заданный текст. Готовый файл можно открыть в браузере.

Можно ли получить видео вместо HTML?

Скилл создаёт HTML-файл. Для видео после этого понадобится другой инструмент или захват анимации из браузера.

Похожие скиллы

Всё по теме «Дизайн» →

frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. 979 543установок codebase-design Matt Pocock Скилл помогает проектировать модули с небольшим интерфейсом и скрытой внутри сложностью. Подходит для рефакторинга, тестируемости и поиска чистого seam. 850 344установок

Из того же набора7

claude-typer Скилл превращает текст промпта в ролик, где строка печатается сама в окне в стиле Claude, и отдаёт путь к готовому .mov в текущей папке. CX Codex +1 1 100установок procedural-fish-render Автоматизирует запуск Remotion для экспорта процедурной анимации рыбы в видеофайл через проектный скрипт. CX Codex +1 1 000установок ruler-progress-render Загружает проект ruler-progress-animator и рендерит шкалу прогресса через Remotion. Пригодится для быстрой генерации анимации линейки с прозрачным фоном. CX Codex +1 958установок remotion-3d-ticker Создаёт зацикленную трёхмерную вертикальную прокрутку для видео в Remotion. Помогает собирать многоколоночные фотостены и титры с параллаксом. CX Codex +1 852установок wechat-2d-render Клонирует проект wechat-2d и собирает через Remotion демо-видео с анимацией чата в стиле WeChat. Пригодится, когда нужен готовый ролик для вставки в монтаж. CX Codex +1 817установок threejs-earth-render Клонирует репозиторий с Three.js Earth, рендерит анимацию маршрута по глобусу через Puppeteer и сохраняет GIF или MP4. CX Codex +1 653установок