# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 44 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=44 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [react-flow](https://affpapa.org/nevibecode/skills/react-flow.md) — скилл · existential-birds · Claude Code, Codex, Cursor +3 · 1300 установок — Помогает ассистенту создавать интерактивные диаграммы и графы на базе @xyflow/react. - [adding-error-tracking](https://affpapa.org/nevibecode/skills/adding-error-tracking.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 386 установок — Скилл подключает Sentry к веб-приложению: ловит ошибки, считает трейсы и загружает source maps. - [comparing-branches-visually](https://affpapa.org/nevibecode/skills/comparing-branches-visually.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 383 установки — Разворачивает две ветки в отдельных worktree, поднимает оба дев-сервера на разных портах и делает скриншоты одних и тех же страниц для сравнения. - [react-web](https://affpapa.org/nevibecode/skills/react-web.md) — скилл · alinaqi · Claude Code, Codex, Cursor +3 · 339 установок — Скилл настраивает разработку веб-компонентов на React с обязательным подходом «сначала тесты». - [static-rendering](https://affpapa.org/nevibecode/skills/static-rendering.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 910 установок — Скилл объясняет статическую генерацию: какие страницы можно собрать в HTML заранее и как это сделать в Next.js. - [site-architecture](https://affpapa.org/nevibecode/skills/alinaqi-site-architecture.md) — скилл · alinaqi · Claude Code, Codex, Cursor +3 · 336 установок — Настраивает техническое SEO сайта: файлы robots.txt, XML-карты, метатеги и индексацию страниц поисковиками и поисковыми ИИ-ботами. - [iphone-duo-vertical-bars](https://affpapa.org/nevibecode/skills/iphone-duo-vertical-bars.md) — скилл · mirzaaghazadeh · Claude Code, Codex, Cursor +3 · 596 установок — Скилл подсказывает агенту, как перенести тулбары, навбары и таббары на боковую ось iPhone Duo и что для этого нужно в коде. - [nextjs-shadcn](https://affpapa.org/nevibecode/skills/nextjs-shadcn.md) — скилл · laguagu · Claude Code, Codex, Cursor +3 · 835 установок — Скилл помогает агенту собрать интерфейс Next.js с shadcn/ui: выбрать шрифты, тему, фон и эффекты под задачу продукта. - [adding-analytics](https://affpapa.org/nevibecode/skills/adding-analytics.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 371 установка — Помогает ассистенту внедрить PostHog в веб-приложение: от настройки провайдера до трекинга событий, веб-аналитики и флагов фич. - [programmatic-seo](https://affpapa.org/nevibecode/skills/openclaudia-programmatic-seo.md) — скилл · OpenClaudia · Claude Code, Codex, Cursor +3 · 419 установок — Помогает строить сотни однотипных SEO-страниц из шаблона и данных: города, сравнения, интеграции. - [streaming-ssr](https://affpapa.org/nevibecode/skills/streaming-ssr.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 883 установки — Учит агента отдавать HTML чанками через renderToPipeableStream и Suspense. - [signup-flow-cro](https://affpapa.org/nevibecode/skills/openclaudia-signup-flow-cro.md) — скилл · OpenClaudia · Claude Code, Codex, Cursor +3 · 417 установок — Скилл для аудита и оптимизации воронок регистрации. - [adding-stripe](https://affpapa.org/nevibecode/skills/adding-stripe.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 369 установок — Проводит агента по шагам подключения Stripe: SDK, ключи, checkout-сессия, вебхуки и портал управления подпиской. - [slide-creator](https://affpapa.org/nevibecode/skills/slide-creator.md) — скилл · Starchild-ai-agent · Claude Code, Codex, Cursor +3 · 4100 установок — Скилл верстает презентации формата 16:9 на HTML и CSS, а затем экспортирует их в PDF через headless Chromium. - [adding-feature-flags](https://affpapa.org/nevibecode/skills/adding-feature-flags.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 361 установка — Настраивает фиче-флаги для поэтапного выката функций и A/B-тестирования через PostHog или переменные окружения. - [tanstack-virtual](https://affpapa.org/nevibecode/skills/tanstack-virtual.md) — скилл · tanstack-skills · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл подсказывает агенту, как подключить TanStack Virtual и рисовать только видимые строки в больших списках, таблицах и сетках. - [tailwindcss](https://affpapa.org/nevibecode/skills/mindrally-tailwindcss.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1500 установок — Задаёт агенту стиль работы с TailwindCSS: утилитарные классы прямо в разметке, мобильный первым, тёмная тема через вариант dark:. - [mobile-touch](https://affpapa.org/nevibecode/skills/mobile-touch.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл для ИИ-агента, который помогает проектировать жесты, хаптику и анимации в iOS и Android. - [playwright](https://affpapa.org/nevibecode/skills/pymodel-playwright.md) — скилл · PyModel · Claude Code, Codex, Cursor +3 · 485 установок — Скилл для Playwright в Next.js: 45 правил по 8 категориям — от архитектуры тестов до отладки в CI. - [framer-motion](https://affpapa.org/nevibecode/skills/pproenca-framer-motion.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл оптимизирует анимации Framer Motion в React: предотвращает лишние ререндеры, уменьшает размер бандла и настраивает переходы жестов или скролла. - [react-native-moq](https://affpapa.org/nevibecode/skills/react-native-moq.md) — скилл · software-mansion-labs · Claude Code, Codex, Cursor +3 · 398 установок — Скилл помогает писать и проверять код для live-видео, аудио и данных через MoQ relay в React Native. - [api-design](https://affpapa.org/nevibecode/skills/margelo-api-design.md) — скилл · margelo · Claude Code, Codex, Cursor +3 · 609 установок — Скилл помогает проектировать и проверять публичные API библиотек на TypeScript, JavaScript, React и React Native. - [maplibre-mapbox-migration](https://affpapa.org/nevibecode/skills/maplibre-mapbox-migration.md) — скилл · maplibre · Claude Code, Codex, Cursor +3 · 464 установки — Помогает перевести веб-приложение с Mapbox GL JS на открытую библиотеку MapLibre GL JS. - [sap-fiori-add-visual-filter](https://affpapa.org/nevibecode/skills/sap-fiori-tools-sap-fiori-add-visual-filter.md) — скилл · sap-fiori-tools · Claude Code, Codex, Cursor +3 · 603 установки — Добавляет визуальные фильтры с графиками в панели фильтрации Fiori Elements на базе CAP или ABAP RAP. - [typescript-react-reviewer](https://affpapa.org/nevibecode/skills/typescript-react-reviewer.md) — скилл · dotneet · Claude Code, Codex, Cursor +3 · 9000 установок — Скилл для ревью кода на TypeScript и React 19: находит антипаттерны, ошибки хуков и проблемы типизации. - [css-animation-creator](https://affpapa.org/nevibecode/skills/css-animation-creator.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 805 установок — Скилл для ИИ-кодинга, который помогает писать CSS-анимации, переходы, микроинтеракции и анимации по скроллу. - [sap-fiori-app-development](https://affpapa.org/nevibecode/skills/sap-fiori-app-development.md) — скилл · sap-fiori-tools · Claude Code, Codex, Cursor +3 · 595 установок — Скилл задаёт агенту правила сборки SAP Fiori Elements: List Report, Object Page, Worklist, подключение к CAP или внешнему OData. - [sap-fiori-analytical-chart](https://affpapa.org/nevibecode/skills/sap-fiori-analytical-chart.md) — скилл · sap-fiori-tools · Claude Code, Codex, Cursor +3 · 591 установка — Скилл добавляет на страницу List Report в SAP Fiori Elements график по агрегированным данным и таблицу под ним. - [chart](https://affpapa.org/nevibecode/skills/chart.md) — скилл · Starchild-ai-agent · Claude Code, Codex, Cursor +3 · 3900 установок — Строит интерактивные графики на Apache ECharts: линии, столбцы, свечи, точки. - [mapbox-ios-patterns](https://affpapa.org/nevibecode/skills/mapbox-ios-patterns.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 1500 установок — Официальные шаблоны интеграции Mapbox Maps SDK v11 в iOS-приложения на Swift, SwiftUI и UIKit. - [mapbox-mcp-devkit-patterns](https://affpapa.org/nevibecode/skills/mapbox-mcp-devkit-patterns.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл описывает, как подключить Mapbox MCP DevKit Server к ИИ-ассистенту и работать со стилями, токенами и валидацией прямо в чате. - [sap-fiori-eslint-plugin](https://affpapa.org/nevibecode/skills/sap-fiori-eslint-plugin.md) — скилл · sap-fiori-tools · Claude Code, Codex, Cursor +3 · 584 установки — Скилл настраивает, переносит и запускает ESLint с плагином @sap-ux/eslint-plugin-fiori-tools в проектах SAP Fiori. - [sap-fiori-create-cli](https://affpapa.org/nevibecode/skills/sap-fiori-create-cli.md) — скилл · sap-fiori-tools · Claude Code, Codex, Cursor +3 · 584 установки — Даёт агенту доступ к CLI @sap-ux/create: генерация приложений SAP Fiori, добавление конфигов, конвертация проектов. - [frontend-accessibility-best-practices](https://affpapa.org/nevibecode/skills/frontend-accessibility-best-practices.md) — скилл · sergiodxa · Claude Code, Codex, Cursor +3 · 863 установки — Скилл с 7 правилами доступности для React: семантическая вёрстка, скринридеры, клавиатура, настройки пользователя. - [css-architecture](https://affpapa.org/nevibecode/skills/css-architecture.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 959 установок — Скилл для ИИ-агента, который помогает разложить CSS по методологиям BEM, SMACSS и CSS-in-JS. - [pulsar-haptics](https://affpapa.org/nevibecode/skills/pulsar-haptics.md) — скилл · software-mansion-labs · Claude Code, Codex, Cursor +3 · 380 установок — Скилл настраивает тактильный отклик через библиотеку Pulsar в мобильных и веб-приложениях. - [animation-designer](https://affpapa.org/nevibecode/skills/animation-designer.md) — скилл · daffy0208 · Claude Code, Codex, Cursor +3 · 1900 установок — Скилл для веб-анимаций: переходы страниц, появление компонентов, параллакс и микро-взаимодействия на Framer Motion и CSS. - [aem-cli](https://affpapa.org/nevibecode/skills/aem-cli.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 840 установок — Помогает запускать и настраивать Adobe AEM CLI для Edge Delivery Services, отлаживать сервер aem up, сертификаты и синхронизацию контента. - [lorem-ipsum](https://affpapa.org/nevibecode/skills/lorem-ipsum.md) — скилл · intellectronica · Claude Code, Codex, Cursor +3 · 511 установок — Генерирует текст-рыбу через готовый Python-скрипт с точным контролем структуры, длины и формата. - [react-query](https://affpapa.org/nevibecode/skills/react-query.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт агенту правила работы с React Query: кэширование, фоновые обновления, инвалидация запросов и оптимистичные апдейты. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=45 ## Уточнить [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