# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 65 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=65 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [depth](https://affpapa.org/nevibecode/skills/depth.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 537 установок — Настраивает систему высот, двухкомпонентные тени и вдавленные поверхности интерфейса. - [ux-usability-foundations](https://affpapa.org/nevibecode/skills/ux-usability-foundations.md) — скилл · hueyexe · Claude Code, Codex, Cursor +3 · 559 установок — Скилл учит агента проектировать и рецензировать интерфейсы с точки зрения продуктовой логики, обратной связи и защиты от ошибок пользователя. - [lynx-typescript](https://affpapa.org/nevibecode/skills/lynx-typescript.md) — скилл · lynx-community · Claude Code, Codex, Cursor +3 · 425 установок — Скилл помогает настроить TypeScript в проектах на Lynx и ReactLynx, подсказывает типизацию событий, глобальных свойств и нативных компонентов. - [formisch](https://affpapa.org/nevibecode/skills/formisch.md) — скилл · open-circle · Claude Code, Codex, Cursor +3 · 418 установок — Скилл учит ИИ-агента работать с Formisch — headless-библиотекой форм на схемах Valibot. - [imagery](https://affpapa.org/nevibecode/skills/imagery.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 533 установки — Оценивает и правит оформление картинок, иконок и скриншотов в интерфейсе, чтобы улучшить читаемость текста и удержать сетку. - [information-architecture-navigation](https://affpapa.org/nevibecode/skills/information-architecture-navigation.md) — скилл · hueyexe · Claude Code, Codex, Cursor +3 · 556 установок — Скилл для проектирования навигации, меню, таксономии и поиска в цифровом продукте. - [framer-motion-react](https://affpapa.org/nevibecode/skills/framer-motion-react.md) — скилл · C-Jeril · Claude Code, Codex, Cursor +3 · 822 установки — Скилл по Framer Motion для React и Next.js: AnimatePresence, layout-анимации, useAnimation и обход проблем с SSR. - [frontend-design-review](https://affpapa.org/nevibecode/skills/dauquangthanh-frontend-design-review.md) — скилл · DauQuangThanh · Claude Code, Codex, Cursor +3 · 458 установок — Скилл проверяет интерфейсы на соответствие дизайн-системе, контрастность WCAG 2.1 AA и адаптивность. - [optimize](https://affpapa.org/nevibecode/skills/aladicf-optimize.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 536 установок — Скилл находит, почему интерфейс тормозит: медленная загрузка, лаги анимаций, тяжёлые картинки, раздутый бандл. - [bolder](https://affpapa.org/nevibecode/skills/bolder.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 535 установок — Скилл для тех случаев, когда интерфейс выглядит слишком безопасно и безлико. - [framer-motion-scroll](https://affpapa.org/nevibecode/skills/framer-motion-scroll.md) — скилл · C-Jeril · Claude Code, Codex, Cursor +3 · 803 установки — Скилл для Framer Motion: подсказывает агенту, как делать анимации, привязанные к прокрутке, параллакс и индикаторы прогресса. - [exploring-autocapture-events](https://affpapa.org/nevibecode/skills/exploring-autocapture-events.md) — скилл · PostHog · Claude Code, Codex, Cursor +3 · 435 установок — Помогает анализировать события $autocapture из библиотеки posthog-js. - [delight](https://affpapa.org/nevibecode/skills/delight.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 523 установки — Добавляет радость и характер в интерфейс: успешные состояния, пустые экраны, загрузку, ховеры. - [mobile-design](https://affpapa.org/nevibecode/skills/manutej-mobile-design.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 545 установок — Скилл для мобильного интерфейса: тач-цели, жесты, зоны большого пальца, безопасные области и адаптив под маленькие экраны. - [showcase](https://affpapa.org/nevibecode/skills/showcase.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 521 установка — Переводит интерфейс в режим сложной визуальной и технической проработки с анимациями, View Transitions и WebGL. - [figma-design](https://affpapa.org/nevibecode/skills/figma-design.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 542 установки — Скилл по Figma: компоненты, auto layout, переменные, прототипы и разработка плагинов. - [extract](https://affpapa.org/nevibecode/skills/aladicf-extract.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 520 установок — Находит повторяющийся интерфейсный код, выносит его в дизайн-систему, формирует токены и переводит проект на единые компоненты. - [integrate-fusion-agent](https://affpapa.org/nevibecode/skills/integrate-fusion-agent.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл подключает боковую панель Atlas/EOS в приложение Flows/Fusion через @cognite/app-sdk вместо встроенного чата. - [migrate-app-to-flows](https://affpapa.org/nevibecode/skills/migrate-app-to-flows.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл автоматизирует перенос веб-приложений с устаревшей платформы Dune на инфраструктуру Flows (appsApi). - [web-audio-api](https://affpapa.org/nevibecode/skills/web-audio-api.md) — скилл · martinholovsky · Claude Code, Codex, Cursor +3 · 395 установок — Даёт агенту знание Web Audio API: синтез сигналов, визуализация частот, микрофонный вход и пространственный звук для интерфейсов. - [observability](https://affpapa.org/nevibecode/skills/observability.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 7 установок — Скилл настраивает сбор логов и метрик для приложений на Vercel. - [ai-elements](https://affpapa.org/nevibecode/skills/ai-elements.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 7 установок — Скилл подсказывает, как собирать AI-интерфейсы на React с компонентами ai-elements. - [grammar-of-graphics-and-declarative-visualization](https://affpapa.org/nevibecode/skills/grammar-of-graphics-and-declarative-visualization.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 7 установок — Скилл помогает строить визуализации табличных данных через Vega-Lite, Vega и Observable Plot. - [raycast-extension](https://affpapa.org/nevibecode/skills/raycast-extension.md) — скилл · johnlindquist · Claude Code, Codex, Cursor +3 · 321 установка — Скилл помогает собирать расширения Raycast на React и TypeScript. - [quieter](https://affpapa.org/nevibecode/skills/quieter.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 513 установок — Скилл для ИИ-кодинга, который снижает насыщенность, контраст и визуальный шум в интерфейсе, сохраняя иерархию и характер. - [tanstack-query](https://affpapa.org/nevibecode/skills/bobmatnyc-tanstack-query.md) — скилл · bobmatnyc · Claude Code, Codex, Cursor +3 · 583 установки — Учит ИИ-ассистента настраивать TanStack Query в React: работать с серверным состоянием, кешированием, пагинацией и оптимистичными обновлениями. - [onboard](https://affpapa.org/nevibecode/skills/aladicf-onboard.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 521 установка — Помогает спроектировать первый запуск продукта: что показать новичку, в каком порядке и как довести его до первого результата. - [security-ux](https://affpapa.org/nevibecode/skills/security-ux.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 519 установок — Скилл для проектирования экранов входа, MFA и восстановления доступа так, чтобы защита не пугала пользователя. - [billing-sdk](https://affpapa.org/nevibecode/skills/billing-sdk.md) — скилл · dodopayments · Claude Code, Codex, Cursor +3 · 810 установок — Помогает внедрить страницы тарифов, карточки подписок и биллинг Dodo Payments на React и shadcn/ui. - [interaction-patterns-components](https://affpapa.org/nevibecode/skills/interaction-patterns-components.md) — скилл · hueyexe · Claude Code, Codex, Cursor +3 · 539 установок — Помогает агенту выбирать и критиковать UI-паттерны и переиспользуемые компоненты: навигация, таблицы, модалки, формы, состояния. - [applicationinsights-web-ts](https://affpapa.org/nevibecode/skills/applicationinsights-web-ts.md) — скилл · Microsoft · Claude Code, GitHub Copilot · 38 установок — Помогает подключить Application Insights к браузерному приложению и собирать телеметрию: просмотры страниц, запросы и ошибки. - [framer-motion-layout](https://affpapa.org/nevibecode/skills/framer-motion-layout.md) — скилл · C-Jeril · Claude Code, Codex, Cursor +3 · 770 установок — Скилл обучает ассистента строить анимации макета во Framer Motion с помощью layout, связывать элементы через layoutId и плавно убирать блоки через AnimatePresence. - [forms-inputs-checkout](https://affpapa.org/nevibecode/skills/forms-inputs-checkout.md) — скилл · hueyexe · Claude Code, Codex, Cursor +3 · 524 установки — Скилл для проектирования и разбора форм, валидации и чекаута: помогает агенту убрать лишние поля и не сломать доступность. - [framer-motion-gestures](https://affpapa.org/nevibecode/skills/framer-motion-gestures.md) — скилл · C-Jeril · Claude Code, Codex, Cursor +3 · 766 установок — Скилл для анимаций жестов в Framer Motion: перетаскивание, панорамирование, нажатие, наведение, фокус. - [localize](https://affpapa.org/nevibecode/skills/aladicf-localize.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 497 установок — Скилл планирует и внедряет интернационализацию интерфейса: от ICU-плюрализации и логических CSS-свойств до выбора библиотек и маршрутизации локалей. - [framer-motion-variants](https://affpapa.org/nevibecode/skills/framer-motion-variants.md) — скилл · C-Jeril · Claude Code, Codex, Cursor +3 · 759 установок — Обучает ИИ настраивать оркестрованные анимации во Framer Motion: стэггеры и стейт-машины через варианты состояний. - [indicator-dashboard](https://affpapa.org/nevibecode/skills/indicator-dashboard.md) — скилл · marketcalls · Claude Code, Codex, Cursor +3 · 570 установок — Генерирует веб-дашборды для теханализа на Plotly Dash или Streamlit. - [stream-android](https://affpapa.org/nevibecode/skills/stream-android.md) — скилл · GetStream · Claude Code, Codex, Cursor +3 · 491 установка — Скилл для работы с Stream Chat, Video и Feeds в Android-проектах на Kotlin: от установки пакетов до экранов чата, звонков и ленты. - [responsive-design](https://affpapa.org/nevibecode/skills/manutej-responsive-design.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 511 установок — Направляет агента верстать интерфейсы по принципу mobile-first с флюидными сетками, CSS Grid и Flexbox. - [vuejs-development](https://affpapa.org/nevibecode/skills/vuejs-development.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 509 установок — Скилл для ИИ-агента, который подсказывает по Vue 3: реактивность, Composition API, однофайловые компоненты и директивы. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=66 ## Уточнить [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