# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 28 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=28 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [clerk-expo](https://affpapa.org/nevibecode/skills/clerk-expo.md) — скилл · clerk · Claude Code, Codex, Cursor +3 · 14100 установок — Скилл, который добавляет вход и регистрацию Clerk в приложения на Expo и React Native. - [commerce-b2b-open-code-components-replace](https://affpapa.org/nevibecode/skills/commerce-b2b-open-code-components-replace.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 4600 установок — Меняет стандартные B2B Commerce компоненты на открытые аналоги в content.json метаданных сайта. - [clerk-vue-patterns](https://affpapa.org/nevibecode/skills/clerk-vue-patterns.md) — скилл · clerk · Claude Code, Codex, Cursor +3 · 14000 установок — Скилл подсказывает агенту, как связать Vue 3 с Clerk: композаблы, навигационные хуки Vue Router и стор Pinia. - [clerk-nuxt-patterns](https://affpapa.org/nevibecode/skills/clerk-nuxt-patterns.md) — скилл · clerk · Claude Code, Codex, Cursor +3 · 13900 установок — Скилл подсказывает агенту паттерны авторизации @clerk/nuxt для Nuxt 3. - [styleseed](https://affpapa.org/nevibecode/skills/styleseed.md) — скилл · bitjaru · Claude Code, Codex, Cursor +3 · 570 установок — Скилл для работы с интерфейсом: сборка, правка и проверка UI с сохранением уже принятых в проекте дизайн-решений. - [paperkit](https://affpapa.org/nevibecode/skills/paperkit.md) — скилл · dpearson2699 · Claude Code, Codex, Cursor +3 · 3000 установок — Скилл помогает встроить редактирование разметки PaperKit в приложение для iOS. - [animate-text](https://affpapa.org/nevibecode/skills/animate-text.md) — скилл · pixel-point · Claude Code, Codex, Cursor +3 · 2700 установок — Каталог из 24 готовых спецификаций текстовых анимаций: агент выбирает эффект по имени и переносит его в GSAP, Motion, CSS или WAAPI. - [build-review-interface](https://affpapa.org/nevibecode/skills/build-review-interface.md) — скилл · ai-evals-course · Claude Code, Codex, Cursor +3 · 970 установок — Создаёт браузерный интерфейс для разметки трейсов LLM с сохранением в JSON, CSV или SQLite. - [vuetify0](https://affpapa.org/nevibecode/skills/vuetify0.md) — скилл · vuetifyjs · Claude Code, Codex, Cursor +3 · 721 установка — Подсказывает агенту, какие компоненты и composables из @vuetify/v0 взять вместо самописной логики — от кнопки до виртуального списка. - [winforms-expert](https://affpapa.org/nevibecode/skills/winforms-expert.md) — скилл · dotnet · Claude Code, Codex, Cursor +3 · 955 установок — Скилл для работы с Windows Forms: правит код так, чтобы проект собирался, работал в рантайме и оставался редактируемым в Visual Studio Designer. - [content-management-systems](https://affpapa.org/nevibecode/skills/content-management-systems.md) — скилл (официальный GitHub) · github · GitHub Copilot · 128 установок — Помогает GitHub Copilot работать с архитектурой CMS: темами, плагинами, моделями данных и загрузкой медиа. - [wordpress-elementor](https://affpapa.org/nevibecode/skills/wordpress-elementor.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 2900 установок — Редактирует страницы Elementor и управляет шаблонами WordPress через WP-CLI или автоматизацию браузера. - [paper-poster-html](https://affpapa.org/nevibecode/skills/paper-poster-html.md) — скилл · wanshuiyin · Claude Code, Codex, Cursor +3 · 311 установок — Собирает постер для научных конференций в виде одного HTML-файла и выгружает в печатный PDF через Chromium. - [procedural-fish-render](https://affpapa.org/nevibecode/skills/procedural-fish-render.md) — скилл · vibe-motion · Claude Code, Codex, Cursor +3 · 1000 установок — Автоматизирует запуск Remotion для экспорта процедурной анимации рыбы в видеофайл через проектный скрипт. - [Agentic UX Design - Relationship-Centric Interfaces](https://affpapa.org/nevibecode/skills/agentic-ux-design-relationship-centric-interfaces.md) — скилл · bencium · Claude Code, Codex, Cursor +3 · 3300 установок — Направляет проектирование ИИ-интерфейсов вокруг памяти, динамики доверия и совместных планов, а не разовых экранов. - [bencium-code-conventions](https://affpapa.org/nevibecode/skills/bencium-code-conventions.md) — скилл · bencium · Claude Code, Codex, Cursor +3 · 3300 установок — Задаёт правила Bence для React и Next.js: стек, стиль кода, тесты и рабочий процесс. - [renaissance-architecture](https://affpapa.org/nevibecode/skills/renaissance-architecture.md) — скилл · bencium · Claude Code, Codex, Cursor +3 · 3300 установок — Скилл для проектирования функций и интерфейсов: подталкивает агента к первым принципам вместо «X, но для Y». - [image-to-code](https://affpapa.org/nevibecode/skills/plugin87-image-to-code.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 719 установок — Переносит макеты и скриншоты интерфейсов в код дизайн-системы на дизайн-токенах DTCG с проверкой контрастности и доступности. - [interfaces-that-feel](https://affpapa.org/nevibecode/skills/interfaces-that-feel.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл для оценки интерфейса, который работает правильно, но ощущается холодным. - [critique-affordance](https://affpapa.org/nevibecode/skills/critique-affordance.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1600 установок — Анализирует готовый экран на понятность интерфейса: проверяет кликабельность элементов, видимость состояний и читаемость главного CTA. - [ux-audit](https://affpapa.org/nevibecode/skills/ux-audit.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 2800 установок — Скилл проверяет веб-приложение через реальные действия в браузере и ищет ошибки поведения, доступности и отображения. - [web-asset-generator](https://affpapa.org/nevibecode/skills/web-asset-generator.md) — скилл · alonw0 · Claude Code, Codex, Cursor +3 · 933 установки — Генерирует фавиконки, PWA-иконки и мета-картинки Open Graph по логотипу, эмодзи или тексту. - [ui-ux-pro-max](https://affpapa.org/nevibecode/skills/galaxy-dawn-ui-ux-pro-max.md) — скилл · Galaxy-Dawn · Claude Code, Codex, Cursor +3 · 506 установок — Превращает расплывчатое «сделай красиво» в конкретную дизайн-систему: палитра, типографика, правила компонентов и подсказки под ваш стек. - [ruler-progress-render](https://affpapa.org/nevibecode/skills/ruler-progress-render.md) — скилл · vibe-motion · Claude Code, Codex, Cursor +3 · 958 установок — Загружает проект ruler-progress-animator и рендерит шкалу прогресса через Remotion. - [astro](https://affpapa.org/nevibecode/skills/astrolicious-astro.md) — скилл · astrolicious · Claude Code, Codex, Cursor +3 · 18200 установок — Скилл для работы с фреймворком Astro: страницы, компоненты, адаптеры SSR, коллекции контента и деплой. - [nuxt-studio](https://affpapa.org/nevibecode/skills/nuxt-studio.md) — скилл · onmax · Claude Code, Codex, Cursor +3 · 1600 установок — Помогает настроить self-hosted Nuxt Studio: авторизацию, медиа, черновики и публикацию через Git. - [sanity-live-cache-components](https://affpapa.org/nevibecode/skills/sanity-live-cache-components.md) — скилл · sanity-io · Claude Code, Codex, Cursor +3 · 527 установок — Связывает next-sanity с кэшируемыми компонентами Next.js: один общий 'use cache'-барьер, sanityFetch и живая перевалидация через . - [landing](https://affpapa.org/nevibecode/skills/landing.md) — скилл · Alireza Rezvani · Claude Code · 404 установки — Скилл создаёт одностраничный HTML-лендинг с 3D-анимациями, эффектами GSAP и параллаксом мыши. - [pixijs-html-source](https://affpapa.org/nevibecode/skills/pixijs-html-source.md) — скилл · pixijs · Claude Code, Codex, Cursor +3 · 4500 установок — Учит агента превращать живой DOM-элемент или его снимок в текстуру PixiJS v8 через экспериментальный HTML-in-Canvas. - [setup-react-native-storybook](https://affpapa.org/nevibecode/skills/setup-react-native-storybook.md) — скилл · storybookjs · Claude Code, Codex, Cursor +3 · 528 установок — Скилл автоматизирует развёртывание Storybook 10 в проектах на React Native. - [tastemaker](https://affpapa.org/nevibecode/skills/tastemaker.md) — скилл · codeswithroh · Claude Code, Codex, Cursor +3 · 892 установки — Скилл для генерации интерфейсов: берёт стиль из реальных референсов, запоминает его и переиспользует в проекте. - [focus-engine](https://affpapa.org/nevibecode/skills/focus-engine.md) — скилл · dpearson2699 · Claude Code, Codex, Cursor +3 · 2600 установок — Скилл для ИИ-кодинга по фокусу в SwiftUI и UIKit: клавиатура, направленное перемещение, сцены и восстановление после презентаций. - [android-design-guidelines](https://affpapa.org/nevibecode/skills/android-design-guidelines.md) — скилл · platform-design-skills · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл для ИИ-агента, который держит Android-интерфейс в рамках Material Design 3: динамический цвет, роли цветов, навигация. - [tanstack-start](https://affpapa.org/nevibecode/skills/jezweb-tanstack-start.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл собирает фуллстек-приложение на TanStack Start и Cloudflare Workers с нуля: SSR, файловый роутинг, D1, авторизация. - [tanstack-integration-best-practices](https://affpapa.org/nevibecode/skills/tanstack-integration-best-practices.md) — скилл · DeckardGer · Claude Code, Codex, Cursor +3 · 2900 установок — Скилл с правилами стыковки TanStack Query, Router и Start: потоки данных, SSR с гидратацией и согласование кэша. - [remotion-3d-ticker](https://affpapa.org/nevibecode/skills/remotion-3d-ticker.md) — скилл · vibe-motion · Claude Code, Codex, Cursor +3 · 852 установки — Создаёт зацикленную трёхмерную вертикальную прокрутку для видео в Remotion. - [landing-page-design](https://affpapa.org/nevibecode/skills/landing-page-design.md) — скилл · 101-skills · Claude Code, Codex, Cursor +3 · 56100 установок — Помогает спроектировать лендинг с понятным первым экраном, CTA и социальными доказательствами. - [light-spotlight-render](https://affpapa.org/nevibecode/skills/light-spotlight-render.md) — скилл · vibe-motion · Claude Code, Codex, Cursor +3 · 840 установок — Скилл создаёт HTML-анимацию, в которой световое пятно раскрывает текст. - [image-processing](https://affpapa.org/nevibecode/skills/image-processing.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 2400 установок — Ресайз, обрезка полей, конвертация в WebP и PNG, тумбнейлы и OG-картинки. - [convex-realtime](https://affpapa.org/nevibecode/skills/convex-realtime.md) — скилл · waynesutton · Claude Code, Codex, Cursor +3 · 2900 установок — Скилл объясняет, как связать фронтенд с подписками Convex: useQuery, оптимистичные обновления, живая пагинация и борьба с лишними ререндерами. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=29 ## Уточнить [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