NeVibeCode · 2 909 карточек
Скиллы по теме «Фронтенд и UI»
Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов.
use-topbar скилл Скилл ставит в приложение Flows/Fusion единый топбар из @aura/topbar: хлебные крошки, переключатель темы, кнопка Atlas.
CX Codex +1
1 900установок
create-client-tool скилл Скилл создаёт клиентский инструмент AtlasTool для чата useAtlasChat в веб-приложении. Он описывает схему TypeBox, настраивает вызов логики в браузере и подключает инструмент к чату.
CX Codex +1
1 900установок
graph-viewer скилл Скилл помогает встроить интерактивный граф модели данных CDF в приложение на Flows: узлы, связи и обратные связи.
CX Codex +1
1 900установок
setup-flows-auth скилл Настраивает авторизацию React-приложений в Cognite Flows и Fusion iframe. Скилл определяет тип интеграции, ставит нужные SDK и правит конфигурацию Vite.
CX Codex +1
1 900установок
setup-python-tools скилл Ставит клиентское выполнение Python-инструментов через Pyodide в приложение с уже готовым useAtlasChat. Нужен, когда агент отдаёт код инструмента, а считать он должен в браузере.
CX Codex +1
1 900установок
integrate-file-viewer скилл Пошагово внедряет компонент CogniteFileViewer в приложения Flows для предварительного просмотра файлов CDF, отчётов и изображений.
CX Codex +1
1 900установок
security скилл Проходит по приложению Flows шаг за шагом: находит утечки секретов, опасный DOM, дыры в авторизации — и сразу правит их.
CX Codex +1
1 900установок
integrate-atlas-chat скилл Скилл для встраивания чата Atlas прямо в интерфейс приложения Cognite. Нужен, когда сайдбар Fusion/EOS недоступен.
CX Codex +1
1 900установок
correctness-and-error-handling скилл Скилл находит и устраняет сбои в React-коде Cognite Flows: монтирует Error Boundary, обрабатывает промисы и закрывает пустые состояния интерфейса.
CX Codex +1
1 900установок
integrate-todo-list скилл Добавляет в приложение инструмент TodoWrite и панель, где видно, как агент Atlas выполняет многошаговую работу.
CX Codex +1
1 900установок
reveal-3d скилл Встраивает интерактивный 3D-вьюер Cognite Reveal в приложение Flows: CAD-модели, облака точек, панорамы 360° и сцены CDF.
CX Codex +1
1 900установок
design скилл Скилл настраивает работу с дизайн-системой Aura в приложениях Flows и Fusion. Помогает выбирать готовые примитивы, расставлять токены вместо сырых значений и собирать интерфейсы.
CX Codex +1
1 900установок
power-confidence скилл Скилл задаёт правила анимаций, которые читаются как сила и власть: тяжёлое движение, резкая остановка, минимум отскока. Пригодится на hero-секциях и витринах премиум-продуктов.
CX Codex +1
497установок
continuous-loops скилл Скилл учит агента создавать зацикленные CSS-анимации по принципам классической мультипликации. Пригодится для лоадеров, пульсаций, шиммеров и фоновых эффектов.
CX Codex +1
497установок
universal-patterns скилл Задаёт базовые длительности, кривые изинга и 12 принципов анимации для любого движения в интерфейсе. Пригодится, когда агент пишет CSS-переходы и не угадывает с таймингом.
CX Codex +1
496установок
secondary-action-mastery скилл Скилл учит добавлять вторичное движение так, чтобы оно поддерживало главное действие, а не спорило с ним. Пригодится в UI-анимации и игровом филе.
CX Codex +1
496установок
mobile-developer скилл Скилл для разработки кроссплатформенных приложений на React Native и Expo. Помогает настроить навигацию, экраны, нативные функции и сборку под iOS и Android.
CX Codex +1
412установок
feedback-indicators скилл Скилл для анимаций обратной связи: галочки успеха, тряска ошибок, валидация полей и тосты. Пригодится, когда интерфейс должен внятно отвечать на действие пользователя.
CX Codex +1
495установок
straight-ahead-pose-mastery скилл Помогает выбрать между покадровой спонтанной анимацией и расчётом ключевых поз, а также выстроить гибридный пайплайн для интерфейсов, визуальных эффектов или игр.
CX Codex +1
495установок
cypress скилл Скилл для написания E2E- и компонентных тестов на Cypress: устойчивые селекторы, ожидания без фиксированных пауз, перехват сети.
CX Codex +1
653установок
rspeedy-bundle-size скилл Скилл разбирает, из чего складывается вес .lynx.bundle в rspeedy/ReactLynx, и подсказывает, за какой рычаг тянуть первым.
CX Codex +1
458установок
emotional-disconnect скилл Разбирает, почему анимация в интерфейсе ощущается неправильно, и подбирает движение под нужную эмоцию. Пригодится, когда UI называют холодным или раздражающим.
CX Codex +1
491установок
state-changes скилл Скилл для анимации элементов, которые меняются на месте: переключатели, аккордеоны, чекбоксы, состояния кнопок. Пригодится, когда интерфейсу нужны плавные переходы без входа и выхода.
CX Codex +1
491установок
responsive-adaptive скилл Скилл настраивает адаптивную длительность анимаций в зависимости от размера экрана, расстояния перемещения и настройки prefers-reduced-motion.
CX Codex +1
491установок
customware-support-widget скилл Ставит виджет поддержки Customware в клиентский React Router SPA: скрипт в root.tsx, элемент <customware-chat> в нужном маршруте или лейауте.
CX Codex +1
2 400установок
wix-headless скилл Подключает сервисы Wix к headless-фронтенду: определяет нужные возможности, ставит приложения, наполняет бэкенд и выдаёт гайд по SDK.
CX Codex +1
338установок
animation-micro-interaction-pack скилл Набор готовых паттернов движения для интерфейса: ховеры, входы и выходы элементов, отклик на жесты. Пригодится, когда UI выглядит статично и хочется оживить его без ручного подбора таймингов.
CX Codex +1
499установок
professionalism-credibility скилл Задаёт правила сдержанной анимации интерфейса для B2B-продуктов, банков и госсервисов. Помогает настроить переходы, которые экономят время пользователя.
CX Codex +1
490установок
Animation Principles - Absolute Beginner скилл Объясняет 12 принципов анимации самыми простыми словами. Пригодится, если вы впервые берётесь за движение в интерфейсе или игре.
CX Codex +1
489установок
technical-constraints скилл Скилл для случаев, когда анимация упирается в поддержку браузеров, возможности платформы или технические требования. Помогает сохранить замысел, не ломая сборку.
CX Codex +1
489установок
popmotion скилл Скилл учит агента применять 12 принципов анимации Диснея с помощью библиотеки Popmotion. Пригодится для настройки плавной физики интерфейсов и ключевых кадров.
CX Codex +1
489установок
comfort-safety скилл Скилл для ИИ-кодинга, который задаёт правила анимаций в интерфейсах, где пользователю важно чувствовать себя в безопасности.
CX Codex +1
489установок
implementation-debugging скилл Скилл помогает находить и устранять ошибки в веб-анимациях. Он пригодится, если элементы дёргаются, не запускаются повторно или ломаются при переносе в продакшен.
CX Codex +1
489установок
ui-designer скилл Скилл для сборки фронтенда с осознанным визуальным направлением: типографика, цвет, движение и композиция вместо дефолтных решений.
CX Codex +1
3 600установок
shadcn скилл Скилл с набором правил для работы с shadcn/ui: архитектура компонентов, доступность, темы, формы и таблицы. Пригодится, когда агент пишет или правит UI на React.
CX Codex +1
458установок
arrange скилл Скилл разбирает слабую пространственную композицию интерфейса: произвольные отступы, слипшиеся блоки, однообразные сетки карточек.
CX Codex +1
577установок
universal-industry скилл Скилл с базовыми настройками анимации по 12 принципам Disney: тайминги, easing и правила для интерфейсов, когда отраслевых гайдлайнов нет.
CX Codex +1
487установок
friendliness-approachability скилл Задаёт правила тёплой и ненавязчивой UI-анимации. Пригодится при вёрстке приветственных экранов, онбординга или диалоговых окон.
CX Codex +1
487установок
medium-300-500ms скилл Скилл для ИИ-агента, который помогает писать анимации средней длительности: переходы страниц, модалки, появление элементов.
CX Codex +1
487установок
large-500-800ms скилл Скилл для ИИ-агента, который подсказывает, как строить длинные анимации на 500–800 мс: переходы hero-блоков, сложные раскрытия, сцены, которые должны запомниться.
CX Codex +1
487установок
2 481–2 520 из 2 909
