# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 58 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=58 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [bun-tanstack-start](https://affpapa.org/nevibecode/skills/bun-tanstack-start.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 414 установок — Скилл подсказывает агенту, как поднять full-stack приложение на TanStack Start с рантаймом Bun: роутинг, серверные функции, сборка. - [nuxt-production](https://affpapa.org/nevibecode/skills/nuxt-production.md) — скилл · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 412 установок — Скилл помогает оптимизировать проекты на Nuxt 4 для продакшена: настраивает гидратацию, тесты Vitest и деплой на серверлесс-платформы. - [react-flow-implementation](https://affpapa.org/nevibecode/skills/react-flow-implementation.md) — скилл · existential-birds · Claude Code, Codex, Cursor +3 · 362 установки — Направляет агента при создании диаграмм и визуальных редакторов на базе @xyflow/react. - [orval](https://affpapa.org/nevibecode/skills/pproenca-orval.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 331 установка — Набор из 42 правил для генерации типизированных клиентов TypeScript из OpenAPI через Orval. - [morphing-icons](https://affpapa.org/nevibecode/skills/morphing-icons.md) — скилл · raphael-salaja · Claude Code, Codex, Cursor +3 · 362 установки — Скилл помогает создавать компоненты иконок, плавно перетекающих друг в друга за счёт трансформации трёх SVG-линий вместо обычного crossfade. - [nuxt-ui-v4](https://affpapa.org/nevibecode/skills/nuxt-ui-v4.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 410 установок — Скилл для сборки интерфейсов на Nuxt UI v4: 125+ компонентов, Tailwind v4, тёмная тема. - [mui-base](https://affpapa.org/nevibecode/skills/mui-base.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 328 установок — Скилл с 48 правилами для сборки headless-библиотек React-компонентов по стилю MUI Base UI. - [css-native](https://affpapa.org/nevibecode/skills/dylantarre-css-native.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 716 установок — Скилл помогает агенту писать анимации на чистом CSS: @keyframes, transition, transform. - [ink](https://affpapa.org/nevibecode/skills/assistant-ui-ink.md) — скилл · assistant-ui · Claude Code, Codex, Cursor +3 · 923 установки — Скилл для сборки чат-интерфейсов прямо в терминале: связывает рантайм assistant-ui с рендерером Ink и выводит ответы как ANSI-разметку. - [migrate-to-rsbuild](https://affpapa.org/nevibecode/skills/migrate-to-rsbuild.md) — скилл · rstackjs · Claude Code, Codex, Cursor +3 · 326 установок — Скилл переводит фронтенд-проекты с webpack, Vite, Create React App и Vue CLI на сборщик Rsbuild. - [saas-productivity](https://affpapa.org/nevibecode/skills/saas-productivity.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 709 установок — Задаёт принципы анимации для рабочих интерфейсов: задач, форм, панелей и уведомлений. - [nuxt-server](https://affpapa.org/nevibecode/skills/nuxt-server.md) — скилл · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 401 установка — Скилл для серверной разработки на Nuxt 4 с Nitro: API-роуты, middleware, базы данных и WebSocket. - [bun-bundler](https://affpapa.org/nevibecode/skills/bun-bundler.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 400 установок — Скилл обучает агента собирать проекты на JavaScript и TypeScript через Bun. - [turborepo](https://affpapa.org/nevibecode/skills/secondsky-turborepo.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 400 установок — Направляет агента при настройке монорепозитория на Turborepo. - [shadcn-ui](https://affpapa.org/nevibecode/skills/existential-birds-shadcn-ui.md) — скилл · existential-birds · Claude Code, Codex, Cursor +3 · 351 установка — Подсказывает агенту, как собирать компоненты на shadcn/ui: Radix, Tailwind, CVA-варианты и data-slot. - [mobile-offline-support](https://affpapa.org/nevibecode/skills/secondsky-mobile-offline-support.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 398 установок — Скилл для офлайн-первого подхода в мобильных приложениях: локальное хранилище, очередь синхронизации, разрешение конфликтов. - [vitest](https://affpapa.org/nevibecode/skills/claude-mpm-team-vitest.md) — скилл · Claude MPM Team · Claude Code, Codex, Cursor +3 · 931 установка — Скилл помогает настроить Vitest в TypeScript-проектах, написать тесты для компонентов и настроить моки модулей или таймеров. - [ionic-app-upgrades](https://affpapa.org/nevibecode/skills/ionic-app-upgrades.md) — скилл · capawesome-team · Claude Code, Codex, Cursor +3 · 834 установки — Ведёт агента через мажорный апгрейд Ionic: пошаговые миграции для Angular, React и Vue, ломающие изменения компонентов и CSS-переменных. - [ui-design-patterns](https://affpapa.org/nevibecode/skills/ui-design-patterns.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 853 установки — Справочник по типовым паттернам интерфейса: навигация, формы, вывод данных, обратная связь и доступность. - [react-native](https://affpapa.org/nevibecode/skills/assistant-ui-react-native.md) — скилл · assistant-ui · Claude Code, Codex, Cursor +3 · 909 установок — Скилл для сборки чат-интерфейсов assistant-ui в Expo и чистом React Native: нативные примитивы, рантайм AI SDK и транспорт к бэкенду. - [tailwindcss-responsive-darkmode](https://affpapa.org/nevibecode/skills/tailwindcss-responsive-darkmode.md) — скилл · JosiahSiegel · Claude Code, Codex, Cursor +3 · 476 установок — Скилл по Tailwind CSS: адаптивная вёрстка, тёмная тема, переключение на лету и защита от вспышки нестилизованного контента. - [bun-react-ssr](https://affpapa.org/nevibecode/skills/bun-react-ssr.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 395 установок — Скилл для сборки серверного React на Bun: renderToString, стриминг, гидратация и свой роутер без фреймворка. - [vitest](https://affpapa.org/nevibecode/skills/sentimony-vitest.md) — скилл · sentimony · Claude Code, Codex, Cursor +3 · 2600 установок — Настраивает, запускает и отлаживает тесты Vitest в проектах на JavaScript и TypeScript. - [webapp-to-capacitor](https://affpapa.org/nevibecode/skills/webapp-to-capacitor.md) — скилл · Cap-go · Claude Code, Codex, Cursor +3 · 665 установок — Планирует и выполняет превращение веб-приложения, PWA или SPA в приложение под iOS и Android на Capacitor, которое проходит ревью магазинов. - [ui5-typescript-conversion](https://affpapa.org/nevibecode/skills/ui5-typescript-conversion.md) — скилл · cline · Claude Code, Codex, Cursor +3 · 910 установок — Скилл ведёт проект SAPUI5 или OpenUI5 через перевод на TypeScript: настройка сборки, типы, сам код. - [ux-principles](https://affpapa.org/nevibecode/skills/ux-principles.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 836 установок — Подключает к агенту эвристики юзабилити, методы юзер-ресёрча и проверки доступности, чтобы интерфейсы проектировались по правилам, а не на глаз. - [data-visualizer](https://affpapa.org/nevibecode/skills/data-visualizer.md) — скилл · daffy0208 · Claude Code, Codex, Cursor +3 · 572 установки — Скилл помогает ИИ-агенту генерировать графики и строить интерактивные дашборды. - [instrument-product-analytics](https://affpapa.org/nevibecode/skills/instrument-product-analytics.md) — скилл · PostHog · Claude Code, Codex, Cursor +3 · 666 установок — Добавляет в код вызовы PostHog, чтобы отслеживать действия пользователей. - [nuxt-core](https://affpapa.org/nevibecode/skills/nuxt-core.md) — скилл · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 390 установок — Скилл для ИИ-агента: подсказывает, как устроен Nuxt 4 — структура каталогов, конфиг, роутинг, SEO и обработка ошибок. - [legend-list-best-practices](https://affpapa.org/nevibecode/skills/legend-list-best-practices.md) — скилл · LegendApp · Claude Code, Codex, Cursor +3 · 546 установок — Скилл для работы с виртуализированным списком @legendapp/list: помогает внедрить его по контрактам библиотеки или провести аудит существующего кода. - [tauri-app-planning](https://affpapa.org/nevibecode/skills/tauri-app-planning.md) — скилл · full-stack-skills · Claude Code, Codex, Cursor +3 · 484 установки — Скилл ведёт от расплывчатого ТЗ к плану реализации приложения на Tauri 2.0: разбирает требования, подбирает плагины и рисует архитектуру. - [nuxt-data](https://affpapa.org/nevibecode/skills/nuxt-data.md) — скилл · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 388 установок — Скилл для работы с данными в Nuxt 4: композаблы, useFetch и useAsyncData, состояние через useState и Pinia. - [daisyui](https://affpapa.org/nevibecode/skills/bobmatnyc-daisyui.md) — скилл · bobmatnyc · Claude Code, Codex, Cursor +3 · 903 установки — Добавляет агенту знание библиотеки daisyUI: семантические классы для 50+ компонентов Tailwind CSS, готовые темы и разметку кнопок, карточек и модалок. - [app-shell](https://affpapa.org/nevibecode/skills/app-shell.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 328 установок — Набор правил для проектирования шапки, переключателя сервисов, сайдбара и строки статуса. - [bun-nuxt](https://affpapa.org/nevibecode/skills/bun-nuxt.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 387 установок — Скилл объясняет агенту, как поднять Nuxt 3 на Bun: скрипты, пресет Nitro, серверные маршруты и деплой. - [don-norman-principles-audit](https://affpapa.org/nevibecode/skills/don-norman-principles-audit.md) — скилл · mastepanoski · Claude Code, Codex, Cursor +3 · 366 установок — Проверяет интерфейс по семи принципам Дона Нормана из «Дизайна привычных вещей» и выдаёт отчёт с рекомендациями. - [tailwind-refactor](https://affpapa.org/nevibecode/skills/tailwind-refactor.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 308 установок — Скилл для рефакторинга классов Tailwind CSS: миграция с v3 на v4, замена устаревших утилит и чистка кода без изменения внешнего вида. - [ionic-app-creation](https://affpapa.org/nevibecode/skills/ionic-app-creation.md) — скилл · capawesome-team · Claude Code, Codex, Cursor +3 · 801 установка — Скилл создаёт новый Ionic-проект через Ionic CLI и помогает выбрать фреймворк, шаблон, Capacitor и Tailwind CSS. - [ag-update](https://affpapa.org/nevibecode/skills/ag-update.md) — скилл · ag-grid · Claude Code, Codex, Cursor +3 · 1400 установок — Проведёт агента по шагам миграции зависимостей AG Grid, AG Charts и AG Studio и соберёт план изменений в отдельные файлы. - [shadcn-layouts](https://affpapa.org/nevibecode/skills/shadcn-layouts.md) — скилл · jwynia · Claude Code, Codex, Cursor +3 · 457 установок — Помогает агенту собрать раскладку на shadcn и Tailwind так, чтобы она заработала с первого раза, и разобраться с высотой, скроллом и flex/grid. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=59 ## Уточнить [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