# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 43 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=43 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [recording-browser-flow-as-test](https://affpapa.org/nevibecode/skills/recording-browser-flow-as-test.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 406 установок — Записывает действия в браузере через MCP и превращает их в E2E-тест Playwright с надёжными селекторами accessibility tree. - [three-webgl-game](https://affpapa.org/nevibecode/skills/three-webgl-game.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 48 установок — Помогает создавать браузерные 3D-игры на чистом Three.js, TypeScript и Vite с физикой Rapier и управлением игровым циклом без React. - [create-component](https://affpapa.org/nevibecode/skills/create-component.md) — скилл · AEM Dev Agent · Claude Code, Codex, Cursor +3 · 1000 установок — Генерирует компоненты AEM с диалогами, HTL, Sling Models и тестами по стандартам Adobe. - [isometric-animation](https://affpapa.org/nevibecode/skills/isometric-animation.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл для изометрических и 2.5D-анимаций: стопки слоёв, выдавленные блоки, взрывные схемы и лёгкий дрейф камеры. - [whiteboard-animation](https://affpapa.org/nevibecode/skills/whiteboard-animation.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл учит ИИ анимировать векторные рисунки и рукописный текст в стиле VideoScribe с рукой, держащей маркер. - [diagram-animation](https://affpapa.org/nevibecode/skills/diagram-animation.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл для ИИ-кодинга, который превращает статичную диаграмму или график в пошаговое появление: узлы, связи, подписи, растущие столбцы. - [godot-ui](https://affpapa.org/nevibecode/skills/godot-ui.md) — скилл · Zate · Claude Code, Codex, Cursor +3 · 2700 установок — Скилл даёт агенту знания о Control-нодах, темах и типовых экранах Godot. - [screenshotting-changelog](https://affpapa.org/nevibecode/skills/screenshotting-changelog.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 401 установка — Делает визуальный changelog для пул-реквеста: снимает страницы до и после правок и вставляет пары картинок в описание PR. - [react-server-components](https://affpapa.org/nevibecode/skills/react-server-components.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 954 установки — Скилл объясняет React Server Components: какие компоненты рендерить на сервере и где ставить 'use client'. - [ui-design](https://affpapa.org/nevibecode/skills/ui-design.md) — скилл · TencentCloudBase · Claude Code, Codex, Cursor +3 · 1800 установок — Заставляет агента сначала выдать дизайн-спецификацию — палитру, шрифты, сетку — и только потом писать код интерфейса. - [web-development](https://affpapa.org/nevibecode/skills/web-development.md) — скилл · TencentCloudBase · Claude Code, Codex, Cursor +3 · 1800 установок — Скилл для реализации, отладки и сборки веб-фронтенда, когда направление продукта уже определено. - [progressive-hydration](https://affpapa.org/nevibecode/skills/progressive-hydration.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 952 установки — Скилл объясняет агенту, как разбить гидратацию серверного React-приложения на части и отложить JavaScript для неважных блоков. - [updating-npm-package](https://affpapa.org/nevibecode/skills/updating-npm-package.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 398 установок — Инструмент помогает обновлять npm-пакеты без скрытых поломок в коде. - [react-native-patterns](https://affpapa.org/nevibecode/skills/react-native-patterns.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 399 установок — Скилл направляет агента при разработке мобильных приложений на React Native и Expo: от навигации до различий между iOS и Android. - [use-user-controlled-wallets](https://affpapa.org/nevibecode/skills/use-user-controlled-wallets.md) — скилл · circlefin · Claude Code, Codex, Cursor +3 · 949 установок — Скилл для сборки некастодиальных кошельков на SDK Circle: вход через Google, Apple, Facebook, email OTP или PIN, ключи остаются у пользователя. - [react-selective-hydration](https://affpapa.org/nevibecode/skills/react-selective-hydration.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 943 установки — Скилл учит агента настраивать выборочную гидратацию и потоковый SSR в React 18+. - [nitro-fetch](https://affpapa.org/nevibecode/skills/nitro-fetch.md) — скилл · Margelo · Claude Code, Codex, Cursor +3 · 616 установок — Скилл для ИИ-ассистентов, который подсказывает реальные API react-native-nitro-fetch вместо выдуманных: fetch, WebSocket, TextDecoder, префетчинг. - [md-document](https://affpapa.org/nevibecode/skills/md-document.md) — скилл · Alireza Rezvani · Claude Code · 49 установок — Превращает длинный markdown — спецификации, RFC, отчёты, планы — в один HTML-файл с оглавлением, поиском и кнопками копирования кода. - [frontend-design-review](https://affpapa.org/nevibecode/skills/frontend-design-review.md) — скилл · microsoft · Claude Code, GitHub Copilot · 237 установок — Скилл проверяет и создаёт интерфейсы с учётом дизайна, доступности и дизайн-системы. - [server-side-rendering](https://affpapa.org/nevibecode/skills/server-side-rendering.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 942 установки — Скилл объясняет серверный рендеринг в React и подсказывает, когда он оправдан, а когда хватит статики или клиентского рендеринга. - [particle-system](https://affpapa.org/nevibecode/skills/particle-system.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл для ИИ-кодинга, который помогает агенту собрать систему частиц: конфетти, снег, дым, искры, сетку из точек и GPU-частицы на Three.js Points. - [threejs-animation](https://affpapa.org/nevibecode/skills/iart-ai-threejs-animation.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл для ИИ-кодинга, который помогает писать анимацию Three.js и React Three Fiber: сцены, GLTF-клипы, камера по скроллу, инстансинг. - [aceternity-ui](https://affpapa.org/nevibecode/skills/aceternity-ui.md) — скилл · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл подключает к агенту библиотеку Aceternity UI: больше 100 анимированных компонентов React для Next.js с Tailwind. - [converting-css-modules-to-tailwind](https://affpapa.org/nevibecode/skills/converting-css-modules-to-tailwind.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 392 установки — Переводит компонент с CSS Modules на утилитарные классы Tailwind: разбирает styles.xxx, чистит импорты и удаляет файл модуля. - [responsive-web-design](https://affpapa.org/nevibecode/skills/responsive-web-design.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл для ИИ-агента, который помогает писать адаптивные интерфейсы на Flexbox, CSS Grid и медиазапросах. - [hyva-theme-list](https://affpapa.org/nevibecode/skills/hyva-theme-list.md) — скилл · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл обходит проект Magento 2 и выдаёт пути всех тем Hyvä. - [hyva-playwright-test](https://affpapa.org/nevibecode/skills/hyva-playwright-test.md) — скилл · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 установок — Помогает писать e2e-тесты Playwright под витрины Hyvä на Magento с Alpine.js. - [hyva-ui-component](https://affpapa.org/nevibecode/skills/hyva-ui-component.md) — скилл · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл переносит шаблонные UI-компоненты Hyvä в выбранную тему. - [hyva-render-media-image](https://affpapa.org/nevibecode/skills/hyva-render-media-image.md) — скилл · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 установок — Генерирует код адаптивных для шаблонов Hyvä Theme через view model Media. - [hyva-compile-tailwind-css](https://affpapa.org/nevibecode/skills/hyva-compile-tailwind-css.md) — скилл · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 установок — Автоматизирует сборку Tailwind CSS для тем Hyvä в Magento 2. - [hyva-child-theme](https://affpapa.org/nevibecode/skills/hyva-child-theme.md) — скилл · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 установок — Создаёт дочернюю тему Hyvä в проекте Magento 2, готовит структуру и сборку Tailwind CSS. - [hyva-alpine-component](https://affpapa.org/nevibecode/skills/hyva-alpine-component.md) — скилл · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 установок — Помогает писать компоненты Alpine.js для тем Hyvä в Magento 2 так, чтобы они работали при строгой политике Content Security Policy. - [mapbox-store-locator-patterns](https://affpapa.org/nevibecode/skills/mapbox-store-locator-patterns.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 1700 установок — Паттерны для поиска заведений на карте через Mapbox GL JS. - [nextjs](https://affpapa.org/nevibecode/skills/pproenca-nextjs.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл помогает писать и проверять приложения на Next.js 16 App Router: кэширование, серверные компоненты, маршруты и чистоту кодовой базы. - [electron-dev](https://affpapa.org/nevibecode/skills/electron-dev.md) — скилл · jamditis · Claude Code, Codex, Cursor +3 · 305 установок — Скилл для сборки десктопных приложений на Electron с React, TypeScript и Vite: IPC, трей, PTY-терминалы, упаковка. - [storybook-stories](https://affpapa.org/nevibecode/skills/storybook-stories.md) — скилл · Pedro Nauck · Claude Code, Codex, Cursor +3 · 305 установок — Пишет и правит Storybook-сторис, опираясь на конвенции вашего репозитория. - [analytics-metrics](https://affpapa.org/nevibecode/skills/analytics-metrics.md) — скилл · hoodini · Claude Code, Codex, Cursor +3 · 380 установок — Скилл собирает дашборды и графики на Recharts: линейные, столбчатые, круговые диаграммы и карточки KPI. - [incremental-static-rendering](https://affpapa.org/nevibecode/skills/incremental-static-rendering.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 918 установок — Скилл учит агента настраивать Incremental Static Regeneration в Next.js. - [cross-browser-testing](https://affpapa.org/nevibecode/skills/cross-browser-testing.md) — скилл · kindlmann · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл помогает выбрать, какие браузеры тестировать, настроить их в Playwright и вести журнал известных расхождений между движками. - [accessibility-testing](https://affpapa.org/nevibecode/skills/accessibility-testing.md) — скилл · kindlmann · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл для проверки доступности: гоняет axe-core через Playwright, аудит клавиатуры и экранных дикторов, разбор ARIA. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=44 ## Уточнить [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