ui-demo
Записывайте профессиональные демонстрационные видео веб‑приложений с помощью Playwright, добавляя курсор‑оверлей, субтитры и плавные паузы.
Суть
Что это за skill и зачем он нужен
Скилл позволяет автоматически создавать демонстрационные ролики UI, используя Playwright‑видеозапись. Процесс разбит на три фазы — Discover, Rehearse и Record. В фазе Discover собираются сведения о полях и элементах интерфейса, в Rehearse проверяются все селекторы, а в Record генерируется видео с анимированным курсором, субтитрами и естественной скоростью ввода. Включены готовые функции‑шаблоны: injectCursor, injectSubtitleBar, moveAndClick, typeSlowly, panElements и другие, что упрощает настройку сценария под любой веб‑сервис.
Установка
Как установить
npx skills add https://github.com/affaan-m/everything-claude-code --skill ui-demoСценарии
Когда использовать
Подходит
- Пользователь просит «демо‑видео», «скринкаст», «обучающий ролик» для продукта
- Необходимо визуально продемонстрировать рабочий процесс или новую функцию
- Требуется видео для документации, онбординга или презентации заказчику
- Нужен быстрый способ получить готовый ролик без ручного записи экрана
Не подходит
- Для статических скриншотов или GIF‑анимаций, где видео‑формат избыточен
- Когда приложение сильно зависит от аппаратных ресурсов, а запись в headless‑режиме нестабильна
- Если требуется запись интерактивных действий в реальном времени (например, живой стрим)
- При отсутствии доступа к исходному коду или возможности установить npm‑пакет
Доверие
Проверки безопасности
Средний риск · 1 замечание.
Проверка не нашла критичных проблем.
Предупреждений нет.
Оценка 93/100 · проанализировано 2 раздела.
Похожие