# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 45 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=45 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [tanstack-devtools](https://affpapa.org/nevibecode/skills/tanstack-devtools.md) — скилл · tanstack-skills · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл учит агента подключать единую панель отладки TanStack в проектах на React. - [react-three-fiber-game](https://affpapa.org/nevibecode/skills/react-three-fiber-game.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 39 установок — Помогает собирать 3D-игры и интерактивные сцены прямо в интерфейсе на React с помощью экосистемы pmndrs. - [webgpu](https://affpapa.org/nevibecode/skills/webgpu.md) — скилл · cazala · Claude Code, Codex, Cursor +3 · 842 установки — Скилл помогает проектировать, отлаживать и оптимизировать WebGPU-приложения и WGSL-шейдеры. - [design-mirror](https://affpapa.org/nevibecode/skills/design-mirror.md) — скилл · brightdata · Claude Code, Codex, Cursor +3 · 340 установок — Скилл снимает визуальные особенности сайта и переносит их в существующий код. - [rslib-best-practices](https://affpapa.org/nevibecode/skills/rslib-best-practices.md) — скилл · rstackjs · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл обучает агента правилам сборки библиотек на Rslib. - [sap-fiori-opa5-test-development](https://affpapa.org/nevibecode/skills/sap-fiori-opa5-test-development.md) — скилл · sap-fiori-tools · Claude Code, Codex, Cursor +3 · 551 установка — Помогает писать и отлаживать интеграционные OPA5-тесты для приложений SAP Fiori Elements на OData V4 и V2. - [mapbox-maplibre-migration](https://affpapa.org/nevibecode/skills/mapbox-maplibre-migration.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 1400 установок — Ведёт миграцию с MapLibre GL JS на Mapbox GL JS: замена пакета, импортов, стилей и токена. - [mapbox-google-maps-migration](https://affpapa.org/nevibecode/skills/mapbox-google-maps-migration.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл для перевода проекта с Google Maps Platform на Mapbox GL JS: таблицы соответствий методов, событий и маркеров, порядок миграции. - [maplibre-cartography](https://affpapa.org/nevibecode/skills/maplibre-cartography.md) — скилл · maplibre · Claude Code, Codex, Cursor +3 · 419 установок — Скилл с картографическими правилами для MapLibre GL JS: подбирает цвета подписей и значков, порядок слоёв и контраст. - [ui-refactor](https://affpapa.org/nevibecode/skills/ui-refactor.md) — скилл · LovroPodobnik · Claude Code, Codex, Cursor +3 · 494 установки — Скилл обучает ассистента правилам интерфейсного дизайна: выстраивать иерархию, задавать сетки отступов и подбирать шрифтовые пары вместо случайных правок стилей. - [vue-i18n-skilld](https://affpapa.org/nevibecode/skills/vue-i18n-skilld.md) — скилл · skilld-dev · Claude Code, Codex, Cursor +3 · 401 установка — Скилл для работы с vue-i18n в Vue 3: подсказывает синтаксис сообщений, плюрализацию, форматы дат и чисел, миграцию на v12. - [react-hook-form-zod](https://affpapa.org/nevibecode/skills/react-hook-form-zod.md) — скилл · ovachiever · Claude Code, Codex, Cursor +3 · 722 установки — Скилл учит агента собирать формы на React Hook Form с валидацией через Zod. - [cloudflare-pages](https://affpapa.org/nevibecode/skills/cloudflare-pages.md) — скилл · devops-skills · Claude Code, Codex, Cursor +3 · 331 установка — Разворачивает статические сайты и fullstack-приложения на Cloudflare Pages. - [react-testing-library](https://affpapa.org/nevibecode/skills/react-testing-library.md) — скилл · itechmeat · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл учит ИИ писать тесты React-компонентов глазами пользователя: через ARIA-роли, user-event и асинхронные проверки. - [vue-skilld](https://affpapa.org/nevibecode/skills/vue-skilld.md) — скилл · skilld-dev · Claude Code, Codex, Cursor +3 · 397 установок — Помогает писать компоненты и композаблы на Vue 3.6. - [redux-toolkit](https://affpapa.org/nevibecode/skills/redux-toolkit.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1300 установок — Набор правил по архитектуре Redux Toolkit для React и Next.js на TypeScript. - [front-end-developer](https://affpapa.org/nevibecode/skills/front-end-developer.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл превращает агента в старшего фронтенд-разработчика: React, Next.js, TypeScript, Tailwind, доступность. - [tauri-development](https://affpapa.org/nevibecode/skills/tauri-development.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл задаёт правила разработки десктопных программ на Tauri. - [nextjs-typescript-tailwindcss-supabase](https://affpapa.org/nevibecode/skills/nextjs-typescript-tailwindcss-supabase.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл задаёт агенту правила для Next.js 14, TypeScript, TailwindCSS и Supabase: серверные компоненты, обработка ошибок, читаемый код. - [electron-development](https://affpapa.org/nevibecode/skills/mindrally-electron-development.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл задаёт агенту правила разработки десктопных приложений на Electron: разделение процессов, IPC, безопасность окон. - [alpine-js](https://affpapa.org/nevibecode/skills/alpine-js.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1300 установок — Набор правил для создания реактивных интерфейсов на Alpine.js. - [mapkit](https://affpapa.org/nevibecode/skills/prisma-labs-dev-mapkit.md) — скилл · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 458 установок — Справочник MapKit for SwiftUI для карт, маркеров, аннотаций и управления камерой. - [uikit](https://affpapa.org/nevibecode/skills/uikit.md) — скилл · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 455 установок — Справочник по UIKit для разработки под iOS и iPadOS. - [mobile-first-design](https://affpapa.org/nevibecode/skills/mobile-first-design.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 857 установок — Скилл задаёт порядок работы над интерфейсом: сначала мобильный экран, потом планшет и десктоп. - [figma-use](https://affpapa.org/nevibecode/skills/figma-use.md) — скилл (официальный OpenAI) · Figma · Codex, ChatGPT · 36 установок — Скилл задаёт правила работы с Figma Plugin API через инструмент use_figma. - [webflow-code-component:component-audit](https://affpapa.org/nevibecode/skills/webflow-code-componentcomponent-audit.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 1000 установок — Проверяет код-компоненты Webflow на архитектурные решения: что вынесено в props, как устроено состояние, где нужны слоты и Shadow DOM. - [webflow-cli:designer-extension](https://affpapa.org/nevibecode/skills/webflow-clidesigner-extension.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл ведёт агента по всему циклу работы с Designer Extensions в Webflow: выбор шаблона, инициализация проекта, локальный сервер и сборка бандла. - [webflow-cli:code-component](https://affpapa.org/nevibecode/skills/webflow-clicode-component.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл настраивает React-проект, проверяет сборку компонентов и публикует их в Webflow Designer через Webflow CLI. - [webflow-cli:troubleshooter](https://affpapa.org/nevibecode/skills/webflow-clitroubleshooter.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 1000 установок — Разбирает ошибки Webflow CLI: установку, авторизацию, сборку и бандл. - [pwa-expert](https://affpapa.org/nevibecode/skills/pwa-expert.md) — скилл · curiositech · Claude Code, Codex, Cursor +3 · 544 установки — Помогает сделать веб-приложение устанавливаемым и работающим офлайн: манифест, Service Worker, стратегии кеширования, свой экран установки. - [webflow-code-component:component-scaffold](https://affpapa.org/nevibecode/skills/webflow-code-componentcomponent-scaffold.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 997 установок — Генерирует структуру кодового компонента Webflow с файлом React и схемой props. - [webflow-cli:devlink](https://affpapa.org/nevibecode/skills/webflow-clidevlink.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 998 установок — Выгружает компоненты Webflow Designer в код React и Next.js, синхронизирует правки дизайна и показывает, что изменилось после каждого sync. - [webflow-code-component:convert-component](https://affpapa.org/nevibecode/skills/webflow-code-componentconvert-component.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 995 установок — Превращает готовый React-компонент в Webflow Code Component: разбирает пропсы, строит файл .webflow.tsx и показывает, что придётся переписать. - [21st-ai](https://affpapa.org/nevibecode/skills/21st-ai.md) — скилл · 21st-dev · Claude Code, Codex, Cursor +3 · 2000 установок — Скилл для генерации и правки UI через CLI 21st: набросать варианты по промпту, посмотреть их в браузере и забрать код в проект. - [21st-cli-use](https://affpapa.org/nevibecode/skills/21st-cli-use.md) — скилл · 21st-dev · Claude Code, Codex, Cursor +3 · 2000 установок — Ищет, скачивает и ставит React- и shadcn-компоненты, темы и SVG-логотипы из каталога 21st.dev через утилиту 21st. - [ui-design-review](https://affpapa.org/nevibecode/skills/ui-design-review.md) — скилл · mastepanoski · Claude Code, Codex, Cursor +3 · 1100 установок — Разбирает интерфейс по десяти дизайн-измерениям: типографика, цвет, отступы, иерархия, консистентность. - [appbuilder-e2e-testing](https://affpapa.org/nevibecode/skills/appbuilder-e2e-testing.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 746 установок — Скилл настраивает браузерные E2E-тесты на Playwright для приложений Adobe App Builder и расширений AEM. - [nielsen-usability-heuristics](https://affpapa.org/nevibecode/skills/nielsen-usability-heuristics.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 976 установок — Оценивает интерфейсы и текст ошибок по 10 эвристикам Нильсена. - [performance-and-web-vitals](https://affpapa.org/nevibecode/skills/performance-and-web-vitals.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 975 установок — Скилл помогает находить и устранять проблемы с Core Web Vitals и аудитами Lighthouse. - [webflow-code-component:pre-deploy-check](https://affpapa.org/nevibecode/skills/webflow-code-componentpre-deploy-check.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 988 установок — Проверяет компоненты Webflow Code Components перед публикацией: размер бандла, зависимости, пропсы, SSR и стили. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=46 ## Уточнить [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