# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 61 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=61 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [timing-mastery](https://affpapa.org/nevibecode/skills/timing-mastery.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 554 установки — Задаёт ритм и длительность движений в анимации через расчёт кадров. - [buttons-ctas](https://affpapa.org/nevibecode/skills/buttons-ctas.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 552 установки — Скилл для ИИ-кодинга, который подсказывает агенту, как анимировать кнопки и CTA: состояния, тайминги, CSS-переходы. - [figma-prototyping](https://affpapa.org/nevibecode/skills/figma-prototyping.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 550 установок — Скилл подсказывает агенту, как собрать прототип в Figma по 12 принципам анимации Диснея — через Smart Animate и варианты компонентов. - [motion-one](https://affpapa.org/nevibecode/skills/motion-one.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 544 установки — Скилл показывает, как собрать 12 принципов анимации Диснея на библиотеке Motion One — от squash and stretch до stagger и scroll. - [attention-direction](https://affpapa.org/nevibecode/skills/attention-direction.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 540 установок — Скилл помогает выстроить визуальную иерархию и направить взгляд зрителя в анимациях или интерфейсах. - [video-producer](https://affpapa.org/nevibecode/skills/video-producer.md) — скилл · daffy0208 · Claude Code, Codex, Cursor +3 · 449 установок — Помогает собрать кастомный видеоплеер, подключить HLS-стриминг и режим «картинка в картинке» прямо в проекте. - [material-3-expressive](https://affpapa.org/nevibecode/skills/material-3-expressive.md) — скилл · Albermonte · Claude Code, Codex, Cursor +3 · 502 установки — Скилл для проектирования и ревью Android-интерфейсов по Material 3 Expressive: подбирает токены компонентов, задаёт иерархию, движение, цвет и форму. - [polish](https://affpapa.org/nevibecode/skills/polish.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 637 установок — Скилл для последнего прохода по интерфейсу: выравнивание, отступы, состояния, единообразие текста. - [solid-drawing-mastery](https://affpapa.org/nevibecode/skills/solid-drawing-mastery.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 538 установок — Скилл для тех, кто делает анимацию и хочет, чтобы объекты в движении выглядели объёмными, а не плоскими. - [search](https://affpapa.org/nevibecode/skills/aladicf-search.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 626 установок — Помогает спроектировать поиск по сайту: подсказки, фильтры, выдачу результатов и выход из пустой выдачи. - [add-ui](https://affpapa.org/nevibecode/skills/add-ui.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 636 установок — Генерирует пять разных вариантов интерфейса для новой или существующей секции, а потом помогает сравнить их и внедрить выбранный. - [icons-badges](https://affpapa.org/nevibecode/skills/icons-badges.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 537 установок — Скилл для анимации иконок, бейджей, аватаров и статус-индикаторов. - [audit](https://affpapa.org/nevibecode/skills/aladicf-audit.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 625 установок — Прогоняет код по пяти направлениям: доступность, производительность, темы, адаптивность и анти-паттерны. - [gesture-responses](https://affpapa.org/nevibecode/skills/gesture-responses.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 535 установок — Скилл для анимации отклика на тап, свайп и перетаскивание: задаёт тайминги, кривые и паттерны для CSS и JS. - [fintech-banking](https://affpapa.org/nevibecode/skills/fintech-banking.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 535 установок — Задаёт правила анимации интерфейсов для банковских приложений, платежей и дашбордов. - [gaming-entertainment](https://affpapa.org/nevibecode/skills/gaming-entertainment.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 535 установок — Скилл для анимаций в игровых приложениях, стриминговых сервисах и интерактивных медиа: раскладывает 12 принципов Disney по элементам интерфейса. - [accessibility-advocate](https://affpapa.org/nevibecode/skills/accessibility-advocate.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 533 установки — Скилл помогает настраивать анимации интерфейса с учётом вестибулярных нарушений и требований WCAG. - [saleor-storefront](https://affpapa.org/nevibecode/skills/saleor-storefront.md) — скилл · saleor · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл даёт правила и паттерны для разработки витрин интернет-магазинов на базе Saleor GraphQL API. - [frontend-ui-ux-design](https://affpapa.org/nevibecode/skills/frontend-ui-ux-design.md) — скилл · DauQuangThanh · Claude Code, Codex, Cursor +3 · 536 установок — Скилл организует процесс проектирования интерфейсов: от сбора требований и вайрфреймов до проверки доступности по WCAG и спецификаций компонентов для фронтенда. - [metabase-modular-embedding-version-upgrade](https://affpapa.org/nevibecode/skills/metabase-modular-embedding-version-upgrade.md) — скилл · metabase · Claude Code, Codex, Cursor +3 · 367 установок — Скилл проводит миграцию проекта на новую версию Metabase Modular embedding SDK или embed.js: сканирует код, сверяет типы и правит файлы. - [modals-dialogs](https://affpapa.org/nevibecode/skills/modals-dialogs.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 528 установок — Набор правил анимации диалоговых окон, модалок и поповеров по 12 принципам анимации Диснея. - [entrance-animations](https://affpapa.org/nevibecode/skills/entrance-animations.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 527 установок — Скилл задаёт правила появления интерфейсных элементов: диалоговых окон, карточек, тултипов и списков. - [excitement-energy](https://affpapa.org/nevibecode/skills/excitement-energy.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 526 установок — Скилл задаёт правила и тайминги для динамичных интерфейсных анимаций. - [arc-mastery](https://affpapa.org/nevibecode/skills/arc-mastery.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 525 установок — Скилл для анимации движения: объясняет, почему прямые линии выглядят механически, и как строить дуги в UI, персонажах и играх. - [code-quality](https://affpapa.org/nevibecode/skills/code-quality.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 2000 установок — Скилл проводит ревью TypeScript- и React-кода, опираясь на линтер, строгую типизацию и проверку размеров компонентов. - [metabase-embedding-sso-implementation](https://affpapa.org/nevibecode/skills/metabase-embedding-sso-implementation.md) — скилл · metabase · Claude Code, Codex, Cursor +3 · 363 установки — Скилл проводит агента по шагам внедрения JWT SSO в вашу встройку Metabase: эндпоинт подписи токена, фронтенд-авторизация, маппинг групп. - [joy-delight](https://affpapa.org/nevibecode/skills/joy-delight.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 522 установки — Скилл задаёт правила и тайминги для радостных UI-анимаций по принципам Disney. - [design-systems-frontend-architecture](https://affpapa.org/nevibecode/skills/design-systems-frontend-architecture.md) — скилл · hueyexe · Claude Code, Codex, Cursor +3 · 635 установок — Помогает агенту превратить решения по UI и бренду в переиспользуемые компоненты, токены и правила вёрстки. - [metabase-react-sdk-setup](https://affpapa.org/nevibecode/skills/metabase-react-sdk-setup.md) — скилл · metabase · Claude Code, Codex, Cursor +3 · 362 установки — Скилл проводит агента через первичную настройку Metabase React SDK: определение инстанса, API-ключ, поиск дашбордов, JWT-аутентификация и установка пакета. - [animate](https://affpapa.org/nevibecode/skills/aladicf-animate.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 607 установок — Добавляет в интерфейс движение: переходы, микроинтеракции, жесты и состояния наведения. - [micro-100-200ms](https://affpapa.org/nevibecode/skills/micro-100-200ms.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 521 установка — Скилл для микроанимаций длительностью 100–200 мс: подсказки, выпадающие меню, мелкая обратная связь. - [calm-relaxation](https://affpapa.org/nevibecode/skills/calm-relaxation.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 521 установка — Скилл для ИИ-кодинга, который задаёт правила плавных и тихих анимаций: длинные тайминги, мягкие кривые, никаких резких движений. - [squash-stretch-mastery](https://affpapa.org/nevibecode/skills/squash-stretch-mastery.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 522 установки — Обучает агента принципу сжатия и растяжения: настраивает отклик интерфейсов и прыжков с сохранением объёма объекта. - [staging-mastery](https://affpapa.org/nevibecode/skills/staging-mastery.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 520 установок — Свод правил по сценической расстановке в анимации и интерфейсах. - [slow-in-out-mastery](https://affpapa.org/nevibecode/skills/slow-in-out-mastery.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 520 установок — Скилл для ИИ-агента, который подсказывает, какую кривую ускорения и замедления выбрать в анимации интерфейса или персонажа. - [brand-consistency](https://affpapa.org/nevibecode/skills/brand-consistency.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 520 установок — Скилл разбирает анимацию, которая выбивается из стиля бренда, и подсказывает, что поправить: тайминги, кривые, уровень выразительности. - [setup](https://affpapa.org/nevibecode/skills/aladicf-setup.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 605 установок — Собирает дизайн-контекст проекта, исследуя код и опрашивая разработчика, затем сохраняет UX-цели и стек в файл .better-web-ui.md. - [websocket-realtime-builder](https://affpapa.org/nevibecode/skills/websocket-realtime-builder.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 529 установок — Помогает настроить обмен данными через WebSockets и Socket.io. - [attention-grabbers](https://affpapa.org/nevibecode/skills/attention-grabbers.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 519 установок — Скилл для ИИ-агента, который подсказывает, как делать пульсации бейджей, тряску ошибок и подсветку новых функций по принципам Disney. - [appeal-mastery](https://affpapa.org/nevibecode/skills/appeal-mastery.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 519 установок — Скилл про appeal — качество, из-за которого на анимацию хочется смотреть. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=62 ## Уточнить [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