# Скиллы по теме «Фронтенд и UI»

Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов.

2909 карточек · страница 60 из 73

- HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=60
- Инструкция для агента: https://affpapa.org/nevibecode/agents.md

- [hover-interactions](https://affpapa.org/nevibecode/skills/hover-interactions.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 604 установки — Скилл для анимаций при наведении курсора: подсветка кнопок, подъём карточек, подчёркивание ссылок, зум картинок.
- [ui-ux-polish](https://affpapa.org/nevibecode/skills/ui-ux-polish.md) — скилл · oakoss · Claude Code, Codex, Cursor +3 · 539 установок — Скилл для итеративной доводки интерфейса веб-приложения: отдельно десктоп и мобильные, паттерны вроде glassmorphism и проверка доступности.
- [awesome-design-md](https://affpapa.org/nevibecode/skills/awesome-design-md.md) — скилл · wearescientist · Claude Code, Codex, Cursor +3 · 666 установок — Подбирает стиль интерфейса из библиотеки DESIGN.md и применяет его к вёрстке: layout, цвет, типографика, отступы.
- [dotnet-wpf-modern](https://affpapa.org/nevibecode/skills/dotnet-wpf-modern.md) — скилл · wshaddix · Claude Code, Codex, Cursor +3 · 301 установка — Скилл для ИИ-агента, который подсказывает, как строить WPF-приложения на .NET 8 и новее: Host builder, MVVM Toolkit, тема Fluent.
- [frontend-architecture](https://affpapa.org/nevibecode/skills/frontend-architecture.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 722 установки — Скилл для проектирования фронтенда: слои, паттерны, управление состоянием и границы модулей.
- [legend-state-best-practices](https://affpapa.org/nevibecode/skills/legend-state-best-practices.md) — скилл · LegendApp · Claude Code, Codex, Cursor +3 · 475 установок — Скилл задаёт правила работы с @legendapp/state: где хранить состояние, как подписываться и что делать с персистентностью.
- [flipoff-split-flap-display](https://affpapa.org/nevibecode/skills/flipoff-split-flap-display.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 849 установок — Скилл помогает собрать, настроить и встроить эмулятор механического flip-табло FlipOff — веб-приложение без сборки и фреймворков.
- [playfulness-fun](https://affpapa.org/nevibecode/skills/playfulness-fun.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 594 установки — Скилл для анимаций, которые развлекают: преувеличенные отскоки, покачивания и пружинные кривые.
- [blockbench-plugins](https://affpapa.org/nevibecode/skills/blockbench-plugins.md) — скилл · jasonjgardner · Claude Code, Codex, Cursor +3 · 647 установок — Помогает разрабатывать плагины на JavaScript для 3D-редактора Blockbench: от меню и диалогов до операций с мешами и транзакций отмены.
- [ionic-react](https://affpapa.org/nevibecode/skills/ionic-react.md) — скилл · capawesome-team · Claude Code, Codex, Cursor +3 · 717 установок — Ведёт агента по разработке приложений на Ionic Framework с React: структура проекта, IonReactRouter, хуки жизненного цикла и работа с состоянием.
- [vtex-io-storefront-theme-versioning](https://affpapa.org/nevibecode/skills/vtex-io-storefront-theme-versioning.md) — скилл · vtex · Claude Code, Codex, Cursor +3 · 777 установок — Инструктирует агента по обновлению, публикации и откату тем оформления в VTEX IO без потери контента из Site Editor при смене мажорной версии.
- [wix-vibe-headless](https://affpapa.org/nevibecode/skills/wix-vibe-headless.md) — скилл · wix · Claude Code, Codex, Cursor +3 · 404 установки — Подключает фронтенд напрямую к живому сайту Wix через публичный WIX_CLIENT_ID.
- [elegance-sophistication](https://affpapa.org/nevibecode/skills/elegance-sophistication.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 585 установок — Набор правил для ИИ-ассистентов по созданию сдержанных анимаций интерфейса.
- [pump-analyzer-solana](https://affpapa.org/nevibecode/skills/pump-analyzer-solana.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 837 установок — Статичный фронтенд для наблюдения за запусками токенов Pump.fun на Solana: WebSocket-поток, графики цены и объёма, алерты по своим условиям.
- [react-coding-style](https://affpapa.org/nevibecode/skills/react-coding-style.md) — скилл · LegendApp · Claude Code, Codex, Cursor +3 · 466 установок — Скилл для ИИ-агента: помогает писать и ревьюить React-код с узкими подписками, стабильными идентичностями и честными зависимостями хуков.
- [data-visualization](https://affpapa.org/nevibecode/skills/dylantarre-data-visualization.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 583 установки — Задаёт правила анимации графиков, дашбордов и диаграмм по 12 принципам Диснея.
- [liveblocks-best-practices](https://affpapa.org/nevibecode/skills/liveblocks-best-practices.md) — скилл · liveblocks · Claude Code, Codex, Cursor +3 · 882 установки — Скилл по Liveblocks: подсказывает агенту, как собирать комнаты, комментарии, курсоры и совместное редактирование, и разбирает типичные ошибки.
- [creative-director](https://affpapa.org/nevibecode/skills/dylantarre-creative-director.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 581 установка — Скилл задаёт роль креативного директора по анимации на базе 12 принципов Диснея.
- [ui-visual-composition](https://affpapa.org/nevibecode/skills/ui-visual-composition.md) — скилл · hueyexe · Claude Code, Codex, Cursor +3 · 707 установок — Скилл учит агента верстать и рецензировать UI.
- [transition-sequences](https://affpapa.org/nevibecode/skills/transition-sequences.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 575 установок — Скилл для многошаговых анимаций: переходы страниц, онбординг, шаги визарда.
- [carousels-sliders](https://affpapa.org/nevibecode/skills/carousels-sliders.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 575 установок — Скилл помогает ИИ настраивать плавную анимацию каруселей, слайдеров и галерей по правилам классической анимации.
- [ionic-vue](https://affpapa.org/nevibecode/skills/ionic-vue.md) — скилл · capawesome-team · Claude Code, Codex, Cursor +3 · 697 установок — Ведёт агента по разработке Ionic-приложений на Vue: структура проекта, навигация, хуки жизненного цикла и композаблы.
- [tailwindcss-fundamentals-v4](https://affpapa.org/nevibecode/skills/tailwindcss-fundamentals-v4.md) — скилл · JosiahSiegel · Claude Code, Codex, Cursor +3 · 389 установок — Скилл по Tailwind CSS v4: установка, CSS-first настройка через @theme, миграция с v3 и новые утилиты.
- [frontend-design](https://affpapa.org/nevibecode/skills/aladicf-frontend-design.md) — скилл · aladicf · Claude Code, Codex, Cursor +3 · 675 установок — Ведёт агента по порядку решений: сначала задача и иерархия, потом системы, и только затем цвет и декор.
- [education-learning](https://affpapa.org/nevibecode/skills/education-learning.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 570 установок — Скилл для тех, кто делает анимации в e-learning и тренажёрах: подсказывает тайминги, отклик на ответ и подачу прогресса.
- [nuxt-seo](https://affpapa.org/nevibecode/skills/secondsky-nuxt-seo.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 324 установки — Скилл по восьми модулям Nuxt SEO v5: robots.txt, карты сайта, OG-картинки, Schema.org и метатеги.
- [travel-hospitality](https://affpapa.org/nevibecode/skills/travel-hospitality.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 568 установок — Скилл задаёт правила анимации для сервисов бронирования отелей, билетов и туристических приложений на основе 12 принципов Disney.
- [dramatic-2000ms-plus](https://affpapa.org/nevibecode/skills/dramatic-2000ms-plus.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 566 установок — Скилл для анимаций длиннее 2000 мс: кинематографичные интро, сюжетные последовательности, премиальные онбординги.
- [open-pencil-design-editor](https://affpapa.org/nevibecode/skills/open-pencil-design-editor.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 810 установок — Скилл учит агента читать и менять файлы .fig, собирать дизайн-токены и экспортировать макеты в код через CLI или MCP-сервер OpenPencil.
- [loading-states](https://affpapa.org/nevibecode/skills/dylantarre-loading-states.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 565 установок — Скилл для индикаторов загрузки: спиннеры, прогресс-бары, скелетоны и шиммер.
- [rive-animations](https://affpapa.org/nevibecode/skills/rive-animations.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 564 установки — Скилл помогает агенту собрать анимацию в Rive по 12 принципам Disney: стейт-машины, инпуты, тайминги и React-обвязка.
- [notifications-toasts](https://affpapa.org/nevibecode/skills/notifications-toasts.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 561 установка — Скилл учит ИИ-агента анимировать тосты и системные уведомления по 12 принципам классической анимации.
- [tailwindcss](https://affpapa.org/nevibecode/skills/martinholovsky-tailwindcss.md) — скилл · martinholovsky · Claude Code, Codex, Cursor +3 · 498 установок — Скилл учит ИИ-агента верстать интерфейс JARVIS утилитарными классами Tailwind CSS: тёмная HUD-тема, адаптивная сетка, анимации и тесты до реализации.
- [vtex-io-rootpath](https://affpapa.org/nevibecode/skills/vtex-io-rootpath.md) — скилл · vtex · Claude Code, Codex, Cursor +3 · 740 установок — Скилл для VTEX IO-приложений в мультибиблиотечных магазинах: подсказывает, как строить URL с учётом префикса привязки.
- [frontend-developer](https://affpapa.org/nevibecode/skills/dylantarre-frontend-developer.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 558 установок — Скилл помогает реализовать интерфейсные анимации и переходы по 12 классическим принципам в веб- и мобильных приложениях.
- [navigation-menus](https://affpapa.org/nevibecode/skills/navigation-menus.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 557 установок — Скилл для анимации навбаров, меню и сайдбаров: тайминги, кривые и состояния переходов по принципам Disney.
- [instrument-integration](https://affpapa.org/nevibecode/skills/instrument-integration.md) — скилл · PostHog · Claude Code, Codex, Cursor +3 · 537 установок — Скилл добавляет PostHog SDK в приложение: определяет стек, ставит пакет, прописывает инициализацию и переменные окружения.
- [typescript-data-visualization-engineering](https://affpapa.org/nevibecode/skills/typescript-data-visualization-engineering.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 9 установок — Помогает проектировать архитектуру визуализации данных на TypeScript: от строгих схем и разделения слоёв до подбора библиотек вроде D3, Three.js или Canvas.
- [gantt-chart-visualization](https://affpapa.org/nevibecode/skills/gantt-chart-visualization.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 9 установок — Проектирует диаграммы Ганта, оценивает структуру расписания и подбирает стек визуализации.
- [canvas2d-data-visualization](https://affpapa.org/nevibecode/skills/canvas2d-data-visualization.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 9 установок — Скилл помогает строить визуализации данных на Canvas2D, когда в DOM слишком много элементов.

Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=61

## Уточнить
[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=<claude-code|codex|cursor|copilot|gemini-cli|windsurf|…>`, `&topic=<…>`, `&sort=installs|stars|new|updated` — значения в https://affpapa.org/nevibecode/agents.md

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md
