NeVibeCode · 2 909 карточек
Скиллы по теме «Фронтенд и UI»
Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов.
vercel-optimize скилл Скилл для аудита расходов и скорости на Vercel: сначала метрики, потом правки в коде и настройках проекта.
CX Codex +1
111 200установок
frontend-ui-engineering скилл Скилл задаёт правила для доступных адаптивных интерфейсов и компонентов. Пригодится при создании страниц, исправлении UI и работе с состоянием.
CX Codex +1
67 400установок
performance-optimization скилл Скилл для агентов ИИ-кодинга: сначала замеряет, потом чинит узкое место — от Core Web Vitals до N+1 запросов и индексов в базе.
CX Codex +1
65 200установок
ai-sdk скилл Скилл помогает писать код на базе Vercel AI SDK и не допускать устаревших API. Он проверяет локальную документацию пакета перед генерацией.
CX Codex +1
66 100установок
browser-testing-with-devtools скилл Скилл подключает агента к браузеру через Chrome DevTools MCP. Помогает проверять верстку, ошибки в консоли и сетевые запросы прямо во время отладки фронтенда.
CX Codex +1
58 600установок
mobile-native скилл Убирает мелочи, из-за которых веб-приложение на телефоне выдаёт себя: залипающий hover, вспышку при тапе, ошибку с 100vh.
CX Codex +1
86 600установок
next-dev-loop скилл Скилл проверяет, что правка в Next.js реально работает в запущенном приложении, а не только компилируется. Нужен при разработке через next dev.
CX Codex +1
22 200установок
next-cache-components-adoption скилл Включает Cache Components в Next.js и помогает разобрать ошибки блокирующего пререндеринга. Нужен при переходе на cacheComponents: true.
CX Codex +1
21 300установок
next-cache-components-optimizer скилл Ускоряет отрисовку статического каркаса страниц в Next.js. Скилл находит медленные Suspense-границы через падающий e2e-тест Playwright и чинит навигацию.
CX Codex +1
18 800установок
break-ui скилл Скилл проверяет интерфейс на реалистичных крайних данных и показывает, что ломается. Пригодится перед выпуском компонента или экрана.
CX Codex +1
65 400установок
schema скилл Скилл помогает добавлять и исправлять структурированные данные на страницах сайта. Пригодится, если нужно подготовить JSON-LD и проверить, поддерживает ли Google нужный вид расширенного результата.
CX Codex +1
78 900установок
design-md
официальный скилл Скилл выгружает экраны из Google Stitch через MCP-сервер и собирает файл DESIGN.md с описанием дизайн-системы, цветов и компонентов.
CX Codex +1
64 800установок
signup скилл Скилл ведёт агента по чек-листу CRO для формы регистрации: разбирает поля, шаги и экран после отправки, возвращает правки по приоритету.
CX Codex +1
72 300установок
popups скилл Скилл помогает проектировать конвертящие попапы, баннеры и оверлеи без назойливости для пользователей.
CX Codex +1
70 900установок
enhance-prompt
официальный скилл Превращает неточные идеи интерфейса в детальные промпты для Google Stitch. Скилл подтягивает дизайн-систему из DESIGN.md и расписывает структуру экрана.
CX Codex +1
58 300установок
stitch-loop
официальный скилл Организует автономную сборку страниц через Stitch MCP. Агент берёт задачу из файла-эстафеты, создаёт экран, переносит код в проект и сразу пишет задание для следующей итерации.
CX Codex +1
56 400установок
remotion-render
официальный скилл Экспортирует видео и отдельные кадры из проектов Remotion через консольные команды.
CX Codex GP ChatGPT
3установок
remotion-create скилл Скилл разворачивает новый проект Remotion и пишет первую композицию на React. Пригодится, когда нужно собрать видео кодом, а не в редакторе.
CX Codex +1
214 000установок
shadcn-ui
официальный скилл Помогает находить, добавлять и настраивать компоненты shadcn/ui в React-проектах. Пригодится для сборки интерфейсов с Tailwind CSS.
CX Codex +1
53 400установок
remotion-captions скилл Скилл для работы с субтитрами в Remotion: транскрипция видео, вывод и анимация подписей, импорт из .srt.
CX Codex +1
211 800установок
remotion-markup скилл Скилл задаёт правила написания React-разметки для Remotion: анимации через кадры, работа с медиа и эффектами. Пригодится, если вы собираете видео кодом.
CX Codex +1
207 700установок
remotion-interactivity скилл Подсказывает агенту, как размечать компоненты Remotion для редактирования в Remotion Studio. Пригодится при верстке видеосцен с настраиваемыми стилями, текстом и таймлайном.
CX Codex +1
202 900установок
slidev скилл Скилл, который помогает агенту собирать технические слайды на Slidev: разметка, код с подсветкой, анимации, экспорт в PDF.
CX Codex +1
13 000установок
gsap-core скилл Скилл объясняет и пишет базовые GSAP-анимации для DOM и SVG. Подойдёт для tweens, easing, stagger и адаптации к reduced motion.
CX Codex +1
75 800установок
stitch::react-components
официальный скилл Превращает дизайны Stitch в компоненты React с Vite. Также синхронизирует существующие компоненты с обновлёнными макетами.
CX Codex +1
50 400установок
gsap-scrolltrigger скилл Обучает ИИ-агента писать анимации по скроллу с плагином ScrollTrigger от GreenSock: закреплять секции и связывать таймлайны с прокруткой через scrub.
CX Codex +1
72 800установок
remotion-upgrade скилл Обновляет библиотеки Remotion и сопутствующие пакеты в проекте до актуальной версии. Пригодится, когда нужно синхронизировать зависимости и локальные скиллы без конфликтов.
CX Codex +1
191 900установок
gsap-performance скилл Официальный скилл GSAP по производительности: подсказывает агенту, какие свойства анимировать, а какие ломают кадры. Пригодится, когда анимация дёргается.
CX Codex +1
69 900установок
gsap-timeline скилл Скилл помогает собирать последовательности GSAP-анимаций, управлять таймингом и воспроизведением. Нужен для многошаговых и параллельных сцен.
CX Codex +1
69 700установок
gsap-plugins скилл Скилл объясняет, как подключать и использовать плагины GSAP: ScrollTo, Flip, Draggable, SplitText и другие. Пригодится, когда анимации в проекте уже на GSAP.
CX Codex +1
67 700установок
gsap-react скилл Скилл подсказывает, как создавать анимации GSAP в React и Next.js, ограничивать их область действия и очищать при размонтировании компонента.
CX Codex +1
66 900установок
remotion-studio скилл Скилл запускает Remotion Studio и открывает предпросмотр видео. Подойдёт, если вы хотите видеть композицию и проверять изменения прямо во время работы.
CX Codex +1
177 200установок
animation-performance скилл Диагностический скилл, который ищет причину пропущенных кадров в веб-анимациях и подсказывает, какой свойство анимировать вместо дорогого.
CX Codex +1
36 800установок
gsap-utils скилл Скилл помогает агенту работать с утилитами gsap.utils: диапазонами, случайными значениями, привязкой к шагу и коллекциями. Пригодится для анимаций на GSAP.
CX Codex +1
65 700установок
gsap-frameworks скилл Официальный скилл GSAP для Vue, Nuxt, Svelte и SvelteKit. Подсказывает, где создавать анимации и как чистить их при размонтировании.
CX Codex +1
63 000установок
daisyui скилл Скилл подключает к ИИ-агенту справочник компонентов daisyUI 5, чтобы тот писал разметку на готовых классах, а не выдумывал свои.
CX Codex +1
12 100установок
next-partial-prefetching-adoption скилл Включает Partial Prefetching в приложении Next.js и помогает проверить, что предзагруженный интерфейс сохранился. Подходит для перехода на новую схему prefetch.
CX Codex +1
9 200установок
remotion
официальный скилл Собирает экраны проекта Stitch в ролик на Remotion с переходами, приближением и текстовыми подписями. Пригодится для демонстрации интерфейса по шагам.
CX Codex +1
41 400установок
anatomy скилл Генерирует детальные интерактивные изометрические SVG-иллюстрации в виде физических приборов вместо абстрактных схем.
CX Codex +1
21 800установок
mcp-apps-builder скилл Скилл помогает собирать, менять, отлаживать и проверять TypeScript MCP-серверы и MCP Apps. Пригодится для инструментов, View, OAuth и Skills over MCP.
CX Codex +1
32 200установок
41–80 из 2 909
