NeVibeCode · 2 909 карточек
Скиллы по теме «Фронтенд и UI»
Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов.
frontend-design
официальный скилл Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает.
1 025 790установок
design-taste-frontend скилл Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным.
CX Codex +1
678 700установок
prototype скилл Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом.
986 201установок
hyperframes скилл Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта.
CX Codex +1
1 200 000установок
hyperframes-cli скилл Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке.
CX Codex +1
1 300 000установок
webapp-testing
официальный скилл Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера.
186 758установок
hyperframes-registry скилл Находит и добавляет в проект около 450 готовых визуальных блоков HyperFrames — от титров до шейдеров. Пригодится, когда видеоэффект проще взять из базы, чем верстать с нуля.
CX Codex +1
1 000 000установок
ui-ux-pro-max скилл Скилл подключает к агенту локальную базу из 119 UX-правил, 74 шрифтовых пар и 192 палитр. Помогает проектировать интерфейсы и проверять доступность.
CX Codex +1
417 000установок
impeccable скилл Скилл для ИИ-агента: проектирует и переделывает интерфейсы — лендинги, дашборды, формы, экраны iOS и Android. Пригодится, когда вёрстку пора привести в порядок по правилам дизайна.
CX Codex +1
363 400установок
web-artifacts-builder
официальный скилл Скилл собирает сложные HTML-артефакты для claude.ai на React, Tailwind CSS и shadcn/ui. Подходит для интерфейсов с состоянием и маршрутизацией.
112 122установок
theme-factory
официальный скилл Применяет готовые цветовые палитры и пары шрифтов к слайдам, документам и HTML-страницам. Подходит, когда материалу нужен единый стиль.
94 921установок
algorithmic-art
официальный скилл Создаёт генеративное искусство на p5.js с seed-случайностью и настройкой параметров. Подходит для flow fields, частиц и кодовых арт-экспериментов.
89 081установок
remotion-to-hyperframes скилл Конвертирует код Remotion или видеофутажи в HyperFrames с покадровой проверкой оригинала через SSIM.
CX Codex +1
510 300установок
shadcn скилл Скилл ведёт агента по работе с shadcn/ui: добавляет компоненты, ищет в реестрах, чинит верстку и собирает дизайн-систему по вашему описанию.
CX Codex +1
123 300установок
slideshow скилл Собирает слайд-деку из сцен HyperFrames: фрагменты, ветвление по хотспотам и режим докладчика с заметками. Для показа вживую, а не для рендера в видео.
CX Codex +1
420 300установок
figma скилл Импортирует ассеты, токены бренда и компоненты из Figma в проект HyperFrames и собирает из кадров анимацию. Пригодится, когда нужно оживить макет, а не вставлять статичные картинки.
CX Codex +1
334 000установок
vercel-composition-patterns скилл Свод правил, по которым агент переводит React-компоненты с Boolean props на compound components и общий контекст.
CX Codex +1
418 600установок
emil-design-eng скилл Скилл задаёт правила для полировки интерфейсов, компонентов и анимаций. Пригодится, когда UI работает, но требует более точных состояний и переходов.
CX Codex +1
388 200установок
vercel-react-native-skills скилл Набор правил по React Native и Expo для ИИ-агента: списки, анимации, навигация. Пригодится, когда агент правит мобильный код и надо, чтобы он делал это одинаково.
CX Codex +1
255 200установок
review-animations скилл Проверяет код интерфейсных анимаций по принципам Эмиля Ковальски. Помогает убрать дерганые переходы, медленный ease-in и лишнюю нагрузку на процессор.
CX Codex +1
256 500установок
apple-design скилл Переносит принципы физического интерфейса Apple с докладов WWDC в веб на CSS, Pointer Events и Motion. Пригодится при верстке жестов, шторки и прерываемых пружин.
CX Codex +1
244 500установок
animation-vocabulary скилл Скилл подбирает точный термин для описанной веб-анимации. Пригодится, когда эффект нужно понятно назвать для промпта или дизайнера.
CX Codex +1
239 000установок
improve-animations скилл Скилл проводит ревизию анимаций в кодовой базе и составляет готовые планы доработок. Помогает найти неудачные тайминги и прыгающие элементы, не меняя код напрямую.
CX Codex +1
224 200установок
find-animation-opportunities скилл Ищет в коде и интерфейсе места для уместной анимации, а лишние варианты отбрасывает. Подходит для проверки идеи «сделать интерфейс живее».
CX Codex +1
208 900установок
pick-ui-library скилл Скилл подбирает библиотеку под конкретную задачу фронтенда по списку Эмила Ковальски: тосты, графики, OTP-поля, виртуализация, drag and drop. Запускается только по явному вызову.
CX Codex +1
185 400установок
turborepo скилл Настраивает монорепозитории с Turborepo и чинит пайплайны задач. Пригодится при правках turbo.json, кеширования или сборки в CI.
CX Codex +1
84 700установок
vercel-react-view-transitions скилл Скилл ведёт агента по нативным view transitions в React: переходы между страницами, общие элементы, появление и исчезновение блоков без сторонних библиотек.
CX Codex +1
168 100установок
prototype скилл Скилл собирает несколько по-настоящему разных вариантов одного куска UI и ставит их за визуальный пикер: переключаете на ходу и выбираете тот, что нравится больше.
CX Codex +1
174 300установок
animate скилл Создаёт анимации интерфейса с нуля по принципам Эмиля Ковальски. Пригодится при верстке переходов или оживлении компонентов.
CX Codex +1
172 700установок
migrate-radix-to-base скилл Переводит компоненты и проекты React с Radix UI на Base UI (@base-ui/react). Пригодится при смене базовой библиотеки в проектах на shadcn/ui.
CX Codex +1
30 400установок
hallmark скилл Скилл для ИИ-кодинга, который заставляет сгенерированные интерфейсы выглядеть сделанными, а не сгенерированными. Пригодится, когда просишь агента собрать новую страницу или сайт.
CX Codex +1
70 800установок
ask-sonner скилл Скилл по библиотеке тостов Sonner для React: подскажет, как подключить Toaster, выбрать вызов toast() и починить тосты, которые не появляются.
CX Codex +1
140 500установок
design-system скилл Скилл собирает дизайн-токены, спецификации компонентов и презентационные слайды. Подойдёт, когда интерфейс и слайды должны следовать одной системе.
CX Codex +1
43 200установок
remotion-best-practices скилл Маршрутизирует задачи Remotion к подходящим инструкциям для создания видео, React-разметки, карт, мультимедиа и рендера.
CX Codex +1
684 500установок
animate-expo скилл Создаёт мобильные анимации для React Native и Expo на базе Reanimated и Gesture Handler. Помогает избежать просадок кадров на реальных устройствах.
CX Codex +1
137 900установок
design скилл Скилл для генерации логотипов, бренд-айдентики, дизайн-токенов, слайдов на Chart.js и баннеров через ИИ и Python-скрипты.
CX Codex +1
41 800установок
ui-styling скилл Скилл для сборки доступных интерфейсов на shadcn/ui и Tailwind CSS: компоненты, темы, тёмная тема, адаптивные сетки и canvas-дизайн.
CX Codex +1
41 200установок
brand скилл Скилл держит голос бренда, визуальные правила и дизайн-токены в одном файле, а потом раздаёт их промптам агента и вашему CSS.
CX Codex +1
40 500установок
banner-design скилл Создаёт баннеры для соцсетей, рекламы и сайтов в HTML/CSS с готовыми размерами и стилями. Пригодится при сборке креативов без графических редакторов.
CX Codex +1
40 000установок
slides скилл Создаёт адаптивные HTML-презентации с графиками Chart.js и дизайн-токенами. Помогает собирать питч-деки и маркетинговые слайды прямо из терминала.
CX Codex +1
39 300установок
1–40 из 2 909
