# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 54 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=54 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [ui-design](https://affpapa.org/nevibecode/skills/starchild-ai-agent-ui-design.md) — скилл · Starchild-ai-agent · Claude Code, Codex, Cursor +3 · 1800 установок — Скилл задаёт процесс создания визуальных интерфейсов: от выбора стека до проверки доступности, адаптивности и анимаций. - [react](https://affpapa.org/nevibecode/skills/pproenca-react.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 489 установок — Скилл с 49 правилами React 19 и алгоритмом ревью кодовой базы. - [graphql-development](https://affpapa.org/nevibecode/skills/graphql-development.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 661 установка — Набор правил для GraphQL: схема, типизированные клиенты, интеграция с React и Next.js. - [react-flow-architecture](https://affpapa.org/nevibecode/skills/react-flow-architecture.md) — скилл · existential-birds · Claude Code, Codex, Cursor +3 · 529 установок — Архитектурные подсказки для интерфейсов на React Flow: выбор состояния, интеграций и масштаба node-based приложений. - [rollup-bundler](https://affpapa.org/nevibecode/skills/rollup-bundler.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 657 установок — Скилл задаёт агенту правила конфигурации Rollup.js: форматы вывода, внешние зависимости, tree-shaking и плагины для сборки библиотек. - [react-native-r3f](https://affpapa.org/nevibecode/skills/react-native-r3f.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 655 установок — Задаёт правила разработки 3D-сцен на React Three Fiber и three.js. - [landing-page-optimizer](https://affpapa.org/nevibecode/skills/landing-page-optimizer.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 361 установка — Скилл проходит по лендингу шесть шагов: аудит, структура, CTA, скорость, SEO и очередь A/B-тестов. - [e2e-testing](https://affpapa.org/nevibecode/skills/platform-team-e2e-testing.md) — скилл · platform-team · Claude Code, Codex, Cursor +3 · 1600 установок — Задаёт шаблоны E2E-тестирования на Playwright для веб-приложений на React и Python. - [testing-data-visualizations](https://affpapa.org/nevibecode/skills/testing-data-visualizations.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 18 установок — Скилл выстраивает стратегию тестирования графиков, дашбордов и диаграмм в коде. - [nextjs-server-client-components](https://affpapa.org/nevibecode/skills/nextjs-server-client-components.md) — скилл · wsimmonds · Claude Code, Codex, Cursor +3 · 360 установок — Помогает выбрать между Server и Client Components в Next.js App Router, настроить чтение cookies, работу с searchParams и избежать смешивания клиентских и серверных API. - [capacitor-expert](https://affpapa.org/nevibecode/skills/capacitor-expert.md) — скилл · capawesome-team · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл-справочник по Capacitor: архитектура, CLI, плагины, интеграция с фреймворками и Capawesome Cloud. - [capacitor-app-development](https://affpapa.org/nevibecode/skills/capacitor-app-development.md) — скилл · capawesome-team · Claude Code, Codex, Cursor +3 · 1200 установок — Помогает ИИ-агенту настраивать кроссплатформенные приложения на Capacitor 6, 7 и 8. - [inertia-rails-architecture](https://affpapa.org/nevibecode/skills/inertia-rails-architecture.md) — скилл · inertia-rails · Claude Code, Codex, Cursor +3 · 537 установок — Задаёт серверные шаблоны для Rails + Inertia.js + React и разводит по нужным скиллам, когда вы строите страницу, форму или CRUD. - [capacitor-keyboard](https://affpapa.org/nevibecode/skills/capacitor-keyboard.md) — скилл · Cap-go · Claude Code, Codex, Cursor +3 · 1000 установок — Разбирает поведение экранной клавиатуры в приложениях на Capacitor: режимы resize на iOS, высоты событий, edge-to-edge на Android. - [meticulous-increase-coverage](https://affpapa.org/nevibecode/skills/meticulous-increase-coverage.md) — скилл · alwaysmeticulous · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл для Meticulous: находит файлы без покрытия, привязывает их к реальному действию в интерфейсе и подтверждает рост покрытия сравнением с базой. - [responsive-layout-builder](https://affpapa.org/nevibecode/skills/responsive-layout-builder.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 354 установки — Скилл задаёт правила и готовые шаблоны для мобильной адаптивной вёрстки на CSS Grid, Flexbox, Tailwind и Container Queries в ассистентах Claude Code, Cursor и Copilot. - [onchainkit](https://affpapa.org/nevibecode/skills/onchainkit.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 641 установка — Скилл для ИИ-агента, который помогает собирать onchain-приложения на OnchainKit SDK: компоненты, провайдеры, транзакции и обмен токенов. - [javascript-animation](https://affpapa.org/nevibecode/skills/javascript-animation.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 532 установки — Скилл собирает короткий анимационный ролик, где каждый кадр нарисован кодом на HTML canvas, и рендерит его в MP4. - [image-optimization](https://affpapa.org/nevibecode/skills/secondsky-image-optimization.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 585 установок — Скилл помогает ускорить загрузку страниц: подбирает форматы AVIF и WebP, генерирует теги с srcset и настраивает ленивую загрузку. - [rsbuild-v2-upgrade](https://affpapa.org/nevibecode/skills/rsbuild-v2-upgrade.md) — скилл · rstackjs · Claude Code, Codex, Cursor +3 · 476 установок — Проводит проект с Rsbuild 1.x через миграцию на v2: зависимости, конфиг, сломанные опции. - [shadcn-component-discovery](https://affpapa.org/nevibecode/skills/shadcn-component-discovery.md) — скилл · mattbx · Claude Code, Codex, Cursor +3 · 731 установка — Скилл ищет готовые компоненты и реестры в экосистеме shadcn до того, как вы начнёте писать свой UI с нуля. - [magento-hyva-specialist](https://affpapa.org/nevibecode/skills/magento-hyva-specialist.md) — скилл · maxnorm · Claude Code, Codex, Cursor +3 · 857 установок — Скилл для разработки витрин Magento 2 на теме Hyvä: Alpine.js, Tailwind CSS и оптимизация фронтенда. - [parcel-bundler](https://affpapa.org/nevibecode/skills/parcel-bundler.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 633 установки — Скилл задаёт агенту правила работы со сборщиком Parcel: точки входа, TypeScript, CSS-модули, кэш и продакшен-сборка. - [ad-creative-video](https://affpapa.org/nevibecode/skills/ad-creative-video.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 984 установки — Скилл помогает создавать шаблоны моушн-рекламы в Remotion и массово собирать варианты для A/B-тестов из CSV-файла под форматы соцсетей. - [adk-frontend](https://affpapa.org/nevibecode/skills/adk-frontend.md) — скилл · botpress · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл с готовыми шаблонами для фронтенда, который работает с ботами на Botpress ADK: авторизация, клиент, типы и вызовы действий. - [frontend-design-ui-ux](https://affpapa.org/nevibecode/skills/frontend-design-ui-ux.md) — скилл · ulpi-io · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл создаёт зафиксированный язык дизайна и UX/UI-спецификацию для фичи или экрана. - [tailwind-responsive-ui](https://affpapa.org/nevibecode/skills/tailwind-responsive-ui.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 461 установка — Скилл для Claude и других ИИ-редакторов: помогает переделывать интерфейсы на Tailwind CSS под мобильные и десктопные экраны. - [soundtrack](https://affpapa.org/nevibecode/skills/soundtrack.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 543 установки — Пишет партитуру к анимации прямо в коде на Web Audio, рендерит её в WAV и проверяет, что монтажные склейки попадают в долю без резкого скачка громкости. - [mobile-first-design](https://affpapa.org/nevibecode/skills/secondsky-mobile-first-design.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 568 установок — Задаёт правила адаптивной вёрстки от экрана 320px к десктопу, требования к тач-зонам от 48x48px и лимиты веса страницы до 500KB. - [tailwind-ui-refactor](https://affpapa.org/nevibecode/skills/tailwind-ui-refactor.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 458 установок — Скилл для рефакторинга HTML с классами Tailwind: подсказывает, как выстроить иерархию, отступы, типографику и цвет. - [ui-verification](https://affpapa.org/nevibecode/skills/ui-verification.md) — скилл · mblode · Claude Code, Codex, Cursor +3 · 376 установок — Запускает браузерные проверки вёрстки: проверяет фокус, кликабельные области, переполнение и сбои сети с замерами на реальной странице. - [tailwind-capacitor](https://affpapa.org/nevibecode/skills/tailwind-capacitor.md) — скилл · Cap-go · Claude Code, Codex, Cursor +3 · 955 установок — Настраивает Tailwind CSS v4 в приложениях на Capacitor и разбирает грабли мобильной вёрстки: safe-area, тёмная тема, варианты под iOS и Android. - [launch-video](https://affpapa.org/nevibecode/skills/iart-ai-launch-video.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 964 установки — Помогает собрать промо-ролик на 15–60 секунд по структуре хук-тизер-дроп-монтаж-финал. - [ecommerce-platform-specialist](https://affpapa.org/nevibecode/skills/ecommerce-platform-specialist.md) — скилл · qodex-ai · Claude Code, Codex, Cursor +3 · 657 установок — Скилл, который подсказывает агенту, как писать под Shopify: Admin API, Storefront API, Liquid, вебхуки и чекаут. - [awwwards-landing-page](https://affpapa.org/nevibecode/skills/awwwards-landing-page.md) — скилл · rebyteai-template · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл обучает агента разворачивать шаблон дизайнерского портфолио на Next.js с анимациями. - [jest-react-testing](https://affpapa.org/nevibecode/skills/jest-react-testing.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл для тестирования React-компонентов и хуков через Jest и React Testing Library: конфигурация, моки, асинхронные сценарии. - [web-performance-optimization](https://affpapa.org/nevibecode/skills/secondsky-web-performance-optimization.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 557 установок — Скилл для оптимизации загрузки веб-приложений: разбивка бандла, ленивая загрузка, кэширование и мониторинг Core Web Vitals. - [vercel-ai-sdk](https://affpapa.org/nevibecode/skills/wsimmonds-vercel-ai-sdk.md) — скилл · wsimmonds · Claude Code, Codex, Cursor +3 · 337 установок — Подсказывает агенту, как писать код на Vercel AI SDK v5: чат через useChat, стриминг, вызов инструментов, эмбеддинги. - [rsdoctor-analysis](https://affpapa.org/nevibecode/skills/rsdoctor-analysis.md) — скилл · rstackjs · Claude Code, Codex, Cursor +3 · 450 установок — Анализирует отчёты сборки Rspack и Webpack из файла rsdoctor-data.json. - [inertia-rails-pages](https://affpapa.org/nevibecode/skills/inertia-rails-pages.md) — скилл · inertia-rails · Claude Code, Codex, Cursor +3 · 504 установки — Скилл для работы со страницами Inertia Rails: постоянные лейауты, навигация через Link и router, состояние из URL, отложенная загрузка и бесконечный скролл. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=55 ## Уточнить [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