# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 62 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=62 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [anticipation-payoff](https://affpapa.org/nevibecode/skills/anticipation-payoff.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 519 установок — Скилл учит ИИ-агента выстраивать фазы подготовки и отдачи в анимации. - [encore-frontend](https://affpapa.org/nevibecode/skills/encore-frontend.md) — скилл · encoredev · Claude Code, Codex, Cursor +3 · 763 установки — Скилл связывает фронтенд на React, Next.js, Vue или Svelte с бэкендом Encore.ts: генерация типизированного клиента, CORS и токены авторизации. - [ui-ux-pro-max](https://affpapa.org/nevibecode/skills/pixel-process-ug-ui-ux-pro-max.md) — скилл · Pixel-Process-UG · Claude Code, Codex, Cursor +3 · 1200 установок — Подбирает стили, шрифтовые пары, семантические палитры и правила вёрстки интерфейса с приоритетом доступности и скорости загрузки. - [performance-optimization](https://affpapa.org/nevibecode/skills/dylantarre-performance-optimization.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 516 установок — Помогает находить и устранять просадки FPS и рывки в анимациях интерфейса по принципам Диснея. - [react-spring](https://affpapa.org/nevibecode/skills/react-spring.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 516 установок — Скилл показывает, как собрать все 12 принципов анимации Disney на физике пружин React Spring — с готовыми примерами под каждый принцип. - [anticipation-mastery](https://affpapa.org/nevibecode/skills/anticipation-mastery.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 516 установок — Скилл объясняет принцип anticipation и подсказывает агенту, где добавить подготовительное движение, чтобы анимация не выглядела резкой. - [sap-fiori-add-visual-filter](https://affpapa.org/nevibecode/skills/sap-fiori-add-visual-filter.md) — скилл · sap-fiori-tools · Claude Code, Codex, Cursor +3 · 680 установок — Скилл добавляет в SAP Fiori Elements визуальные фильтры с диаграммами Bar или Line. - [enterprise-b2b](https://affpapa.org/nevibecode/skills/enterprise-b2b.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 515 установок — Скилл задаёт правила анимации для B2B-интерфейсов и панелей управления. - [follow-through-overlapping](https://affpapa.org/nevibecode/skills/follow-through-overlapping.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 514 установок — Скилл учит агента принципам инерции и смещения фаз в анимации. - [expo-liquid-glass](https://affpapa.org/nevibecode/skills/expo-liquid-glass.md) — скилл · devanshuDesai · Claude Code, Codex, Cursor +3 · 478 установок — Помогает собрать стеклянные интерфейсы в Expo React Native: четыре пути реализации, проверки доступности и откат на Android. - [cards-containers](https://affpapa.org/nevibecode/skills/cards-containers.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 513 установок — Набор правил анимации карточек, плиток и контейнеров по 12 принципам Диснея. - [hierarchy](https://affpapa.org/nevibecode/skills/hierarchy.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 606 установок — Скилл разбирает интерфейс по визуальной иерархии: где главное действие теряется, что спорит за внимание и какие подписи мешают читать. - [metabase-static-embedding-to-guest-embedding-upgrade](https://affpapa.org/nevibecode/skills/metabase-static-embedding-to-guest-embedding-upgrade.md) — скилл · metabase · Claude Code, Codex, Cursor +3 · 355 установок — Переводит проект с подписанных iframe Metabase на guest embeds через веб-компоненты и embed.js. - [metabase-full-app-to-modular-embedding-upgrade](https://affpapa.org/nevibecode/skills/metabase-full-app-to-modular-embedding-upgrade.md) — скилл · metabase · Claude Code, Codex, Cursor +3 · 355 установок — Переводит проект с интерактивного iframe-встраивания Metabase на веб-компоненты модульного встраивания. - [contentful-nextjs](https://affpapa.org/nevibecode/skills/contentful-nextjs.md) — скилл · contentful · Claude Code, Codex, Cursor +3 · 333 установки — Подключает Contentful к существующему проекту Next.js: SDK, переменные окружения, клиенты для продакшена и превью, Draft Mode. - [universal-emotion](https://affpapa.org/nevibecode/skills/universal-emotion.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 511 установок — Скилл переводит заданную эмоцию в параметры анимации: тайминги, изинг, деформацию. - [designing-frontend-interfaces](https://affpapa.org/nevibecode/skills/designing-frontend-interfaces.md) — скилл · osmontero · Claude Code, Codex, Cursor +3 · 642 установки — Скилл заставляет агента сначала написать дизайн-бриф и зафиксировать токены, а уже потом писать компоненты. - [nextjs](https://affpapa.org/nevibecode/skills/pymodel-nextjs.md) — скилл · PyModel · Claude Code, Codex, Cursor +3 · 479 установок — Скилл с 42 правилами по кэшированию, маршрутизации и серверным компонентам Next.js 16 App Router. - [timing-principle-mastery](https://affpapa.org/nevibecode/skills/timing-principle-mastery.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 510 установок — Скилл обучает ассистента подбирать точную длительность и ритм анимаций в интерфейсах или играх. - [forms-inputs](https://affpapa.org/nevibecode/skills/forms-inputs.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 509 установок — Скилл учит агента анимировать поля ввода, текстовые области и селекты: подсказки по таймингам, состояниям и CSS-переходам для понятной обратной связи. - [loaders-spinners](https://affpapa.org/nevibecode/skills/loaders-spinners.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 508 установок — Помогает проектировать спиннеры, индикаторы загрузки и скелетоны по 12 принципам анимации Диснея. - [orchestrated-sequences](https://affpapa.org/nevibecode/skills/orchestrated-sequences.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 508 установок — Скилл для сборки многочастных анимаций: подсказывает, как расставить задержки, кривые и роли элементов, чтобы появление выглядело одним движением. - [promo-video](https://affpapa.org/nevibecode/skills/iart-ai-promo-video.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 693 установки — Скилл настраивает сборку промо-видео на Remotion: анимирует зачёркивание старой цены, таймер и промокод. - [attention-management](https://affpapa.org/nevibecode/skills/attention-management.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 507 установок — Скилл для настройки визуальной иерархии в интерфейсе через анимацию по принципам Диснея. - [social-media](https://affpapa.org/nevibecode/skills/social-media.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 507 установок — Скилл для анимаций в соцсетях, мессенджерах и фичах сообществ: подсказывает тайминги и поведение интерфейса. - [metabase-modular-embedding-to-modular-embedding-sdk-upgrade](https://affpapa.org/nevibecode/skills/metabase-modular-embedding-to-modular-embedding-sdk-upgrade.md) — скилл · metabase · Claude Code, Codex, Cursor +3 · 351 установка — Переносит React-проект с Metabase embed.js на @metabase/embedding-sdk-react. - [Animation Principles - Universal Reference](https://affpapa.org/nevibecode/skills/animation-principles-universal-reference.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 505 установок — Справочник по 12 классическим принципам анимации Диснея с разбором для новичков и опытных специалистов. - [exaggeration-mastery](https://affpapa.org/nevibecode/skills/exaggeration-mastery.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 505 установок — Скилл помогает решить, насколько вывести движение за пределы реализма, чтобы ключевые моменты читались на экране. - [brand-strategist](https://affpapa.org/nevibecode/skills/dylantarre-brand-strategist.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 505 установок — Помогает описать характер бренда через движение: тайминги, кривые, степень растяжения. - [feature-arch](https://affpapa.org/nevibecode/skills/feature-arch.md) — скилл · PyModel · Claude Code, Codex, Cursor +3 · 473 установки — Скилл задаёт правила папок и границ модулей в React-проекте: 42 правила по 8 категориям, от структуры каталогов до имён файлов. - [design-studio](https://affpapa.org/nevibecode/skills/design-studio.md) — скилл · George-RD · Claude Code, Codex, Cursor +3 · 501 установка — Скилл для проектирования интерфейсов, аудита визуала и вёрстки документов с разделением ролей между агентами и оценкой по скриншотам. - [exit-animations](https://affpapa.org/nevibecode/skills/exit-animations.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 502 установки — Скилл подсказывает агенту, как анимировать исчезновение элементов: закрытие модалок, скрытие уведомлений, удаление строк списка. - [accordions-dropdowns](https://affpapa.org/nevibecode/skills/accordions-dropdowns.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 502 установки — Скилл учит ассистента анимировать аккордеоны и выпадающие списки по 12 принципам анимации Диснея. - [Animation Principles - Quick Start](https://affpapa.org/nevibecode/skills/animation-principles-quick-start.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 502 установки — Краткая шпаргалка по 12 принципам классической анимации Disney. - [verification](https://affpapa.org/nevibecode/skills/verification.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 8 установок — Проверяет сквозной сценарий приложения от интерфейса до базы данных при запуске dev-сервера или сбоях в работе фичи. - [auth](https://affpapa.org/nevibecode/skills/auth.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 8 установок — Помогает подключить Clerk, Descope или Auth0 к Next.js и настроить вход, регистрацию и защиту маршрутов. - [timing-calibration](https://affpapa.org/nevibecode/skills/timing-calibration.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 499 установок — Скилл разбирает жалобы «слишком быстро» и «слишком медленно» и подбирает длительности и easing по типу действия. - [urgency-action](https://affpapa.org/nevibecode/skills/urgency-action.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 499 установок — Задаёт правила анимации интерфейса для привлечения внимания и быстрой реакции. - [user-feedback-clarity](https://affpapa.org/nevibecode/skills/user-feedback-clarity.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 498 установок — Скилл для ИИ-агента, который разбирает, почему пользователи не замечают отклик интерфейса, и подсказывает, как это исправить. - [lists-grids](https://affpapa.org/nevibecode/skills/lists-grids.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 498 установок — Помогает настроить анимацию списков, таблиц и сеток по 12 принципам диснеевской мультипликации. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=63 ## Уточнить [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