# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 39 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=39 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [mapbox-web-integration-patterns](https://affpapa.org/nevibecode/skills/mapbox-web-integration-patterns.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 2600 установок — Официальные паттерны встраивания Mapbox GL JS в React, Vue, Svelte, Angular и на чистом JavaScript. - [svg-animation](https://affpapa.org/nevibecode/skills/svg-animation.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл для анимации SVG: отрисовка штриха, морфинг форм, движение по пути, анимированные градиенты и фильтры. - [60fps-animation](https://affpapa.org/nevibecode/skills/60fps-animation.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2600 установок — Переводит тяжёлые анимации CSS на transform и opacity для 60 кадров в секунду. - [accessible-animation](https://affpapa.org/nevibecode/skills/accessible-animation.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2600 установок — Скилл учит агента уважать prefers-reduced-motion: убирает опасное движение, но оставляет плавные переходы и подсказки интерфейса. - [static-import](https://affpapa.org/nevibecode/skills/static-import.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1400 установок — Объясняет синтаксис import в ES2015 и помогает решить, когда модуль стоит грузить сразу, а когда переключиться на динамический импорт. - [prpl](https://affpapa.org/nevibecode/skills/prpl.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл обучает ИИ-агента паттерну PRPL для ускорения первой загрузки веб-приложений на слабых устройствах и медленных сетях. - [tree-shaking](https://affpapa.org/nevibecode/skills/tree-shaking.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл объясняет tree shaking и подсказывает агенту, как убрать неиспользуемые экспорты из JavaScript-бандла. - [route-based](https://affpapa.org/nevibecode/skills/route-based.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1400 установок — Подсказывает агенту, как разбить SPA по маршрутам и грузить только тот код, который нужен на текущей странице. - [virtual-lists](https://affpapa.org/nevibecode/skills/virtual-lists.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1500 установок — Обучает агента технике виртуализации списков и таблиц в веб-приложениях. - [third-party](https://affpapa.org/nevibecode/skills/third-party.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1500 установок — Подсказывает, как снизить влияние сторонних скриптов на загрузку страницы и Core Web Vitals, не выкидывая аналитику и виджеты. - [import-on-visibility](https://affpapa.org/nevibecode/skills/import-on-visibility.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл учит агента откладывать загрузку компонентов и картинок до момента, когда пользователь доскроллит до них. - [awwwards-animations](https://affpapa.org/nevibecode/skills/awwwards-animations.md) — скилл · DevMartinese · Claude Code, Codex, Cursor +3 · 2900 установок — Скилл для React-анимаций уровня Awwwards и FWA: скролл, кастомные курсоры, переходы страниц, генеративная графика. - [imagen](https://affpapa.org/nevibecode/skills/sanjay3290-imagen.md) — скилл · sanjay3290 · Claude Code, Codex, Cursor +3 · 626 установок — Скилл генерирует изображения через модель Google Gemini и сохраняет их в проект. - [senior-fullstack](https://affpapa.org/nevibecode/skills/borghei-senior-fullstack.md) — скилл · borghei · Claude Code, Codex, Cursor +3 · 311 установок — Разворачивает каркасы веб-проектов на Next.js, FastAPI, Django или MERN и запускает статический аудит кодовой базы. - [maplibre-pmtiles-patterns](https://affpapa.org/nevibecode/skills/maplibre-pmtiles-patterns.md) — скилл · maplibre · Claude Code, Codex, Cursor +3 · 762 установки — Помогает развернуть векторные и растровые тайлы PMTiles в MapLibre GL JS без тайлового сервера. - [ui-design](https://affpapa.org/nevibecode/skills/mblode-ui-design.md) — скилл · mblode · Claude Code, Codex, Cursor +3 · 1400 установок — Выбирает визуальное направление, пишет код интерфейса и проверяет готовый фронтенд на дефекты. - [slide-deck](https://affpapa.org/nevibecode/skills/slide-deck.md) — скилл · coreyhaines31 · Claude Code, Codex, Cursor +3 · 342 установки — Собирает презентации в React/Next.js: черновик по брифу, правки существующей колоды, конвертация PPTX и экспорт в HTML, PDF или на Vercel. - [mapbox-web-performance-patterns](https://affpapa.org/nevibecode/skills/mapbox-web-performance-patterns.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл учит ИИ-агента оптимизировать приложения на Mapbox GL JS: убирать каскадные задержки данных, уменьшать бандл стилей и переводить маркеры на GPU-слои. - [cloud](https://affpapa.org/nevibecode/skills/cloud.md) — скилл · assistant-ui · Claude Code, Codex, Cursor +3 · 5000 установок — Подключает AssistantCloud к приложению на assistant-ui: история тредов между сессиями, обратная связь по сообщениям и загрузка файлов. - [gsap-web](https://affpapa.org/nevibecode/skills/gsap-web.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл помогает настраивать анимации на GSAP: от таймлайнов и ScrollTrigger до эффектов SplitText, Flip и плавной прокрутки с Lenis. - [micro-interaction](https://affpapa.org/nevibecode/skills/micro-interaction.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл для мелкой анимации интерфейса: ховеры, тоглы, тосты, шторки, перестановка списков. - [react](https://affpapa.org/nevibecode/skills/pedro-nauck-react.md) — скилл · Pedro Nauck · Claude Code, Codex, Cursor +3 · 448 установок — Скилл помогает писать и проверять компоненты и хуки React 19 с учётом React Compiler. - [atomic-design-fundamentals](https://affpapa.org/nevibecode/skills/atomic-design-fundamentals.md) — скилл · TheBushidoCollective · Claude Code, Codex, Cursor +3 · 766 установок — Помогает разложить компоненты интерфейса по уровням Atomic Design: от токенов до страниц. - [tailwindcss](https://affpapa.org/nevibecode/skills/pedro-nauck-tailwindcss.md) — скилл · Pedro Nauck · Claude Code, Codex, Cursor +3 · 447 установок — Скилл настраивает работу агента с Tailwind CSS v4. - [gpt-taste](https://affpapa.org/nevibecode/skills/tasteskill-gpt-taste.md) — скилл · tasteskill · Claude Code, Codex, Cursor +3 · 398 установок — Заставляет агента сначала генерировать визуальные референсы страниц, детально их разбирать и только потом писать код фронтенда. - [design-taste](https://affpapa.org/nevibecode/skills/design-taste.md) — скилл · h3nryprod01 · Claude Code, Codex, Cursor +3 · 720 установок — Скилл помогает создавать и дорабатывать веб-интерфейсы, разбирая визуальную иерархию, типографику, цвет, отступы и анимацию. - [screenshot-to-code](https://affpapa.org/nevibecode/skills/screenshot-to-code.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 1300 установок — Превращает скриншот, макет или экспорт из Figma в рабочий фронтенд-код и сверяет результат с картинкой. - [tanstack-pacer](https://affpapa.org/nevibecode/skills/tanstack-pacer.md) — скилл · tanstack-skills · Claude Code, Codex, Cursor +3 · 3900 установок — Скилл подсказывает агенту, как подключить TanStack Pacer: дебаунс, троттлинг, лимиты запросов, очереди и батчинг в одном пакете. - [tanstack-start](https://affpapa.org/nevibecode/skills/tanstack-start.md) — скилл · tanstack-skills · Claude Code, Codex, Cursor +3 · 3900 установок — Скилл помогает создавать и сопровождать приложения на фреймворке TanStack Start с потоковым SSR, серверными функциями и маршрутизацией. - [responsive-testing](https://affpapa.org/nevibecode/skills/responsive-testing.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 561 установка — Скилл открывает приложение в браузере Cursor на пяти размерах экрана, делает скриншоты и сообщает, где вёрстка поехала. - [langsmith-custom-apps](https://affpapa.org/nevibecode/skills/langsmith-custom-apps.md) — скилл · langchain-ai · Claude Code, Codex, Cursor +3 · 398 установок — Скилл ведёт через жизненный цикл LangSmith Custom App: инициализация, локальная разработка, пуш и передача исходников наружу. - [quick-game](https://affpapa.org/nevibecode/skills/quick-game.md) — скилл · OpusGameLabs · Claude Code, Codex, Cursor +3 · 866 установок — Генерирует черновой играбельный прототип на Phaser или Three.js без графики, звука и полировки. - [meticulous-cli](https://affpapa.org/nevibecode/skills/meticulous-cli.md) — скилл · alwaysmeticulous · Claude Code, Codex, Cursor +3 · 8600 установок — Скилл обучает агента управлять утилитой Meticulous: запускать воспроизведение сессий, проверять визуальные регрессии и работать с диффами. - [monetize-game](https://affpapa.org/nevibecode/skills/monetize-game.md) — скилл · OpusGameLabs · Claude Code, Codex, Cursor +3 · 862 установки — Регистрирует браузерную игру на Play.fun, подключает клиентский SDK с очками и таблицей лидеров, а затем выдаёт ссылку для игроков. - [typescript](https://affpapa.org/nevibecode/skills/pymodel-typescript.md) — скилл · PyModel · Claude Code, Codex, Cursor +3 · 520 установок — Скилл с 44 правилами по типам, tsconfig и async-коду. - [page-transition-animation](https://affpapa.org/nevibecode/skills/page-transition-animation.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл для анимации переходов между страницами в Next.js App Router и починки неработающего exit в Framer Motion AnimatePresence. - [glassmorphism](https://affpapa.org/nevibecode/skills/glassmorphism.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл для ИИ-агента, который добавляет в интерфейс матовое стекло: размытие фона, светлая кромка, слоистые тени и жидкое преломление. - [meticulous-use-session-data](https://affpapa.org/nevibecode/skills/meticulous-use-session-data.md) — скилл · alwaysmeticulous · Claude Code, Codex, Cursor +3 · 8500 установок — Скилл находит записанные сессии Meticulous под изменённый код ветки и скачивает их локально. - [meticulous-test](https://affpapa.org/nevibecode/skills/meticulous-test.md) — скилл · alwaysmeticulous · Claude Code, Codex, Cursor +3 · 8500 установок — Запускает прогон Meticulous после правок во фронтенде и передаёт результат скиллу meticulous-review, чтобы разметить каждое визуальное изменение. - [meticulous-iterative-dev](https://affpapa.org/nevibecode/skills/meticulous-iterative-dev.md) — скилл · alwaysmeticulous · Claude Code, Codex, Cursor +3 · 8500 установок — Ведёт многошаговую правку фронтенда и после каждого шага сверяет картинку с записанными сессиями Meticulous, чтобы регрессии всплывали сразу. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=40 ## Уточнить [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