NeVibeCode · 2 909 карточек
Скиллы по теме «Фронтенд и UI»
Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов.
brag скилл Делает короткий проморолик о проекте по его исходному коду с помощью Hyperframes. Без развёрнутого сайта и скриншотов.
CX Codex +1
20 300установок
make-interfaces-feel-better скилл Скилл помогает доводить детали интерфейса: от радиусов и иконок до анимаций. Пригодится при сборке компонентов и ревью фронтенд-кода.
CX Codex +1
73 400установок
find-docs скилл Тянет актуальную документацию, справочники API и примеры кода для любой библиотеки через Context7 CLI. Пригодится, когда агент отвечает по устаревшим данным обучения.
CX Codex +1
9 400установок
baoyu-markdown-to-html скилл Переводит Markdown в HTML с инлайн-CSS и темами под WeChat. Пригодится, когда статью нужно отдать в мессенджер или на площадку со своим оформлением.
CX Codex +1
32 200установок
interface-design скилл Скилл помогает проектировать и проверять интерфейсы продуктов: дашборды, админки, SaaS-приложения и инструменты. Он нужен, когда важны иерархия, состояния и единый стиль.
CX Codex +1
30 800установок
taste-design
официальный скилл Скилл формирует файл DESIGN.md для Google Stitch, задавая строгие дизайн-правила против шаблонных интерфейсов. Помогает настроить типографику, палитру и микроанимации для генерации экранов.
CX Codex +1
20 200установок
html-ppt скилл Скилл создаёт слайдовые презентации в статическом HTML на основе тем и шаблонов. Пригодится, когда нужно превратить заметки или текст в колоду с клавиатурной навигацией.
CX Codex +1
20 900установок
baoyu-compress-image скилл Сжимает изображения в WebP или PNG через системные утилиты вроде sips и cwebp. Пригодится для быстрой оптимизации картинок прямо в репозитории проекта.
CX Codex +1
28 200установок
tailwind-design-system скилл Помогает строить дизайн-системы на Tailwind CSS v4. Пригодится для библиотеки компонентов или унификации интерфейса в проекте.
CX Codex
70 180установок
react-doctor скилл Проверяет кодовую базу на React: находит проблемы архитектуры, доступности и рендеринга. Рассчитывает общую оценку здоровья проекта от 0 до 100.
CX Codex +1
19 200установок
frost-sequence-camera-orbit скилл Скилл собирает 22.5-секундную сцену: камера облетает ледяной логотип, он рассыпается, собирается в два текста и растворяется.
CX Codex +1
10 000установок
orbit-card скилл Скилл для встраивания готового 10-секундного 3D-блока HyperFrames: карточка фичи облетает сферу из точек по траектории камеры из Blender.
CX Codex +1
10 000установок
canopy-part-title скилл Блок HyperFrames, в котором плотный слой листьев пролетает через кадр, расходится и открывает заголовок. Пригодится, когда нужна готовая анимированная плашка с двумя строками текста.
CX Codex +1
10 000установок
code-slice-hero скилл Анимирует смену заголовка сеткой плиток с переворотом ячеек через WebGL 2 и Canvas 2D. Пригодится для сборки витрин и заставок с хронометражем 8 s в разрешении 1920×1080.
CX Codex +1
10 000установок
glass-shard-title скилл Собирает заголовок из осколков стекла: они летят сквозь туман, поворачиваются и складываются в буквы. Готовый блок HyperFrames 1920×1080 на 12.16 с.
CX Codex +1
10 000установок
cuboid-carousel скилл Скилл собирает 3D-карусель из скруглённых параллелепипедов с контентом: они влетают справа, едут волной и уходят влево. Пригодится для промо-роликов и титров.
CX Codex +1
10 000установок
accessibility скилл Скилл проводит аудит доступности веб-страницы и подсказывает, что исправить в исходниках. Пригодится, когда сайт нужно довести до WCAG 2.2 или проверить работу с клавиатурой и скринридером.
CX Codex +1
64 100установок
chrome-devtools скилл Скилл подключает Chrome DevTools через MCP для отладки страниц, браузерной автоматизации, анализа производительности и сетевых запросов.
CX Codex +1
8 600установок
nuxt-ui скилл Помогает агенту собирать интерфейсы на базе @nuxt/ui v4, настраивать темы Tailwind CSS и правильно выбирать компоненты библиотеки.
CX Codex +1
19 800установок
figma-implement-design
официальный скилл Скилл переводит макеты Figma в код интерфейса с сохранением структуры, токенов и визуального вида. Нужен при сборке компонентов и экранов по ссылке на макет.
CX Codex +1
6 700установок
bmad-agent-ux-designer скилл Подключает к проекту субагента Sally для проектирования пользовательского опыта и подготовки UX-спецификаций. Пригодится при детальной проработке интерфейсов перед написанием кода.
CX Codex +1
11 800установок
bmad-ux скилл Фиксирует видение интерфейса в файлах DESIGN.md и EXPERIENCE.md. Помогает спроектировать внешний вид и логику поведения системы без навязывания готовых шаблонов.
CX Codex +1
11 600установок
frontend-patterns скилл Скилл подсказывает паттерны для React и Next.js: компоненты, состояние, загрузка данных и производительность. Нужен при разработке и ревью интерфейса.
CX Codex +1
5 900установок
web-perf скилл Пошаговый аудит Core Web Vitals, диагностика медленной загрузки и поиск блокирующих скриптов прямо в терминале.
CX Codex +1
110 200установок
imagegen
официальный скилл Скилл создаёт и редактирует растровые изображения: иллюстрации, текстуры, спрайты и мокапы. Нужен, когда результатом должен стать bitmap-файл.
CX Codex +1
5 700установок
playground
официальный скилл Создаёт интерактивные HTML-песочницы с настройками, предпросмотром и готовым промптом. Подходит для визуального изучения темы или сборки небольшого инструмента.
7 967установок
app-store-screenshots скилл Собирает редактор на Next.js и ShadCN, в котором вы верстаете и выгружаете скриншоты для App Store и Google Play.
CX Codex +1
15 000установок
playwright-interactive
официальный скилл Сохраняет сессию Playwright для отладки локальных веб- и Electron-приложений. Пригодится для функционального и визуального QA после изменений.
CX Codex +1
5 500установок
chrome-devtools-cli скилл Позволяет агенту управлять браузером через Chrome DevTools: кликать по элементам, собирать снимки памяти и профилировать производительность прямо из терминала.
CX Codex +1
6 800установок
better-ui скилл Скилл задаёт точные правила для радиусов, теней, иконок и анимаций интерфейса. Пригодится, когда базовые взаимодействия уже работают и нужна визуальная доводка.
CX Codex +1
39 300установок
lavish скилл Превращает планы, сравнения и отчёты агента в HTML-файлы для просмотра, аннотаций и обратной связи.
CX Codex +1
22 900установок
frontend-slides скилл Скилл создаёт анимационные HTML-презентации с нуля и преобразует PPT/PPTX в веб-слайды. Подойдёт для докладов, питчей и внутренних презентаций.
CX Codex +1
5 500установок
web-design-engineer скилл Скилл настраивает агента на вёрстку веб-интерфейсов на HTML, CSS, JavaScript и React: дашбордов, прототипов и анимаций. Пригодится, когда нужен качественный визуальный фронтенд.
CX Codex +1
8 700установок
frontend-design-direction скилл Скилл задаёт направление для веб-интерфейсов: помогает продумать и проверить визуальную иерархию, состояния, адаптивность и доступность.
CX Codex +1
5 300установок
fixing-motion-performance скилл Скилл находит и устраняет просадки FPS в анимациях: скролл-эффектах, размытиях и перерисовках макета. Помогает убрать подёргивания интерфейса без смены используемой библиотеки.
CX Codex +1
26 900установок
liquid-glass-design скилл Скилл для Claude и других ИИ-редакторов: подсказывает агенту, как собрать интерфейс в стиле Liquid Glass из iOS 26. Пригодится, если вы пишете SwiftUI, UIKit или WidgetKit под iOS 26+.
CX Codex +1
5 200установок
stitch::generate-design
официальный скилл Скилл превращает текстовое описание или картинку в готовый экран интерфейса через Stitch MCP, а потом правит его точечными промптами.
CX Codex +1
10 800установок
accessibility скилл Проверяет и настраивает доступность интерфейсов по стандарту WCAG 2.2 Level AA для Web, iOS и Android. Пригодится при верстке компонентов, разметке ARIA и адаптации под скринридеры.
CX Codex +1
5 100установок
build-dashboard
официальный скилл Генерирует автономный HTML-дашборд с графиками Chart.js, карточками KPI и таблицами. Помогает быстро оформить результаты запроса или сырые данные в один файл для браузера.
CX Codex +1
9 100установок
stitch::extract-design-md
официальный скилл Извлекает дизайн-систему в файл DESIGN.md прямо из исходников фронтенда без сборки проекта. Помогает перенести визуальные токены и правила вёрстки в формат Stitch.
CX Codex +1
10 600установок
81–120 из 2 909
