# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 33 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=33 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [css-native](https://affpapa.org/nevibecode/skills/css-native.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл для ИИ-агента, который подсказывает, как делать анимации и визуальные эффекты на нативном CSS без библиотек. - [gsap](https://affpapa.org/nevibecode/skills/athevon-gsap.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 997 установок — Скилл помогает агенту писать анимации GSAP: таймлайны, каскадные эффекты и ScrollTrigger. - [canvas-generative](https://affpapa.org/nevibecode/skills/canvas-generative.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 995 установок — Скилл для алгоритмической графики на Canvas 2D: частицы, flow fields, шум, фракталы и L-системы. - [r3f-interaction](https://affpapa.org/nevibecode/skills/r3f-interaction.md) — скилл · EnzeD · Claude Code, Codex, Cursor +3 · 3300 установок — Настраивает события указателя, выбор объектов, перетаскивание и управление камерой в React Three Fiber. - [llm-icon-finder](https://affpapa.org/nevibecode/skills/llm-icon-finder.md) — скилл · daymade · Claude Code, Codex, Cursor +3 · 952 установки — Скилл находит ссылки на иконки AI-моделей и провайдеров из библиотеки lobe-icons и помогает скачать их в SVG, PNG или WEBP. - [antv-x6-editor](https://affpapa.org/nevibecode/skills/antv-x6-editor.md) — скилл · antvis · Claude Code, Codex, Cursor +3 · 676 установок — Помогает собрать редактор блок-схем, DAG или ER-диаграмм на @antv/x6 и разобраться с плагинами, портами и ошибками отрисовки. - [framer-motion](https://affpapa.org/nevibecode/skills/athevon-framer-motion.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 990 установок — Подсказывает агенту правила работы с Framer Motion и Motion в React: анимации раскладки, жесты и хуки без лишних ререндеров. - [desktop-principles](https://affpapa.org/nevibecode/skills/desktop-principles.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 982 установки — Скилл с правилами десктопного UX: ховеры, точность указателя, горячие клавиши, несколько окон. - [om-auto-qa-pr](https://affpapa.org/nevibecode/skills/om-auto-qa-pr.md) — скилл · open-mercato · Claude Code, Codex, Cursor +3 · 3200 установок — Проверяет визуальные изменения в интерфейсе через реальный браузер, делает скриншоты и формирует отчёт. - [swap-integration](https://affpapa.org/nevibecode/skills/swap-integration.md) — скилл · uniswap · Claude Code, Codex, Cursor +3 · 2200 установок — Помогает настроить обмен токенов через Uniswap в веб-интерфейсах, бэкенд-скриптах и смарт-контрактах. - [mobile-principles](https://affpapa.org/nevibecode/skills/mobile-principles.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 974 установки — Набор правил для мобильного интерфейса: размеры тап-зон, отказ от hover, зоны большого пальца, safe area и жесты. - [ecommerce-checkout-optimization](https://affpapa.org/nevibecode/skills/ecommerce-checkout-optimization.md) — скилл · nexscope-ai · Claude Code, Codex, Cursor +3 · 1200 установок — Разбирает воронку оформления заказа и подсказывает, где покупатели бросают корзину. - [qt-ui-design](https://affpapa.org/nevibecode/skills/qt-ui-design.md) — скилл · qt-ai-skills · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл для ИИ-агентов, который проводит через проектирование и аудит интерфейсов Qt/QML, веба и встраиваемых панелей: раскладка, навигация, контраст, размеры целей нажатия. - [qt-qml](https://affpapa.org/nevibecode/skills/qt-qml.md) — скилл · qt-ai-skills · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл внедряет стандарты оформления кода на QML при написании компонентов, рефакторинге и ревью. - [interface-kit](https://affpapa.org/nevibecode/skills/interface-kit.md) — скилл · JuliusBrussee · Claude Code, Codex, Cursor +3 · 2200 установок — Скилл задаёт агенту план работы над интерфейсом: доступность, типографика, сетка, цвет, анимация. - [product-showcase](https://affpapa.org/nevibecode/skills/product-showcase.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл собирает из работающего веб-приложения многостраничный сайт с реальными скриншотами и GIF-инструкциями. - [onboarding-ux](https://affpapa.org/nevibecode/skills/onboarding-ux.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл проходит по приложению как новый пользователь, находит места, где он застрянет, и пишет текст с кодом для пустых состояний, подсказок и приветствия. - [ui-craft](https://affpapa.org/nevibecode/skills/ui-craft.md) — скилл · educlopez · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл для дизайна и вёрстки интерфейсов: сначала разведка проекта, потом код. - [ui-mobile](https://affpapa.org/nevibecode/skills/ui-mobile.md) — скилл · alinaqi · Claude Code, Codex, Cursor +3 · 1200 установок — Задаёт агенту правила мобильного интерфейса: минимальный размер нажатия 44×44, контраст по WCAG 2.1 AA, видимые границы кнопок. - [compatibility-testing](https://affpapa.org/nevibecode/skills/compatibility-testing.md) — скилл · proffesor-for-testing · Claude Code, Codex, Cursor +3 · 651 установка — Скилл помогает настроить кроссбраузерное и адаптивное тестирование вёрстки на разных экранах. - [workflow-progress-screenshots](https://affpapa.org/nevibecode/skills/workflow-progress-screenshots.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 341 установка — Скилл обязывает агента присылать реальные скриншоты интерфейса по ходу работы, а не в конце задачи. - [compose-multiplatform](https://affpapa.org/nevibecode/skills/compose-multiplatform.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 951 установка — Скилл помогает писать кроссплатформенный интерфейс на Compose Multiplatform для Android, iOS, Desktop и Web. - [apple-launch-film](https://affpapa.org/nevibecode/skills/apple-launch-film.md) — скилл · charlie947 · Claude Code, Codex, Cursor +3 · 1500 установок — Собирает лонч-фильм в стиле Apple для Mac целиком в коде: меню-бар, чёлку, виджеты и градиентные обои. - [title-sequence-3d](https://affpapa.org/nevibecode/skills/title-sequence-3d.md) — скилл · charlie947 · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл собирает кинематографичный 3D-опенер на Three.js в одном HTML-файле. - [launch-video](https://affpapa.org/nevibecode/skills/launch-video.md) — скилл · charlie947 · Claude Code, Codex, Cursor +3 · 1500 установок — Собирает промо-ролики для запуска продуктов на 30–45 секунд в виде автономного HTML-файла с покадровой анимацией и экспортом в MP4. - [ux-designer](https://affpapa.org/nevibecode/skills/ux-designer.md) — скилл · szilu · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл для ревью и сборки интерфейсов: проверяет доступность, состояния экранов и микрокопирайт, подсказывает числа для отступов и контраста. - [swiftui-motion](https://affpapa.org/nevibecode/skills/swiftui-motion.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 943 установки — Задаёт правила и готовые паттерны анимаций SwiftUI для ИИ-агента. - [compose-motion](https://affpapa.org/nevibecode/skills/compose-motion.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 943 установки — Скилл по анимациям Jetpack Compose: подсказывает, какой API взять под задачу, и даёт готовые спеки пружин. - [swiftui-graphics](https://affpapa.org/nevibecode/skills/swiftui-graphics.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 939 установок — Скилл для продвинутой графики SwiftUI: Metal-шейдеры, .visualEffect, Liquid Glass из iOS 26 и Canvas. - [compose-graphics](https://affpapa.org/nevibecode/skills/compose-graphics.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 937 установок — Скилл для продвинутой графики в Jetpack Compose: пружинная физика Material 3 Expressive, AGSL-шейдеры, Canvas и эффекты graphicsLayer. - [frontend-testing-debugging](https://affpapa.org/nevibecode/skills/frontend-testing-debugging.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 159 установок — Помогает агенту находить баги в интерфейсе, проверять локальный dev-сервер и верстку. - [design-system](https://affpapa.org/nevibecode/skills/builderos-design-system.md) — скилл · BuilderOS · Claude Code, Codex, Cursor +3 · 1800 установок — Собирает дизайн-систему по скриншотам или макетам и записывает её сразу в два файла: docs/design.md для агента и docs/design.html для браузера. - [svelte5-best-practices](https://affpapa.org/nevibecode/skills/svelte5-best-practices.md) — скилл · ejirocodes · Claude Code, Codex, Cursor +3 · 16600 установок — Скилл для ИИ-агента, который подсказывает руны Svelte 5, сниппеты и паттерны SvelteKit при написании и рефакторинге компонентов. - [swiss-design](https://affpapa.org/nevibecode/skills/swiss-design.md) — скилл · zeke · Claude Code, Codex, Cursor +3 · 951 установка — Скилл задаёт ИИ-агенту дизайн-систему в духе швейцарского интернационального стиля: типографика IBM Plex Sans, сетка, оттенки stone и акцентный цвет. - [paper-cinder-transition](https://affpapa.org/nevibecode/skills/paper-cinder-transition.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 330 установок — Скилл для WebGL-перехода между сценами: линия огня съедает старую страницу и открывает новую. - [responsive-patterns](https://affpapa.org/nevibecode/skills/responsive-patterns.md) — скилл · OrchestKit · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл внедряет правила адаптивной вёрстки на Container Queries, subgrid и fluid typography в React. - [craft-design-engineering](https://affpapa.org/nevibecode/skills/craft-design-engineering.md) — скилл · gustavo-fior · Claude Code, Codex, Cursor +3 · 479 установок — Скилл с правилами дизайн-инженерии: типографика, цвет, отступы, анимации и цифры. - [wireframe](https://affpapa.org/nevibecode/skills/wireframe.md) — скилл · ghaida · Claude Code, Codex, Cursor +3 · 2300 установок — Проектирует структуру экранов: что на них есть, где стоит и что важнее. - [3d-orbit-inspect-demo](https://affpapa.org/nevibecode/skills/3d-orbit-inspect-demo.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 321 установка — Скилл для Three.js: объект наклоняется под курсором, а по клику поднимается в руку для осмотра. - [edgeone](https://affpapa.org/nevibecode/skills/edgeone.md) — скилл · aahl · Claude Code, Codex, Cursor +3 · 2200 установок — Публикует HTML-разметку или проект сайта на EdgeOne Pages и возвращает публичную ссылку. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=34 ## Уточнить [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