# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 55 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=55 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [vinext-vite-nextjs](https://affpapa.org/nevibecode/skills/vinext-vite-nextjs.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 1400 установок — Помогает перевести проект с Next.js на Vite и подготовить сборку для Cloudflare Workers. - [inspira-ui](https://affpapa.org/nevibecode/skills/inspira-ui.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 553 установки — Скилл помогает собирать Vue и Nuxt-интерфейсы из 120+ анимированных компонентов. - [zustand](https://affpapa.org/nevibecode/skills/pproenca-zustand.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 446 установок — Скилл с 43 правилами для Zustand в React: архитектура сторов, селекторы, лишние ре-рендеры. - [nextjs-advanced-routing](https://affpapa.org/nevibecode/skills/nextjs-advanced-routing.md) — скилл · wsimmonds · Claude Code, Codex, Cursor +3 · 334 установки — Скилл для ИИ-агента, который разбирает продвинутый App Router в Next.js: серверные экшены, Route Handlers, параллельные и перехватывающие маршруты. - [linear-ui-skills](https://affpapa.org/nevibecode/skills/linear-ui-skills.md) — скилл · design-skills · Claude Code, Codex, Cursor +3 · 393 установки — Задаёт агенту жёсткие правила тёмного интерфейса: палитра, Inter, сетка 4px. - [dribbble-ui-skills](https://affpapa.org/nevibecode/skills/dribbble-ui-skills.md) — скилл · design-skills · Claude Code, Codex, Cursor +3 · 392 установки — Задаёт строгие правила дизайн-системы Dribbble для ИИ-агентов: сетку 4px, шрифт Inter, палитру токенов и ограничения на анимации. - [upgrade-react-navigation](https://affpapa.org/nevibecode/skills/upgrade-react-navigation.md) — скилл · react-navigation · Claude Code, Codex, Cursor +3 · 502 установки — Скилл ведёт агента через переход React Navigation с 6.x на 7.x или с 7.x на 8.x: правит ломающие изменения и сохраняет поведение навигации. - [testimonial-video](https://affpapa.org/nevibecode/skills/testimonial-video.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 932 установки — Превращает отзывы клиентов и цитаты в короткие вертикальные видеоролики на Remotion с анимированным рейтингом звёзд и строчной вёрсткой. - [tailwindcss-advanced-design-systems](https://affpapa.org/nevibecode/skills/tailwindcss-advanced-design-systems.md) — скилл · JosiahSiegel · Claude Code, Codex, Cursor +3 · 655 установок — Скилл для сборки дизайн-системы на Tailwind v4: токены в @theme, цветовые шкалы, типографика, тени и тёмная тема. - [airbnb-ui-skills](https://affpapa.org/nevibecode/skills/airbnb-ui-skills.md) — скилл · design-skills · Claude Code, Codex, Cursor +3 · 389 установок — Набор правил для генерации светлых интерфейсов в эстетике Airbnb. - [inertia-rails-controllers](https://affpapa.org/nevibecode/skills/inertia-rails-controllers.md) — скилл · inertia-rails · Claude Code, Codex, Cursor +3 · 491 установка — Подсказывает агенту, как правильно отдавать данные из Rails-контроллеров в Inertia.js: render inertia, типы пропсов, общие данные, flash и ошибки валидации. - [inertia-rails-forms](https://affpapa.org/nevibecode/skills/inertia-rails-forms.md) — скилл · inertia-rails · Claude Code, Codex, Cursor +3 · 486 установок — Скилл для работы с формами Inertia.js + Rails: создание, редактирование, удаление, визарды и загрузка файлов. - [accessibility-auditor](https://affpapa.org/nevibecode/skills/onewave-ai-accessibility-auditor.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 322 установки — Скилл проводит аудит доступности веб-страниц по стандартам WCAG 2.1 AA. - [notion-ui-skills](https://affpapa.org/nevibecode/skills/notion-ui-skills.md) — скилл · design-skills · Claude Code, Codex, Cursor +3 · 383 установки — Скилл задаёт правила вёрстки в стиле Notion: сетку 4px и цветовую палитру с базовым фоном #F6F6F6. - [build-chatgpt-app](https://affpapa.org/nevibecode/skills/build-chatgpt-app.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 16 установок — Скилл помогает создавать, рефакторить и отлаживать приложения на ChatGPT Apps SDK с MCP-сервером и UI-виджетами. - [node-link-and-diagram-layout](https://affpapa.org/nevibecode/skills/node-link-and-diagram-layout.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 16 установок — Скилл выбирает алгоритм раскладки для графов, схем и связанных узлов. - [nextjs-client-cookie-pattern](https://affpapa.org/nevibecode/skills/nextjs-client-cookie-pattern.md) — скилл · wsimmonds · Claude Code, Codex, Cursor +3 · 323 установки — Скилл показывает, как из клиентского компонента Next.js выставить серверную куку через server action. - [event-landing-page](https://affpapa.org/nevibecode/skills/event-landing-page.md) — скилл · Samuel Berthe · Claude Code, Codex, Cursor +3 · 5300 установок — Собирает публичную страницу конференции, митапа или хакатона: секции, кнопки по датам, доступность и разметку события. - [ui-ux-expert](https://affpapa.org/nevibecode/skills/ui-ux-expert.md) — скилл · martinholovsky · Claude Code, Codex, Cursor +3 · 828 установок — Скилл превращает Claude в проектировщика интерфейсов с упором на доступность по стандарту WCAG 2.2 и разработку через TDD. - [create-remotion-geist](https://affpapa.org/nevibecode/skills/create-remotion-geist.md) — скилл · vercel-labs · Claude Code, Codex, Cursor +3 · 484 установки — Скилл для создания роликов на Remotion в тёмной эстетике Geist: шрифты, палитра и пружинные анимации Vercel. - [react-component-generator](https://affpapa.org/nevibecode/skills/react-component-generator.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 318 установок — Скилл для генерации React-компонентов на TypeScript: пропсы, хуки, доступность. - [anycap-human-interaction](https://affpapa.org/nevibecode/skills/anycap-human-interaction.md) — скилл · anycap-ai · Claude Code, Codex, Cursor +3 · 653 установки — Скилл для сбора визуальных правок от человека и работы с интерактивной доской Excalidraw. - [web-performance-audit](https://affpapa.org/nevibecode/skills/secondsky-web-performance-audit.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 526 установок — Скилл для аудита скорости страниц: снимает метрики Core Web Vitals, ищет узкие места и подсказывает, что чинить. - [ios-design](https://affpapa.org/nevibecode/skills/ios-design.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 418 установок — Скилл с 62 правилами вёрстки интерфейсов на SwiftUI: семантические цвета, типографика, состояния, навигация и доступность. - [vite-react-best-practices](https://affpapa.org/nevibecode/skills/vite-react-best-practices.md) — скилл · ant-gravity · Claude Code, Codex, Cursor +3 · 634 установки — Сборник правил для разработки React SPA на Vite: настройка раздачи статики и управление кешированием ассетов. - [performance-profiler](https://affpapa.org/nevibecode/skills/onewave-ai-performance-profiler.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 311 установок — Скилл помогает находить узкие места в сети, рендеринге, памяти и вычислениях. - [inertia-rails-typescript](https://affpapa.org/nevibecode/skills/inertia-rails-typescript.md) — скилл · inertia-rails · Claude Code, Codex, Cursor +3 · 468 установок — Скилл настраивает строгую типизацию TypeScript в Inertia Rails для React, Vue и Svelte. - [vtex-io-storefront-react](https://affpapa.org/nevibecode/skills/vtex-io-storefront-react.md) — скилл · vtex · Claude Code, Codex, Cursor +3 · 1200 установок — Задаёт правила создания React-компонентов витрины VTEX IO: обязывает использовать vtex.css-handles, контекстные хуки и локализацию, защищая браузерный код от серверных зависимостей. - [taiwan-md-knowledge-base](https://affpapa.org/nevibecode/skills/taiwan-md-knowledge-base.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл ведёт открытую базу знаний о Тайване на Astro v5: статьи на китайском и английском, граф связей на D3.js. - [json-render-generative-ui](https://affpapa.org/nevibecode/skills/json-render-generative-ui.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл учит нейросеть собирать интерфейсы через json-render: модель выдаёт строгий JSON-манифест, а приложение отрисовывает его в React, Vue или PDF. - [git-city-3d-github-visualization](https://affpapa.org/nevibecode/skills/git-city-3d-github-visualization.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл для работы над Git City — проектом, где профиль GitHub превращается в здание в 3D-городе на Next.js и Three.js. - [nextjs-use-search-params-suspense](https://affpapa.org/nevibecode/skills/nextjs-use-search-params-suspense.md) — скилл · wsimmonds · Claude Code, Codex, Cursor +3 · 311 установок — Скилл объясняет, как правильно читать параметры URL в клиентских компонентах Next.js: директива 'use client' плюс обёртка Suspense. - [framework-to-capacitor](https://affpapa.org/nevibecode/skills/framework-to-capacitor.md) — скилл · Cap-go · Claude Code, Codex, Cursor +3 · 870 установок — Настраивает статическую сборку Next.js, Nuxt, Angular, SvelteKit или Vite так, чтобы Capacitor упаковал её в приложение для iOS и Android. - [feature-arch](https://affpapa.org/nevibecode/skills/pproenca-feature-arch.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 412 установок — Разбирает React-проект по фичам и выдаёт blueprint целевой архитектуры с деревом каталогов, публичными API и планом миграции. - [event-accessibility-inclusion](https://affpapa.org/nevibecode/skills/event-accessibility-inclusion.md) — скилл · Samuel Berthe · Claude Code, Codex, Cursor +3 · 4800 установок — Помогает определить, какие условия доступности заложить в техническое мероприятие, как их описать публично и кто за них отвечает. - [expo-react-native-coder](https://affpapa.org/nevibecode/skills/expo-react-native-coder.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 409 установок — Скилл с 50 правилами и шаблонами кода для разработки мобильных приложений на Expo и React Native. - [frontend-js-best-practices](https://affpapa.org/nevibecode/skills/frontend-js-best-practices.md) — скилл · sergiodxa · Claude Code, Codex, Cursor +3 · 333 установки — Задаёт 17 правил оптимизации и стиля для JavaScript и TypeScript. - [shadcn-component-review](https://affpapa.org/nevibecode/skills/shadcn-component-review.md) — скилл · mattbx · Claude Code, Codex, Cursor +3 · 635 установок — Проверяет готовые компоненты и раскладки на соответствие паттернам shadcn: отступы, семантические токены, состав примитивов и правила выбранного визуального стиля. - [threejs-data-visualization](https://affpapa.org/nevibecode/skills/threejs-data-visualization.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 15 установок — Помогает агенту выбрать рендерер и собрать 3D или GPU-визуализацию, когда обычных SVG и Canvas2D уже не хватает. - [bubbletea](https://affpapa.org/nevibecode/skills/bubbletea.md) — скилл · GGPrompts · Claude Code, Codex, Cursor +3 · 496 установок — Помогает проектировать консольные интерфейсы на Go с помощью Bubbletea и Lipgloss. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=56 ## Уточнить [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