# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 41 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=41 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [netlify-edge-functions](https://affpapa.org/nevibecode/skills/netlify-edge-functions.md) — скилл · netlify · Claude Code, Codex, Cursor +3 · 3100 установок — Помогает писать, роутить и отлаживать edge-функции Netlify на Deno: middleware, редиректы по гео, кэш, стриминг SSR. - [expo-react-native-performance](https://affpapa.org/nevibecode/skills/expo-react-native-performance.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 1500 установок — Набор из 42 правил оптимизации приложений на Expo и React Native. - [web-3d-asset-pipeline](https://affpapa.org/nevibecode/skills/web-3d-asset-pipeline.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 58 установок — Помогает подготовить GLB и glTF 2.0 для браузерной игры: от очистки модели до проверки её структуры. - [window-management](https://affpapa.org/nevibecode/skills/window-management.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 58 установок — Помогает настраивать окна и сцены SwiftUI в macOS 15+: убирать лишний хром, задавать области перетаскивания, правила размещения и восстановления. - [muse](https://affpapa.org/nevibecode/skills/muse.md) — скилл · simota · Claude Code, Codex, Cursor +3 · 711 установок — Скилл для работы с дизайн-токенами: определяет цвет, отступы, типографику и тени, переводит существующий код на семантические токены. - [swiftui-design-principles](https://affpapa.org/nevibecode/skills/swiftui-design-principles.md) — скилл · arjitj2 · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл задаёт ИИ-агенту правила сетки, типографики и цветов для SwiftUI и WidgetKit, чтобы интерфейс выглядел как нативное приложение, а не как сгенерированная разметка. - [mapbox-cartography](https://affpapa.org/nevibecode/skills/mapbox-cartography.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 2100 установок — Скилл с правилами картографии: иерархия слоёв, палитры, типографика и порядок отрисовки для стилей Mapbox. - [mapbox-data-visualization-patterns](https://affpapa.org/nevibecode/skills/mapbox-data-visualization-patterns.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 2100 установок — Готовые шаблоны визуализации данных на картах Mapbox для Claude Code: картограммы, тепловые слои и 3D-модели. - [swiftui-patterns](https://affpapa.org/nevibecode/skills/swiftui-patterns.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 57 установок — Помогает проектировать десктопные интерфейсы на SwiftUI для macOS с правильной структурой окон, меню, тулбаров и файлов. - [frontend-react-best-practices](https://affpapa.org/nevibecode/skills/frontend-react-best-practices.md) — скилл · sergiodxa · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл с 33 правилами по оптимизации React: меньше лишних ре-рендеров, аккуратнее бандл, чище композиция компонентов. - [auditing-performance](https://affpapa.org/nevibecode/skills/auditing-performance.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 476 установок — Скилл проводит аудит производительности приложения: размер бандла, рендеринг, запросы к базе и Core Web Vitals. - [react-flow](https://affpapa.org/nevibecode/skills/framara-react-flow.md) — скилл · framara · Claude Code, Codex, Cursor +3 · 823 установки — Скилл для работы с React Flow (@xyflow/react): кастомные узлы и рёбра, состояние, лейаут, типизация и отладка графов. - [laravel-inertia-react](https://affpapa.org/nevibecode/skills/laravel-inertia-react.md) — скилл · AsyrafHussin · Claude Code, Codex, Cursor +3 · 2000 установок — Скилл с готовыми правилами для страниц Inertia, форм на useForm и общих данных в связке Laravel и React. - [netlify-identity](https://affpapa.org/nevibecode/skills/netlify-identity.md) — скилл · netlify · Claude Code, Codex, Cursor +3 · 3000 установок — Скилл для добавления входа, регистрации и OAuth на сайт Netlify через @netlify/identity. - [netlify-image-cdn](https://affpapa.org/nevibecode/skills/netlify-image-cdn.md) — скилл · netlify · Claude Code, Codex, Cursor +3 · 3000 установок — Помогает настроить трансформацию изображений на лету через эндпоинт Netlify Image CDN. - [kinetic-typography](https://affpapa.org/nevibecode/skills/kinetic-typography.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2200 установок — Настраивает выразительную анимацию текста, титров и шрифтов в CSS, GSAP, Framer Motion и Remotion. - [shadcn](https://affpapa.org/nevibecode/skills/pedronauck-shadcn.md) — скилл · pedronauck · Claude Code, Codex, Cursor +3 · 369 установок — Задаёт правила сборки интерфейсов на shadcn/ui и Radix UI. - [template-builder-ui](https://affpapa.org/nevibecode/skills/template-builder-ui.md) — скилл · sentdm · Claude Code, Codex, Cursor +3 · 2900 установок — Скилл помогает спроектировать интерфейс конструктора шаблонов под контракт Sent v3, настроить предпросмотр каналов и валидацию перед отправкой на модерацию. - [react-data-fetching](https://affpapa.org/nevibecode/skills/react-data-fetching.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 установок — Учит агента правильной загрузке данных в React: параллельные запросы, кэш, дедупликация, Suspense. - [react-render-optimization](https://affpapa.org/nevibecode/skills/react-render-optimization.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл учит агента паттернам оптимизации рендеринга React: убирает лишние ререндеры, чинит мемоизацию и дизайн состояния. - [presentational-container-pattern](https://affpapa.org/nevibecode/skills/presentational-container-pattern.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл учит агента разделять получение данных и рендеринг в файлах React (.jsx, .tsx). - [react-composition-2026](https://affpapa.org/nevibecode/skills/react-composition-2026.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл учит агента заменять булевы пропсы и жёсткие API компонентов на композицию: compound-компоненты, явные варианты, children вместо render props. - [hooks-pattern](https://affpapa.org/nevibecode/skills/hooks-pattern.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл объясняет React Hooks и помогает вынести повторяющуюся логику состояния в кастомные хуки. - [web-accessibility](https://affpapa.org/nevibecode/skills/hoodini-web-accessibility.md) — скилл · hoodini · Claude Code, Codex, Cursor +3 · 455 установок — Скилл для агентной разработки, который подсказывает ИИ, как строить доступные веб-интерфейсы по WCAG 2.1: паттерны ARIA, навигация с клавиатуры, поддержка скринридеров. - [tanstack](https://affpapa.org/nevibecode/skills/tanstack.md) — скилл · pedronauck · Claude Code, Codex, Cursor +3 · 360 установок — Скилл помогает писать React-код с TanStack Query, Router и Form. - [mapbox-style-quality](https://affpapa.org/nevibecode/skills/mapbox-style-quality.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 2000 установок — Скилл проверяет стили Mapbox перед релизом: валидирует выражения и GeoJSON, считает контраст текста по WCAG, оптимизирует файл стиля. - [uni-helper](https://affpapa.org/nevibecode/skills/uni-helper.md) — скилл · FlippeDround · Claude Code, Codex, Cursor +3 · 794 установки — Скилл-справочник по экосистеме uni-helper: Vite-плагины, библиотеки и утилиты для разработки на uni-app. - [react-mcp](https://affpapa.org/nevibecode/skills/react-mcp.md) — скилл · assistant-ui · Claude Code, Codex, Cursor +3 · 4000 установок — Скилл для работы с @assistant-ui/react-mcp: подключает MCP-серверы, выбранные пользователем, прямо в браузере и регистрирует их инструменты в чате. - [observability](https://affpapa.org/nevibecode/skills/assistant-ui-observability.md) — скилл · assistant-ui · Claude Code, Codex, Cursor +3 · 4000 установок — Подключает Langfuse, LangSmith или Helicone к бэкенд-роутам assistant-ui на AI SDK и рисует собранные спаны через экспериментальный @assistant-ui/react-o11y. - [motion](https://affpapa.org/nevibecode/skills/motiondivision-motion.md) — скилл · motiondivision · Claude Code, Codex, Cursor +3 · 717 установок — Скилл помогает писать анимации на Motion и CSS, искать примеры и разбирать проблемы с производительностью. - [tailwindcss-mobile-first](https://affpapa.org/nevibecode/skills/tailwindcss-mobile-first.md) — скилл · JosiahSiegel · Claude Code, Codex, Cursor +3 · 2100 установок — Скилл для ИИ-агента, который подсказывает, как верстать адаптивные интерфейсы на Tailwind CSS v4 по принципу mobile-first. - [seo-auditing](https://affpapa.org/nevibecode/skills/seo-auditing.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 456 установок — Проверяет техническое SEO веб-проекта: метатеги, микроразметку, robots.txt, карту сайта и метрики Core Web Vitals. - [openclaw-control-center](https://affpapa.org/nevibecode/skills/openclaw-control-center.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 4400 установок — Локальная панель для наблюдения за агентами OpenClaw: задачи, токены, связи сессий, память и документы. - [v4-sdk-integration](https://affpapa.org/nevibecode/skills/v4-sdk-integration.md) — скилл · uniswap · Claude Code, Codex, Cursor +3 · 729 установок — Скилл ведёт агента по Uniswap v4 SDK: сборка свапов через Universal Router, котировки, чтение состояния пула и работа с LP-позициями. - [sap-sac-custom-widget](https://affpapa.org/nevibecode/skills/sap-sac-custom-widget.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 609 установок — Помогает собирать кастомные виджеты для SAP Analytics Cloud: Web Components, привязка данных, панели стилей. - [minimalist](https://affpapa.org/nevibecode/skills/tasteskill-minimalist.md) — скилл · tasteskill · Claude Code, Codex, Cursor +3 · 319 установок — Скилл для веб-дизайна: сначала генерирует референсные изображения секций, разбирает их и только потом пишет фронтенд. - [zustand](https://affpapa.org/nevibecode/skills/pedronauck-zustand.md) — скилл · pedronauck · Claude Code, Codex, Cursor +3 · 353 установки — Скилл для ИИ-агента, который подсказывает паттерны Zustand: структуру сторов, селекторы, middleware и персистентность. - [redesign](https://affpapa.org/nevibecode/skills/educlopez-redesign.md) — скилл · educlopez · Claude Code, Codex, Cursor +3 · 469 установок — Обновляет интерфейс сайта или приложения без потери структуры, SEO и конверсионных форм. - [copilots](https://affpapa.org/nevibecode/skills/copilots.md) — скилл · assistant-ui · Claude Code, Codex, Cursor +3 · 3900 установок — Скилл для assistant-ui: учит агента читать состояние страницы, кликать по компонентам и менять их состояние через хуки React. - [seeker-connect](https://affpapa.org/nevibecode/skills/seeker-connect.md) — скилл · solana-mobile · Claude Code, Codex, Cursor +3 · 7000 установок — Подключает веб-, React Native- и Kotlin-приложения к встроенному кошельку на телефоне Seeker: вход через Solana, подпись сообщений и транзакций. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=42 ## Уточнить [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