NeVibeCode · 2 909 карточек
Скиллы по теме «Фронтенд и UI»
Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов.
timing-mastery скилл Задаёт ритм и длительность движений в анимации через расчёт кадров. Помогает настроить темп жестов, пауз и акцентов.
CX Codex +1
554установок
buttons-ctas скилл Скилл для ИИ-кодинга, который подсказывает агенту, как анимировать кнопки и CTA: состояния, тайминги, CSS-переходы.
CX Codex +1
552установок
figma-prototyping скилл Скилл подсказывает агенту, как собрать прототип в Figma по 12 принципам анимации Диснея — через Smart Animate и варианты компонентов.
CX Codex +1
550установок
motion-one скилл Скилл показывает, как собрать 12 принципов анимации Диснея на библиотеке Motion One — от squash and stretch до stagger и scroll.
CX Codex +1
544установок
attention-direction скилл Скилл помогает выстроить визуальную иерархию и направить взгляд зрителя в анимациях или интерфейсах. Пригодится при раскадровке и устранении визуального шума.
CX Codex +1
540установок
video-producer скилл Помогает собрать кастомный видеоплеер, подключить HLS-стриминг и режим «картинка в картинке» прямо в проекте.
CX Codex +1
449установок
material-3-expressive скилл Скилл для проектирования и ревью Android-интерфейсов по Material 3 Expressive: подбирает токены компонентов, задаёт иерархию, движение, цвет и форму.
CX Codex +1
502установок
polish скилл Скилл для последнего прохода по интерфейсу: выравнивание, отступы, состояния, единообразие текста. Запускают, когда всё уже работает и нужны финальные штрихи.
CX Codex +1
637установок
solid-drawing-mastery скилл Скилл для тех, кто делает анимацию и хочет, чтобы объекты в движении выглядели объёмными, а не плоскими. Помогает ловить ошибки перспективы и веса.
CX Codex +1
538установок
search скилл Помогает спроектировать поиск по сайту: подсказки, фильтры, выдачу результатов и выход из пустой выдачи.
CX Codex +1
626установок
add-ui скилл Генерирует пять разных вариантов интерфейса для новой или существующей секции, а потом помогает сравнить их и внедрить выбранный.
CX Codex +1
636установок
icons-badges скилл Скилл для анимации иконок, бейджей, аватаров и статус-индикаторов. Пригодится, когда мелкие элементы интерфейса должны давать отклик и характер.
CX Codex +1
537установок
audit скилл Прогоняет код по пяти направлениям: доступность, производительность, темы, адаптивность и анти-паттерны. Выдаёт отчёт со скорингом и планом правок.
CX Codex +1
625установок
gesture-responses скилл Скилл для анимации отклика на тап, свайп и перетаскивание: задаёт тайминги, кривые и паттерны для CSS и JS.
CX Codex +1
535установок
fintech-banking скилл Задаёт правила анимации интерфейсов для банковских приложений, платежей и дашбордов. Помогает настроить переходы так, чтобы интерфейс вызывал доверие к безопасности денег.
CX Codex +1
535установок
gaming-entertainment скилл Скилл для анимаций в игровых приложениях, стриминговых сервисах и интерактивных медиа: раскладывает 12 принципов Disney по элементам интерфейса.
CX Codex +1
535установок
accessibility-advocate скилл Скилл помогает настраивать анимации интерфейса с учётом вестибулярных нарушений и требований WCAG. Пригодится при вёрстке компонентов и подготовке стилей для prefers-reduced-motion.
CX Codex +1
533установок
saleor-storefront скилл Скилл даёт правила и паттерны для разработки витрин интернет-магазинов на базе Saleor GraphQL API. Помогает настраивать корзину, атрибуты товаров и многоканальные продажи.
CX Codex +1
2 300установок
frontend-ui-ux-design скилл Скилл организует процесс проектирования интерфейсов: от сбора требований и вайрфреймов до проверки доступности по WCAG и спецификаций компонентов для фронтенда.
CX Codex +1
536установок
metabase-modular-embedding-version-upgrade скилл Скилл проводит миграцию проекта на новую версию Metabase Modular embedding SDK или embed.js: сканирует код, сверяет типы и правит файлы.
CX Codex +1
367установок
modals-dialogs скилл Набор правил анимации диалоговых окон, модалок и поповеров по 12 принципам анимации Диснея. Помогает настроить плавное появление и закрытие оверлеев.
CX Codex +1
528установок
entrance-animations скилл Скилл задаёт правила появления интерфейсных элементов: диалоговых окон, карточек, тултипов и списков. Он переносит принципы анимации Диснея в CSS с точным таймингом.
CX Codex +1
527установок
excitement-energy скилл Скилл задаёт правила и тайминги для динамичных интерфейсных анимаций. Пригодится при вёрстке промо-страниц, геймификации, стриминговых и спортивных приложений.
CX Codex +1
526установок
arc-mastery скилл Скилл для анимации движения: объясняет, почему прямые линии выглядят механически, и как строить дуги в UI, персонажах и играх.
CX Codex +1
525установок
code-quality скилл Скилл проводит ревью TypeScript- и React-кода, опираясь на линтер, строгую типизацию и проверку размеров компонентов. Пригодится перед созданием PR или после завершения фичи.
CX Codex +1
2 000установок
metabase-embedding-sso-implementation скилл Скилл проводит агента по шагам внедрения JWT SSO в вашу встройку Metabase: эндпоинт подписи токена, фронтенд-авторизация, маппинг групп.
CX Codex +1
363установок
joy-delight скилл Скилл задаёт правила и тайминги для радостных UI-анимаций по принципам Disney. Помогает анимировать награды, конфетти и экраны успеха.
CX Codex +1
522установок
design-systems-frontend-architecture скилл Помогает агенту превратить решения по UI и бренду в переиспользуемые компоненты, токены и правила вёрстки.
CX Codex +1
635установок
metabase-react-sdk-setup скилл Скилл проводит агента через первичную настройку Metabase React SDK: определение инстанса, API-ключ, поиск дашбордов, JWT-аутентификация и установка пакета.
CX Codex +1
362установок
animate скилл Добавляет в интерфейс движение: переходы, микроинтеракции, жесты и состояния наведения. Пригодится, когда UI кажется мёртвым или дёргается при частом использовании.
CX Codex +1
607установок
micro-100-200ms скилл Скилл для микроанимаций длительностью 100–200 мс: подсказки, выпадающие меню, мелкая обратная связь. Помогает подобрать тайминг и кривые.
CX Codex +1
521установок
calm-relaxation скилл Скилл для ИИ-кодинга, который задаёт правила плавных и тихих анимаций: длинные тайминги, мягкие кривые, никаких резких движений.
CX Codex +1
521установок
squash-stretch-mastery скилл Обучает агента принципу сжатия и растяжения: настраивает отклик интерфейсов и прыжков с сохранением объёма объекта.
CX Codex +1
522установок
staging-mastery скилл Свод правил по сценической расстановке в анимации и интерфейсах. Помогает сфокусировать внимание пользователя на одном главном действии за раз.
CX Codex +1
520установок
slow-in-out-mastery скилл Скилл для ИИ-агента, который подсказывает, какую кривую ускорения и замедления выбрать в анимации интерфейса или персонажа.
CX Codex +1
520установок
brand-consistency скилл Скилл разбирает анимацию, которая выбивается из стиля бренда, и подсказывает, что поправить: тайминги, кривые, уровень выразительности.
CX Codex +1
520установок
setup скилл Собирает дизайн-контекст проекта, исследуя код и опрашивая разработчика, затем сохраняет UX-цели и стек в файл .better-web-ui.md.
CX Codex +1
605установок
websocket-realtime-builder скилл Помогает настроить обмен данными через WebSockets и Socket.io. Пригодится при сборке чатов и системных уведомлений.
CX Codex +1
529установок
attention-grabbers скилл Скилл для ИИ-агента, который подсказывает, как делать пульсации бейджей, тряску ошибок и подсветку новых функций по принципам Disney.
CX Codex +1
519установок
appeal-mastery скилл Скилл про appeal — качество, из-за которого на анимацию хочется смотреть. Помогает проектировать персонажей, микро-взаимодействия и переходы так, чтобы они читались и запоминались.
CX Codex +1
519установок
2 401–2 440 из 2 909
