# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 4 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=4 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [turnstile-spin](https://affpapa.org/nevibecode/skills/turnstile-spin.md) — скилл · cloudflare · Claude Code, Codex, Cursor +3 · 93100 установок — Настраивает защиту от ботов Cloudflare Turnstile во фронтенде и бэкенде: добавляет виджет, прописывает проверку siteverify и проверяет токены API. - [browser-qa](https://affpapa.org/nevibecode/skills/browser-qa.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4900 установок — Гоняет живой интерфейс через браузерный MCP: ошибки в консоли, Core Web Vitals, формы, скриншоты на трёх ширинах и axe-core. - [nextjs-turbopack](https://affpapa.org/nevibecode/skills/nextjs-turbopack.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 5000 установок — Скилл объясняет, как использовать Turbopack в Next.js 16+ и когда выбирать webpack. - [design-system](https://affpapa.org/nevibecode/skills/affaan-m-design-system.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 5000 установок — Собирает дизайн-систему из существующей вёрстки или проверяет её на визуальную консистентность: токены, оценка по десяти критериям, поиск шаблонных ИИ-приёмов. - [next-partial-prefetching-optimizer](https://affpapa.org/nevibecode/skills/next-partial-prefetching-optimizer.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 2400 установок — Настраивает предзагрузку интерфейса при клиентских переходах в Next.js 16.3+ с Partial Prefetching. - [better-typography](https://affpapa.org/nevibecode/skills/better-typography.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 34200 установок — Проверяет типографику интерфейса и предлагает правки в системе стилей проекта. - [react-performance](https://affpapa.org/nevibecode/skills/react-performance.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4900 установок — Скилл для аудита и ускорения приложений на React 18/19 и Next.js. - [remotion-video-creation](https://affpapa.org/nevibecode/skills/remotion-video-creation.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4900 установок — Скилл подсказывает агенту правила работы с Remotion в React: от анимаций и звука до субтитров, графиков и переходов. - [react-patterns](https://affpapa.org/nevibecode/skills/affaan-m-react-patterns.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4900 установок — Скилл для Claude и других ИИ-редакторов: подсказывает, как писать компоненты React 18/19 — хуки, границы серверных и клиентских компонентов, формы, загрузку данных. - [stitch::code-to-design](https://affpapa.org/nevibecode/skills/stitchcode-to-design.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10200 установок — Переносит существующий фронтенд в Stitch: извлекает HTML и дизайн-систему, затем загружает их в проект. - [baseline-ui](https://affpapa.org/nevibecode/skills/baseline-ui.md) — скилл · ibelick · Claude Code, Codex, Cursor +3 · 24200 установок — Очищает фронтенд-код от типичных артефактов нейросетей: правит отступы, сетку, шрифты и анимации. - [chrome-devtools](https://affpapa.org/nevibecode/skills/chrome-devtools.md) — скилл (официальный GitHub) · github · GitHub Copilot · 15258 установок — Управляет живым Chrome через Chrome DevTools MCP: открывает страницы, проверяет ошибки и пишет трассы производительности. - [build-mcp-app](https://affpapa.org/nevibecode/skills/build-mcp-app.md) — скилл (официальный Anthropic) · Anthropic · Claude Code · 6458 установок — Помогает добавить к MCP-серверу интерактивные формы, списки и визуальные виджеты. - [ui-demo](https://affpapa.org/nevibecode/skills/ui-demo.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4700 установок — Скилл записывает демо-ролики веб-приложения через Playwright: видимый курсор, ровный темп, раскадровка по шагам. - [react-testing](https://affpapa.org/nevibecode/skills/react-testing.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4800 установок — Скилл для написания тестов React-компонентов, хуков и страниц: React Testing Library, Vitest или Jest, MSW для моков сети и проверки доступности через axe. - [vite-patterns](https://affpapa.org/nevibecode/skills/vite-patterns.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4800 установок — Скилл подсказывает, как настраивать Vite, плагины, HMR, переменные окружения и сборку. - [frontend-a11y](https://affpapa.org/nevibecode/skills/frontend-a11y.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4800 установок — Скилл подсказывает доступные паттерны для React и Next.js: формы, ARIA, клавиатурная навигация и фокус. - [brand-landingpage](https://affpapa.org/nevibecode/skills/brand-landingpage.md) — скилл · Travis D. Elliott · Claude Code, Codex, Cursor · 39476 установок — Скилл проводит интервью о продукте и визуальном стиле, затем помогает создать лендинг через Stitch. - [vite](https://affpapa.org/nevibecode/skills/vite.md) — скилл · Anthony Fu · Claude Code, Codex, Cursor +3 · 39900 установок — Скилл помогает настраивать Vite, писать плагины и собирать SSR-приложения. - [stitch::upload-to-stitch](https://affpapa.org/nevibecode/skills/stitchupload-to-stitch.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 9900 установок — Скилл отправляет локальные изображения, макеты, разметку и HTML-страницы в проект Stitch напрямую по HTTP в обход ограничений вывода инструментов MCP. - [stitch::extract-static-html](https://affpapa.org/nevibecode/skills/stitchextract-static-html.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10000 установок — Скилл сохраняет отрендеренную страницу как автономный HTML-файл, встраивая стили и изображения. - [motion-advanced](https://affpapa.org/nevibecode/skills/motion-advanced.md) — скилл · jeff · Claude Code, Codex, Cursor +3 · 4600 установок — Паттерны сложной анимации и жестов для React и Next.js: драг-энд-дроп, цепочки через useAnimate и SVG. - [make-interfaces-feel-better](https://affpapa.org/nevibecode/skills/affaan-m-make-interfaces-feel-better.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4700 установок — Скилл помогает находить и исправлять детали интерфейса: отступы, типографику, состояния элементов и анимации. - [dart-flutter-patterns](https://affpapa.org/nevibecode/skills/dart-flutter-patterns.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4700 установок — Набор готовых паттернов для Dart и Flutter: null safety, состояние, навигация, сеть. - [documentation-lookup](https://affpapa.org/nevibecode/skills/documentation-lookup.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4700 установок — Ищет актуальную документацию библиотек и фреймворков через сервер Context7 MCP вместо устаревшей обучающей выборки. - [motion-foundations](https://affpapa.org/nevibecode/skills/motion-foundations.md) — скилл · jeff · Claude Code, Codex, Cursor +3 · 4700 установок — Задаёт токены движения, пружинные пресеты, правила производительности и поддержку prefers-reduced-motion. - [motion-patterns](https://affpapa.org/nevibecode/skills/motion-patterns.md) — скилл · jeff · Claude Code, Codex, Cursor +3 · 4700 установок — Скилл добавляет готовые паттерны анимации для React и Next.js. - [better-colors](https://affpapa.org/nevibecode/skills/better-colors.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 32600 установок — Скилл проверяет палитры и строит систему цветовых токенов. - [angular-developer](https://affpapa.org/nevibecode/skills/affaan-m-angular-developer.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4500 установок — Скилл генерирует код на Angular с учётом версии проекта, настраивает сигналы, формы и запускает проверку сборки. - [benchmark](https://affpapa.org/nevibecode/skills/benchmark.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4500 установок — Скилл измеряет скорость страниц, API и сборки, а затем сравнивает показатели до и после изменений. - [nuxt4-patterns](https://affpapa.org/nevibecode/skills/nuxt4-patterns.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4600 установок — Скилл для работы с Nuxt 4: гидратация, route rules, ленивая загрузка и SSR-безопасный сбор данных через useFetch и useAsyncData. - [swiftui-patterns](https://affpapa.org/nevibecode/skills/affaan-m-swiftui-patterns.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4600 установок — Задаёт правила современной разработки на SwiftUI: переход на @Observable, типобезопасная навигация и оптимизация рендеринга. - [compose-multiplatform-patterns](https://affpapa.org/nevibecode/skills/compose-multiplatform-patterns.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4600 установок — Скилл подсказывает паттерны Compose Multiplatform и Jetpack Compose для KMP-проектов: состояние, навигация, темы и UI под разные платформы. - [feature-flags](https://affpapa.org/nevibecode/skills/feature-flags.md) — скилл · react · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл для работы с фича-флагами в репозитории React: подсказывает, где живут флаги, как гейтить тесты и почему падает конкретный канал. - [verify](https://affpapa.org/nevibecode/skills/react-verify.md) — скилл · react · Claude Code, Codex, Cursor +3 · 1200 установок — Проверяет код перед коммитом в репозиторий React. - [web-design-reviewer](https://affpapa.org/nevibecode/skills/web-design-reviewer.md) — скилл (официальный GitHub) · github · GitHub Copilot · 13957 установок — Скилл осматривает работающий сайт, находит проблемы с вёрсткой, адаптивностью и доступностью, а затем может исправить их в исходном коде. - [better-layout](https://affpapa.org/nevibecode/skills/better-layout.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 30800 установок — Скилл проверяет и правит группировку, выравнивание, порядок чтения и адаптивную структуру макета, а потом ломает её ресайзом, переводом и зеркалированием под RTL. - [fixing-accessibility](https://affpapa.org/nevibecode/skills/fixing-accessibility.md) — скилл · ibelick · Claude Code, Codex, Cursor +3 · 21800 установок — Скилл проверяет HTML на проблемы доступности и предлагает точечные исправления. - [better-interface](https://affpapa.org/nevibecode/skills/better-interface.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 30000 установок — Проводит сквозной аудит экранов и интерфейсов по правилам доступности, вёрстки, текста, цвета и типографики. - [vue](https://affpapa.org/nevibecode/skills/vue.md) — скилл · Anthony Fu · Claude Code, Codex, Cursor +3 · 35800 установок — Скилл подсказывает агенту, как писать Vue 3-компоненты через Composition API и script setup. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=5 ## Уточнить [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