# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 63 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=63 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [use-topbar](https://affpapa.org/nevibecode/skills/use-topbar.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1900 установок — Скилл ставит в приложение Flows/Fusion единый топбар из @aura/topbar: хлебные крошки, переключатель темы, кнопка Atlas. - [create-client-tool](https://affpapa.org/nevibecode/skills/create-client-tool.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1900 установок — Скилл создаёт клиентский инструмент AtlasTool для чата useAtlasChat в веб-приложении. - [graph-viewer](https://affpapa.org/nevibecode/skills/graph-viewer.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1900 установок — Скилл помогает встроить интерактивный граф модели данных CDF в приложение на Flows: узлы, связи и обратные связи. - [setup-flows-auth](https://affpapa.org/nevibecode/skills/setup-flows-auth.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1900 установок — Настраивает авторизацию React-приложений в Cognite Flows и Fusion iframe. - [setup-python-tools](https://affpapa.org/nevibecode/skills/setup-python-tools.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1900 установок — Ставит клиентское выполнение Python-инструментов через Pyodide в приложение с уже готовым useAtlasChat. - [integrate-file-viewer](https://affpapa.org/nevibecode/skills/integrate-file-viewer.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1900 установок — Пошагово внедряет компонент CogniteFileViewer в приложения Flows для предварительного просмотра файлов CDF, отчётов и изображений. - [security](https://affpapa.org/nevibecode/skills/security.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1900 установок — Проходит по приложению Flows шаг за шагом: находит утечки секретов, опасный DOM, дыры в авторизации — и сразу правит их. - [integrate-atlas-chat](https://affpapa.org/nevibecode/skills/integrate-atlas-chat.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1900 установок — Скилл для встраивания чата Atlas прямо в интерфейс приложения Cognite. - [correctness-and-error-handling](https://affpapa.org/nevibecode/skills/correctness-and-error-handling.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1900 установок — Скилл находит и устраняет сбои в React-коде Cognite Flows: монтирует Error Boundary, обрабатывает промисы и закрывает пустые состояния интерфейса. - [integrate-todo-list](https://affpapa.org/nevibecode/skills/integrate-todo-list.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1900 установок — Добавляет в приложение инструмент TodoWrite и панель, где видно, как агент Atlas выполняет многошаговую работу. - [reveal-3d](https://affpapa.org/nevibecode/skills/reveal-3d.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1900 установок — Встраивает интерактивный 3D-вьюер Cognite Reveal в приложение Flows: CAD-модели, облака точек, панорамы 360° и сцены CDF. - [design](https://affpapa.org/nevibecode/skills/cognitedata-design.md) — скилл · cognitedata · Claude Code, Codex, Cursor +3 · 1900 установок — Скилл настраивает работу с дизайн-системой Aura в приложениях Flows и Fusion. - [power-confidence](https://affpapa.org/nevibecode/skills/power-confidence.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 497 установок — Скилл задаёт правила анимаций, которые читаются как сила и власть: тяжёлое движение, резкая остановка, минимум отскока. - [continuous-loops](https://affpapa.org/nevibecode/skills/continuous-loops.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 497 установок — Скилл учит агента создавать зацикленные CSS-анимации по принципам классической мультипликации. - [universal-patterns](https://affpapa.org/nevibecode/skills/universal-patterns.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 496 установок — Задаёт базовые длительности, кривые изинга и 12 принципов анимации для любого движения в интерфейсе. - [secondary-action-mastery](https://affpapa.org/nevibecode/skills/secondary-action-mastery.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 496 установок — Скилл учит добавлять вторичное движение так, чтобы оно поддерживало главное действие, а не спорило с ним. - [mobile-developer](https://affpapa.org/nevibecode/skills/mobile-developer.md) — скилл · daffy0208 · Claude Code, Codex, Cursor +3 · 412 установок — Скилл для разработки кроссплатформенных приложений на React Native и Expo. - [feedback-indicators](https://affpapa.org/nevibecode/skills/feedback-indicators.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 495 установок — Скилл для анимаций обратной связи: галочки успеха, тряска ошибок, валидация полей и тосты. - [straight-ahead-pose-mastery](https://affpapa.org/nevibecode/skills/straight-ahead-pose-mastery.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 495 установок — Помогает выбрать между покадровой спонтанной анимацией и расчётом ключевых поз, а также выстроить гибридный пайплайн для интерфейсов, визуальных эффектов или игр. - [cypress](https://affpapa.org/nevibecode/skills/claude-mpm-team-cypress.md) — скилл · Claude MPM Team · Claude Code, Codex, Cursor +3 · 653 установки — Скилл для написания E2E- и компонентных тестов на Cypress: устойчивые селекторы, ожидания без фиксированных пауз, перехват сети. - [rspeedy-bundle-size](https://affpapa.org/nevibecode/skills/rspeedy-bundle-size.md) — скилл · lynx-community · Claude Code, Codex, Cursor +3 · 458 установок — Скилл разбирает, из чего складывается вес .lynx.bundle в rspeedy/ReactLynx, и подсказывает, за какой рычаг тянуть первым. - [emotional-disconnect](https://affpapa.org/nevibecode/skills/emotional-disconnect.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 491 установка — Разбирает, почему анимация в интерфейсе ощущается неправильно, и подбирает движение под нужную эмоцию. - [state-changes](https://affpapa.org/nevibecode/skills/state-changes.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 491 установка — Скилл для анимации элементов, которые меняются на месте: переключатели, аккордеоны, чекбоксы, состояния кнопок. - [responsive-adaptive](https://affpapa.org/nevibecode/skills/responsive-adaptive.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 491 установка — Скилл настраивает адаптивную длительность анимаций в зависимости от размера экрана, расстояния перемещения и настройки prefers-reduced-motion. - [customware-support-widget](https://affpapa.org/nevibecode/skills/customware-support-widget.md) — скилл · customware-ai · Claude Code, Codex, Cursor +3 · 2400 установок — Ставит виджет поддержки Customware в клиентский React Router SPA: скрипт в root.tsx, элемент в нужном маршруте или лейауте. - [wix-headless](https://affpapa.org/nevibecode/skills/wix-headless.md) — скилл · wix · Claude Code, Codex, Cursor +3 · 338 установок — Подключает сервисы Wix к headless-фронтенду: определяет нужные возможности, ставит приложения, наполняет бэкенд и выдаёт гайд по SDK. - [animation-micro-interaction-pack](https://affpapa.org/nevibecode/skills/animation-micro-interaction-pack.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 499 установок — Набор готовых паттернов движения для интерфейса: ховеры, входы и выходы элементов, отклик на жесты. - [professionalism-credibility](https://affpapa.org/nevibecode/skills/professionalism-credibility.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 490 установок — Задаёт правила сдержанной анимации интерфейса для B2B-продуктов, банков и госсервисов. - [Animation Principles - Absolute Beginner](https://affpapa.org/nevibecode/skills/animation-principles-absolute-beginner.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 489 установок — Объясняет 12 принципов анимации самыми простыми словами. - [technical-constraints](https://affpapa.org/nevibecode/skills/technical-constraints.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 489 установок — Скилл для случаев, когда анимация упирается в поддержку браузеров, возможности платформы или технические требования. - [popmotion](https://affpapa.org/nevibecode/skills/popmotion.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 489 установок — Скилл учит агента применять 12 принципов анимации Диснея с помощью библиотеки Popmotion. - [comfort-safety](https://affpapa.org/nevibecode/skills/comfort-safety.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 489 установок — Скилл для ИИ-кодинга, который задаёт правила анимаций в интерфейсах, где пользователю важно чувствовать себя в безопасности. - [implementation-debugging](https://affpapa.org/nevibecode/skills/implementation-debugging.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 489 установок — Скилл помогает находить и устранять ошибки в веб-анимациях. - [ui-designer](https://affpapa.org/nevibecode/skills/ui-designer.md) — скилл · daniel-dan-conrad · Claude Code, Codex, Cursor +3 · 3600 установок — Скилл для сборки фронтенда с осознанным визуальным направлением: типографика, цвет, движение и композиция вместо дефолтных решений. - [shadcn](https://affpapa.org/nevibecode/skills/pymodel-shadcn.md) — скилл · PyModel · Claude Code, Codex, Cursor +3 · 458 установок — Скилл с набором правил для работы с shadcn/ui: архитектура компонентов, доступность, темы, формы и таблицы. - [arrange](https://affpapa.org/nevibecode/skills/arrange.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 577 установок — Скилл разбирает слабую пространственную композицию интерфейса: произвольные отступы, слипшиеся блоки, однообразные сетки карточек. - [universal-industry](https://affpapa.org/nevibecode/skills/universal-industry.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 487 установок — Скилл с базовыми настройками анимации по 12 принципам Disney: тайминги, easing и правила для интерфейсов, когда отраслевых гайдлайнов нет. - [friendliness-approachability](https://affpapa.org/nevibecode/skills/friendliness-approachability.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 487 установок — Задаёт правила тёплой и ненавязчивой UI-анимации. - [medium-300-500ms](https://affpapa.org/nevibecode/skills/medium-300-500ms.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 487 установок — Скилл для ИИ-агента, который помогает писать анимации средней длительности: переходы страниц, модалки, появление элементов. - [large-500-800ms](https://affpapa.org/nevibecode/skills/large-500-800ms.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 487 установок — Скилл для ИИ-агента, который подсказывает, как строить длинные анимации на 500–800 мс: переходы hero-блоков, сложные раскрытия, сцены, которые должны запомниться. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=64 ## Уточнить [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