# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 52 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=52 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [ai-sdk](https://affpapa.org/nevibecode/skills/ai-sdk.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 22 установки — Скилл настраивает работу агента с Vercel AI SDK. - [tanstack-query](https://affpapa.org/nevibecode/skills/tanstack-query-2.md) — скилл · community · Claude Code, Codex, Cursor +3 · 457 установок — Скилл содержит 41 правило оптимизации TanStack Query v5. - [tanstack-ranger](https://affpapa.org/nevibecode/skills/tanstack-ranger.md) — скилл · tanstack-skills · Claude Code, Codex, Cursor +3 · 1300 установок — Безголовые утилиты для доступных слайдеров с одним или несколькими бегунками. - [react-flow-advanced](https://affpapa.org/nevibecode/skills/react-flow-advanced.md) — скилл · existential-birds · Claude Code, Codex, Cursor +3 · 631 установка — Скилл учит агента внедрять сложные паттерны в React Flow: группировку узлов, историю отмены действий, автоматическую раскладку через dagre и перетаскивание элементов. - [vue-typescript](https://affpapa.org/nevibecode/skills/vue-typescript.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 782 установки — Набор правил для генерации кода на Vue 3 и TypeScript с Vite, Pinia и Tailwind. - [roblox-gui](https://affpapa.org/nevibecode/skills/sentinelcore-roblox-gui.md) — скилл · sentinelcore · Claude Code, Codex, Cursor +3 · 1200 установок — Помогает верстать и анимировать интерфейсы в Roblox: от экранных меню до вывесок в 3D-мире. - [expo-react-native-javascript-best-practices](https://affpapa.org/nevibecode/skills/expo-react-native-javascript-best-practices.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 777 установок — Набор правил для разработки мобильных приложений на Expo и React Native с чистым JavaScript. - [progressive-web-app](https://affpapa.org/nevibecode/skills/aj-geddes-progressive-web-app.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 522 установки — Помогает собрать прогрессивное веб-приложение: манифест, service worker, работа без сети и установка на телефон. - [capacitor-performance](https://affpapa.org/nevibecode/skills/capacitor-performance.md) — скилл · Cap-go · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл находит и устраняет просадки скорости в приложениях на Capacitor: долгий старт, белые экраны при выходе из фона и зависания нативного моста. - [apple-ui-skills](https://affpapa.org/nevibecode/skills/apple-ui-skills.md) — скилл · design-skills · Claude Code, Codex, Cursor +3 · 509 установок — Задаёт агенту жёсткие правила вёрстки в стиле Apple: светлый фон, шрифт Inter, сетка 4px. - [frontend-tailwind-best-practices](https://affpapa.org/nevibecode/skills/frontend-tailwind-best-practices.md) — скилл · sergiodxa · Claude Code, Codex, Cursor +3 · 464 установки — Набор правил Tailwind CSS для фронтенда: стеки, отступы через gap, тёмная тема и слияние классов. - [gsap](https://affpapa.org/nevibecode/skills/mindrally-gsap.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 769 установок — Задаёт агенту правила анимаций на GSAP: трансформы вместо left/top, stagger, таймлайны, ScrollTrigger. - [pwa-development](https://affpapa.org/nevibecode/skills/mindrally-pwa-development.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 768 установок — Набор правил по разработке PWA: создание веб-манифеста, сервисных воркеров, стратегий кэширования и работы без сети. - [creating-reanimated-animations](https://affpapa.org/nevibecode/skills/creating-reanimated-animations.md) — скилл · estevg · Claude Code, Codex, Cursor +3 · 857 установок — Генерирует код анимаций на React Native Reanimated версий 3 и 4. - [styled-components-best-practices](https://affpapa.org/nevibecode/skills/styled-components-best-practices.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 762 установки — Задаёт правила архитектуры CSS-in-JS в React: изоляцию стилей, структуру файлов, типизацию темы в TypeScript и работу с ThemeProvider. - [sveltekit-remote-functions](https://affpapa.org/nevibecode/skills/sveltekit-remote-functions.md) — скилл · spences10 · Claude Code, Codex, Cursor +3 · 423 установки — Подсказывает агенту, как писать query(), form(), command() и prerender() в файлах *.remote.ts. - [figma-designer](https://affpapa.org/nevibecode/skills/figma-designer.md) — скилл · zhaono1 · Claude Code, Codex, Cursor +3 · 807 установок — Разбирает макет Figma на токены, спецификации компонентов и состояния взаимодействия, чтобы передать их в планирование или разработку. - [frontend-testing](https://affpapa.org/nevibecode/skills/frontend-testing.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 508 установок — Помогает настроить тесты интерфейса на базе Jest, Vitest, React Testing Library и Cypress. - [admin-dashboard](https://affpapa.org/nevibecode/skills/admin-dashboard.md) — скилл · curiositech · Claude Code, Codex, Cursor +3 · 323 установки — Помогает расширять админ-панель, портал разработчика и консоль операций: новые вкладки, метрики, мониторинг, управление пользователями. - [msw-ui-kit](https://affpapa.org/nevibecode/skills/msw-ui-kit.md) — скилл · MSW-Git · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл подбирает готовые RUID-палитры и виджеты из официальных MSWPackages, чтобы интерфейс игры выглядел цельно. - [svelte](https://affpapa.org/nevibecode/skills/mindrally-svelte.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 753 установки — Инструкция для ИИ-агентов по разработке на Svelte 5 и SvelteKit с рунами, сниппетами, SSR и правилами миграции со Svelte 4. - [mapbox-flutter-patterns](https://affpapa.org/nevibecode/skills/mapbox-flutter-patterns.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 787 установок — Скилл с готовыми паттернами интеграции Mapbox Maps SDK для Flutter. - [search](https://affpapa.org/nevibecode/skills/mobbin-search.md) — скилл · mobbin · Claude Code, Codex, Cursor +3 · 342 установки — Настраивает поисковые запросы к базе интерфейсов Mobbin. - [interaction-design](https://affpapa.org/nevibecode/skills/aj-geddes-interaction-design.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 505 установок — Скилл для проектирования взаимодействий: анимации, состояния загрузки и ошибок, отклик на нажатия. - [expo](https://affpapa.org/nevibecode/skills/expo.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 553 установки — Набор правил для Expo и React Native, помогающий агенту оптимизировать запуск приложения, размер бандла, рендеринг списков и расход памяти. - [responsive-web-design](https://affpapa.org/nevibecode/skills/secondsky-responsive-web-design.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 684 установки — Скилл обучает агента адаптивной вёрстке сайтов по принципу mobile-first. - [react-native-app](https://affpapa.org/nevibecode/skills/react-native-app.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 503 установки — Скилл ведёт агента по сборке кроссплатформенных мобильных приложений на React Native: навигация, состояние, запросы к API. - [electron-best-practices](https://affpapa.org/nevibecode/skills/electron-best-practices.md) — скилл · agent-skills · Claude Code, Codex, Cursor +3 · 820 установок — Скилл ведёт ИИ-агента по разработке Electron-приложений на React: безопасность, типизированный IPC, сборка и подпись. - [nodejs-development](https://affpapa.org/nevibecode/skills/nodejs-development.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 742 установки — Набор инструкций для разработки на Node.js и TypeScript. - [upgrade-browser-sdk-v7](https://affpapa.org/nevibecode/skills/upgrade-browser-sdk-v7.md) — скилл · datadog-labs · Claude Code, Codex, Cursor +3 · 459 установок — Ведёт проект с Datadog Browser SDK с версии 6 на 7: находит устаревшие опции, меняет CDN-ссылки и API. - [form-validation](https://affpapa.org/nevibecode/skills/form-validation.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 497 установок — Помогает настроить валидацию форм в React и Vue с проверкой типов в TypeScript. - [anime-js](https://affpapa.org/nevibecode/skills/anime-js.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 736 установок — Скилл задаёт агенту правила работы с Anime.js: таймлайны, stagger, SVG-морфинг и производительность. - [reactive-programming](https://affpapa.org/nevibecode/skills/reactive-programming.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 491 установка — Скилл для работы с реактивными потоками: RxJS, observables, обработка backpressure. - [agent-browser](https://affpapa.org/nevibecode/skills/agent-browser.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 20 установок — Управляет браузером через CLI, делает снимки страниц, кликает по элементам и проверяет запущенные dev-серверы. - [pnpm](https://affpapa.org/nevibecode/skills/mindrally-pnpm.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 721 установка — Скилл задаёт правила работы с pnpm, монорепозиториями и изоляцией зависимостей в проектах для Claude Code. - [tanstack-query](https://affpapa.org/nevibecode/skills/mindrally-tanstack-query.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 724 установки — Скилл задаёт агенту правила работы с серверным состоянием в React: ключи запросов, queryOptions, мутации и переход с v4 на v5. - [sveltekit](https://affpapa.org/nevibecode/skills/mindrally-sveltekit.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 720 установок — Скилл задаёт правила разработки на SvelteKit с TypeScript и Tailwind CSS. - [solidity](https://affpapa.org/nevibecode/skills/solidity.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 721 установка — Скилл для написания и ревью Solidity-контрактов: паттерны защиты от reentrancy, оптимизация gas, тесты и связка с React-фронтендом. - [rspress-best-practices](https://affpapa.org/nevibecode/skills/rspress-best-practices.md) — скилл · rstackjs · Claude Code, Codex, Cursor +3 · 538 установок — Скилл задаёт агенту правила для сайтов на Rspress v2: конфигурация, навигация, MDX, ассеты, поиск и деплой. - [figma-integration](https://affpapa.org/nevibecode/skills/figma-integration.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 718 установок — Направляет ИИ-агента при переносе макетов из Figma в код: от разбора токенов и стилей до настройки MCP-серверов. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=53 ## Уточнить [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