# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 2 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=2 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [vercel-optimize](https://affpapa.org/nevibecode/skills/vercel-optimize.md) — скилл · vercel-labs · Claude Code, Codex, Cursor +3 · 111200 установок — Скилл для аудита расходов и скорости на Vercel: сначала метрики, потом правки в коде и настройках проекта. - [frontend-ui-engineering](https://affpapa.org/nevibecode/skills/frontend-ui-engineering.md) — скилл · addyosmani · Claude Code, Codex, Cursor +3 · 67400 установок — Скилл задаёт правила для доступных адаптивных интерфейсов и компонентов. - [performance-optimization](https://affpapa.org/nevibecode/skills/performance-optimization.md) — скилл · addyosmani · Claude Code, Codex, Cursor +3 · 65200 установок — Скилл для агентов ИИ-кодинга: сначала замеряет, потом чинит узкое место — от Core Web Vitals до N+1 запросов и индексов в базе. - [ai-sdk](https://affpapa.org/nevibecode/skills/vercel-ai-sdk.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 66100 установок — Скилл помогает писать код на базе Vercel AI SDK и не допускать устаревших API. - [browser-testing-with-devtools](https://affpapa.org/nevibecode/skills/browser-testing-with-devtools.md) — скилл · addyosmani · Claude Code, Codex, Cursor +3 · 58600 установок — Скилл подключает агента к браузеру через Chrome DevTools MCP. - [mobile-native](https://affpapa.org/nevibecode/skills/mobile-native.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 86600 установок — Убирает мелочи, из-за которых веб-приложение на телефоне выдаёт себя: залипающий hover, вспышку при тапе, ошибку с 100vh. - [next-dev-loop](https://affpapa.org/nevibecode/skills/next-dev-loop.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 22200 установок — Скилл проверяет, что правка в Next.js реально работает в запущенном приложении, а не только компилируется. - [next-cache-components-adoption](https://affpapa.org/nevibecode/skills/next-cache-components-adoption.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 21300 установок — Включает Cache Components в Next.js и помогает разобрать ошибки блокирующего пререндеринга. - [next-cache-components-optimizer](https://affpapa.org/nevibecode/skills/next-cache-components-optimizer.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 18800 установок — Ускоряет отрисовку статического каркаса страниц в Next.js. - [break-ui](https://affpapa.org/nevibecode/skills/break-ui.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 65400 установок — Скилл проверяет интерфейс на реалистичных крайних данных и показывает, что ломается. - [schema](https://affpapa.org/nevibecode/skills/schema.md) — скилл · coreyhaines31 · Claude Code, Codex, Cursor +3 · 78900 установок — Скилл помогает добавлять и исправлять структурированные данные на страницах сайта. - [design-md](https://affpapa.org/nevibecode/skills/design-md.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 64800 установок — Скилл выгружает экраны из Google Stitch через MCP-сервер и собирает файл DESIGN.md с описанием дизайн-системы, цветов и компонентов. - [signup](https://affpapa.org/nevibecode/skills/signup.md) — скилл · coreyhaines31 · Claude Code, Codex, Cursor +3 · 72300 установок — Скилл ведёт агента по чек-листу CRO для формы регистрации: разбирает поля, шаги и экран после отправки, возвращает правки по приоритету. - [popups](https://affpapa.org/nevibecode/skills/popups.md) — скилл · coreyhaines31 · Claude Code, Codex, Cursor +3 · 70900 установок — Скилл помогает проектировать конвертящие попапы, баннеры и оверлеи без назойливости для пользователей. - [enhance-prompt](https://affpapa.org/nevibecode/skills/enhance-prompt.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 58300 установок — Превращает неточные идеи интерфейса в детальные промпты для Google Stitch. - [stitch-loop](https://affpapa.org/nevibecode/skills/stitch-loop.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 56400 установок — Организует автономную сборку страниц через Stitch MCP. - [remotion-render](https://affpapa.org/nevibecode/skills/remotion-render.md) — скилл (официальный OpenAI) · Remotion · Codex, ChatGPT · 3 установки — Экспортирует видео и отдельные кадры из проектов Remotion через консольные команды. - [remotion-create](https://affpapa.org/nevibecode/skills/remotion-dev-remotion-create.md) — скилл · remotion-dev · Claude Code, Codex, Cursor +3 · 214000 установок — Скилл разворачивает новый проект Remotion и пишет первую композицию на React. - [shadcn-ui](https://affpapa.org/nevibecode/skills/shadcn-ui.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 53400 установок — Помогает находить, добавлять и настраивать компоненты shadcn/ui в React-проектах. - [remotion-captions](https://affpapa.org/nevibecode/skills/remotion-dev-remotion-captions.md) — скилл · remotion-dev · Claude Code, Codex, Cursor +3 · 211800 установок — Скилл для работы с субтитрами в Remotion: транскрипция видео, вывод и анимация подписей, импорт из .srt. - [remotion-markup](https://affpapa.org/nevibecode/skills/remotion-dev-remotion-markup.md) — скилл · remotion-dev · Claude Code, Codex, Cursor +3 · 207700 установок — Скилл задаёт правила написания React-разметки для Remotion: анимации через кадры, работа с медиа и эффектами. - [remotion-interactivity](https://affpapa.org/nevibecode/skills/remotion-dev-remotion-interactivity.md) — скилл · remotion-dev · Claude Code, Codex, Cursor +3 · 202900 установок — Подсказывает агенту, как размечать компоненты Remotion для редактирования в Remotion Studio. - [slidev](https://affpapa.org/nevibecode/skills/slidev.md) — скилл · slidevjs · Claude Code, Codex, Cursor +3 · 13000 установок — Скилл, который помогает агенту собирать технические слайды на Slidev: разметка, код с подсветкой, анимации, экспорт в PDF. - [gsap-core](https://affpapa.org/nevibecode/skills/gsap-core.md) — скилл · greensock · Claude Code, Codex, Cursor +3 · 75800 установок — Скилл объясняет и пишет базовые GSAP-анимации для DOM и SVG. - [stitch::react-components](https://affpapa.org/nevibecode/skills/stitchreact-components.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 50400 установок — Превращает дизайны Stitch в компоненты React с Vite. - [gsap-scrolltrigger](https://affpapa.org/nevibecode/skills/gsap-scrolltrigger.md) — скилл · greensock · Claude Code, Codex, Cursor +3 · 72800 установок — Обучает ИИ-агента писать анимации по скроллу с плагином ScrollTrigger от GreenSock: закреплять секции и связывать таймлайны с прокруткой через scrub. - [remotion-upgrade](https://affpapa.org/nevibecode/skills/remotion-dev-remotion-upgrade.md) — скилл · remotion-dev · Claude Code, Codex, Cursor +3 · 191900 установок — Обновляет библиотеки Remotion и сопутствующие пакеты в проекте до актуальной версии. - [gsap-performance](https://affpapa.org/nevibecode/skills/gsap-performance.md) — скилл · greensock · Claude Code, Codex, Cursor +3 · 69900 установок — Официальный скилл GSAP по производительности: подсказывает агенту, какие свойства анимировать, а какие ломают кадры. - [gsap-timeline](https://affpapa.org/nevibecode/skills/gsap-timeline.md) — скилл · greensock · Claude Code, Codex, Cursor +3 · 69700 установок — Скилл помогает собирать последовательности GSAP-анимаций, управлять таймингом и воспроизведением. - [gsap-plugins](https://affpapa.org/nevibecode/skills/gsap-plugins.md) — скилл · greensock · Claude Code, Codex, Cursor +3 · 67700 установок — Скилл объясняет, как подключать и использовать плагины GSAP: ScrollTo, Flip, Draggable, SplitText и другие. - [gsap-react](https://affpapa.org/nevibecode/skills/gsap-react.md) — скилл · greensock · Claude Code, Codex, Cursor +3 · 66900 установок — Скилл подсказывает, как создавать анимации GSAP в React и Next.js, ограничивать их область действия и очищать при размонтировании компонента. - [remotion-studio](https://affpapa.org/nevibecode/skills/remotion-dev-remotion-studio.md) — скилл · remotion-dev · Claude Code, Codex, Cursor +3 · 177200 установок — Скилл запускает Remotion Studio и открывает предпросмотр видео. - [animation-performance](https://affpapa.org/nevibecode/skills/animation-performance.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 36800 установок — Диагностический скилл, который ищет причину пропущенных кадров в веб-анимациях и подсказывает, какой свойство анимировать вместо дорогого. - [gsap-utils](https://affpapa.org/nevibecode/skills/gsap-utils.md) — скилл · greensock · Claude Code, Codex, Cursor +3 · 65700 установок — Скилл помогает агенту работать с утилитами gsap.utils: диапазонами, случайными значениями, привязкой к шагу и коллекциями. - [gsap-frameworks](https://affpapa.org/nevibecode/skills/gsap-frameworks.md) — скилл · greensock · Claude Code, Codex, Cursor +3 · 63000 установок — Официальный скилл GSAP для Vue, Nuxt, Svelte и SvelteKit. - [daisyui](https://affpapa.org/nevibecode/skills/daisyui.md) — скилл · saadeghi · Claude Code, Codex, Cursor +3 · 12100 установок — Скилл подключает к ИИ-агенту справочник компонентов daisyUI 5, чтобы тот писал разметку на готовых классах, а не выдумывал свои. - [next-partial-prefetching-adoption](https://affpapa.org/nevibecode/skills/next-partial-prefetching-adoption.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 9200 установок — Включает Partial Prefetching в приложении Next.js и помогает проверить, что предзагруженный интерфейс сохранился. - [remotion](https://affpapa.org/nevibecode/skills/remotion.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 41400 установок — Собирает экраны проекта Stitch в ролик на Remotion с переходами, приближением и текстовыми подписями. - [anatomy](https://affpapa.org/nevibecode/skills/anatomy.md) — скилл · wheresryan22 · Claude Code, Codex, Cursor +3 · 21800 установок — Генерирует детальные интерактивные изометрические SVG-иллюстрации в виде физических приборов вместо абстрактных схем. - [mcp-apps-builder](https://affpapa.org/nevibecode/skills/mcp-apps-builder.md) — скилл · mcp-use · Claude Code, Codex, Cursor +3 · 32200 установок — Скилл помогает собирать, менять, отлаживать и проверять TypeScript MCP-серверы и MCP Apps. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=3 ## Уточнить [react](https://affpapa.org/nevibecode/tag/react.md) · [ui](https://affpapa.org/nevibecode/tag/ui.md) · [typescript](https://affpapa.org/nevibecode/tag/typescript.md) · [css](https://affpapa.org/nevibecode/tag/css.md) · [animation](https://affpapa.org/nevibecode/tag/animation.md) · [accessibility](https://affpapa.org/nevibecode/tag/accessibility.md) · [design-system](https://affpapa.org/nevibecode/tag/design-system.md) · [nextjs](https://affpapa.org/nevibecode/tag/nextjs.md) · [tailwind](https://affpapa.org/nevibecode/tag/tailwind.md) · [javascript](https://affpapa.org/nevibecode/tag/javascript.md) · [webgl](https://affpapa.org/nevibecode/tag/webgl.md) · [typography](https://affpapa.org/nevibecode/tag/typography.md) ## Сузить этот список Параметры: `?platform=`, `&topic=<…>`, `&sort=installs|stars|new|updated` — значения в https://affpapa.org/nevibecode/agents.md --- NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md