Новый навык от дизайнера Benji Taylor: позволяет агентам создавать с помощью React и CSS упрощенные интерфейсы, выглядящие как «настоящий продукт», для заголовков маркетинговых страниц, карточек функций и иллюстраций в документации. Это могут быть статичные иллюстрации или демонстрационные анимации длительностью 10–16 секунд с курсором, включающие библиотеку компонентов, десятки примеров и скрипты записи, что позволяет агенту сделать скриншот готового результата для самопроверки.
Аудит безопасности: не проводился
- Сканирование еще не выполнено
Обоснование
- Сначала план, затем код: определите позицию и размеры (автор рекомендует для заголовка с текстом рядом примерно 720 × 340, а для карточек — 400 × 300), затем задайте тему и уровень детализации, после чего напишите 3–5 тактов и финальный результат; если элемент помещается в мобильную колонку, создайте отдельную компактную версию
- Требование начинать копирование с наиболее близкого «золотого» примера (статичные карточки, AI-чат, ошибки форм, перетаскивание для сортировки, перетаскивание графиков, редактирование таблиц и т.д.), использовать node scripts/film.mjs для создания статичных кадров и полной анимации, сравнивая результат с примером бок о бок
- Перечислены типичные ошибки: перегруженность информацией, сходство с wireframe, отступы внутри окна с полями по всем краям карточки, одинаковый визуальный вес всех элементов, а также шаблонные AI-иконки в фиолетовых тонах с блеском; реальный текст используется только там, где это важно для сюжета, обычно в 3–7 местах, в остальных случаях используются заглушки
- kit/ предоставляет такие компоненты, как Stage, Window, Phone, скрипты курсора Act и другие; в каталоге навыков указано лицензирование MIT
- Навык был добавлен на skills.sh всего 1 дней назад, за 24 часов было выполнено 804 установок (что отражает только уровень интереса)
Использование
- Команда установки появится после успешного прохождения аудита; навык активируется при запросе создать демонстрационную анимацию продукта, иллюстрацию карточки функций или фейковый интерфейс (faux UI)
- Не требуется аккаунт или внешние сервисы; необходимы React, react-dom, lucide-react, для просмотра примеров используются npm install и npm run dev
Риски
- В этом выпуске аудит не проводился, установлен фиксированный рейтинг C, команда установки не отображается; в SKILL.md указано, что агент должен устанавливать зависимости через npm и запускать встроенный скрипт записи film.mjs, однако эти скрипты не были просканированы; на странице skills.sh не отображаются SKILL.md и результаты стороннего аудита, в данном случае использовался оригинальный текст с GitHub
- В примерах присутствуют имитации интерфейсов реальных продуктов, таких как Figma, Linear, Slack, Gmail, и их реальные логотипы; в SKILL.md указано требование заимствовать только взаимодействие, но не идентичность чужих продуктов; при использовании на собственных страницах избегайте ситуаций, когда пользователи могут принять их за скриншоты чужих продуктов
- Репозиторий только что опубликован, количество звезд единичное; процесс длинный (планирование, съемка, сравнение, проверка, написание REHEARSAL.md), что приводит к большому расходу токенов