# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 38 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=38 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [12-principles-of-animation](https://affpapa.org/nevibecode/skills/12-principles-of-animation.md) — скилл · raphael-salaja · Claude Code, Codex, Cursor +3 · 2200 установок — Находит ошибки в веб-анимациях по двенадцати принципам движения. - [vitest-skill](https://affpapa.org/nevibecode/skills/vitest-skill.md) — скилл · TestMu AI · Claude Code, Codex, Cursor +3 · 448 установок — Генерирует юнит-тесты на Vitest для JavaScript и TypeScript проектов. - [liquid-glass](https://affpapa.org/nevibecode/skills/liquid-glass.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 78 установок — Помогает внедрить оформление Liquid Glass в приложениях на macOS SwiftUI и убрать самодельные фоны, мешающие системным материалам. - [flutter-architecture](https://affpapa.org/nevibecode/skills/flutter-architecture.md) — скилл · Stanislav \[MADTeacher\] Chernyshev · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл для проектирования и ревью архитектуры Flutter-приложений: слои, MVVM, feature-first структура, DI и паттерны вроде Result и Command. - [senior-frontend](https://affpapa.org/nevibecode/skills/borghei-senior-frontend.md) — скилл · borghei · Claude Code, Codex, Cursor +3 · 345 установок — Помогает создавать проекты и компоненты на React и Next.js, разбирать зависимости и проверять доступность интерфейса. - [preview-import](https://affpapa.org/nevibecode/skills/preview-import.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 1600 установок — Запускает локальный сервер AEM CLI для проверки импортированного HTML в Edge Delivery Services. - [find-test-content](https://affpapa.org/nevibecode/skills/find-test-content.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 1600 установок — Находит страницы с нужным блоком в проектах AEM Edge Delivery Services для проверки вёрстки. - [block-collection-and-party](https://affpapa.org/nevibecode/skills/block-collection-and-party.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 1600 установок — Находит готовые блоки, плагины и примеры кода для AEM Edge Delivery Services в репозиториях Block Collection и Block Party. - [testing-blocks](https://affpapa.org/nevibecode/skills/testing-blocks.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 1600 установок — Прогоняет линтинг, браузерную проверку и юнит-тесты для изменений в блоках AEM Edge Delivery Services. - [analyze-and-plan](https://affpapa.org/nevibecode/skills/analyze-and-plan.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл помогает составить требования, сценарии для проверки и Definition of Done перед разработкой блоков в AEM Edge Delivery Services. - [content-modeling](https://affpapa.org/nevibecode/skills/content-modeling.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 1600 установок — Помогает спроектировать структуру блоков AEM Edge Delivery Services так, чтобы авторам было удобно заполнять контент. - [content-driven-development](https://affpapa.org/nevibecode/skills/content-driven-development.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл для разработки на AEM Edge Delivery Services: сначала находится или создаётся тестовый контент, потом пишется код. - [block-inventory](https://affpapa.org/nevibecode/skills/block-inventory.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл сканирует локальные папки AEM Edge Delivery Services и ищет готовые компоненты в Block Collection перед моделированием контента. - [building-blocks](https://affpapa.org/nevibecode/skills/building-blocks.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл для реализации блоков и правок ядра в AEM Edge Delivery Services: создаёт папки блоков, пишет decorate-функции, скоупит CSS. - [code-review](https://affpapa.org/nevibecode/skills/adobe-code-review.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл проверяет код проектов AEM Edge Delivery Services на соответствие стандартам Adobe перед коммитом или в процессе ревью пулл-реквеста. - [google-maps-platform](https://affpapa.org/nevibecode/skills/google-maps-platform.md) — скилл · googlemaps · Claude Code, Codex, Cursor +3 · 944 установки — Скилл помогает внедрять сервисы Google Maps Platform в веб- и мобильные проекты. - [trigger-realtime](https://affpapa.org/nevibecode/skills/trigger-realtime.md) — скилл · triggerdotdev · Claude Code, Codex, Cursor +3 · 2800 установок — Скилл для подписки на выполнение задач Trigger.dev прямо из браузера, рендера прогресса и потоков данных в React, а также запуска задач со скромными токенами. - [visual-qa-testing](https://affpapa.org/nevibecode/skills/visual-qa-testing.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 642 установки — Открывает страницу во встроенном браузере Cursor, делает скриншот, читает консоль и сетевые запросы. - [contentful-custom-app-from-scratch](https://affpapa.org/nevibecode/skills/contentful-custom-app-from-scratch.md) — скилл · contentful · Claude Code, Codex, Cursor +3 · 2800 установок — Помогает собрать кастомное приложение Contentful App Framework: от идеи и выбора локаций до локального теста и передачи. - [add-audio](https://affpapa.org/nevibecode/skills/add-audio.md) — скилл · OpusGameLabs · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл добавляет в браузерную игру фоновую музыку и звуковые эффекты на Web Audio API. - [math-teacher](https://affpapa.org/nevibecode/skills/math-teacher.md) — скилл · jamesrochabrun · Claude Code, Codex, Cursor +3 · 871 установка — Скилл превращает объяснение математики в интерактивные HTML-страницы с графиками, бегунками и игровыми очками. - [react-native](https://affpapa.org/nevibecode/skills/alinaqi-react-native.md) — скилл · alinaqi · Claude Code, Codex, Cursor +3 · 566 установок — Скилл задаёт структуру проекта, паттерны компонентов и правила тестирования для React Native. - [prefetch](https://affpapa.org/nevibecode/skills/prefetch.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл объясняет агенту техники предзагрузки ресурсов в браузере во время простоя. - [import-on-interaction](https://affpapa.org/nevibecode/skills/import-on-interaction.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл учит агента откладывать загрузку тяжёлых компонентов и виджетов до клика, наведения или ввода в форму. - [loading-sequence](https://affpapa.org/nevibecode/skills/loading-sequence.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл объясняет агенту, в каком порядке грузить CSS, шрифты, JS и картинки, чтобы страница проходила Core Web Vitals. - [preload](https://affpapa.org/nevibecode/skills/preload.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1500 установок — Обучает агента настраивать предзагрузку критических ресурсов сайта. - [compression](https://affpapa.org/nevibecode/skills/compression.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл объясняет, как сжимать JavaScript через Gzip и Brotli, чтобы скрипты быстрее уходили по сети. - [bundle-splitting](https://affpapa.org/nevibecode/skills/bundle-splitting.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл учит агента делить большой JavaScript-бандл на части, чтобы быстрее рисовалась первая страница и приложение становилось интерактивным. - [dynamic-import](https://affpapa.org/nevibecode/skills/dynamic-import.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1500 установок — Обучает агента разделять бандл через dynamic import(). - [cypress-tap](https://affpapa.org/nevibecode/skills/cypress-tap.md) — скилл · cypress-io · Claude Code, Codex, Cursor +3 · 2700 установок — Управляет запущенной сессией Cypress open через CLI без интерфейса. - [add-feature](https://affpapa.org/nevibecode/skills/add-feature.md) — скилл · OpusGameLabs · Claude Code, Codex, Cursor +3 · 977 установок — Добавляет игровую механику в браузерную игру на Three.js или Phaser. - [tanstack-form](https://affpapa.org/nevibecode/skills/tanstack-form.md) — скилл · tanstack-skills · Claude Code, Codex, Cursor +3 · 4300 установок — Скилл учит ассистента создавать формы на базе TanStack Form с типизацией TypeScript, валидацией через Zod или Valibot и динамическими массивами полей. - [gsap-animation](https://affpapa.org/nevibecode/skills/gsap-animation.md) — скилл · notedit · Claude Code, Codex, Cursor +3 · 313 установок — Связывает GSAP с Remotion для рендеринга моушн-графики и сложных таймлайнов. - [om-mockup-prototype](https://affpapa.org/nevibecode/skills/om-mockup-prototype.md) — скилл · open-mercato · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл собирает кликабельный низкодетализированный прототип из продуктового брифа. - [ue-component-model](https://affpapa.org/nevibecode/skills/ue-component-model.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл настраивает блоки AEM Edge Delivery Services для Universal Editor. - [sapui5-cli](https://affpapa.org/nevibecode/skills/sapui5-cli.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 813 установок — Ведёт проект на SAPUI5 или OpenUI5 через UI5 CLI: инициализация, сборка, dev-сервер, конфиги ui5.yaml. - [roblox-gui](https://affpapa.org/nevibecode/skills/roblox-gui.md) — скилл · TabooHarmony · Claude Code, Codex, Cursor +3 · 2200 установок — Набор правил для вёрстки интерфейсов в Roblox. - [shadcn](https://affpapa.org/nevibecode/skills/vercel-labs-shadcn.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 72 установки — Скилл помогает Codex работать с компонентами shadcn/ui: выбрать их, добавить в проект и настроить тему. - [responsive-craft](https://affpapa.org/nevibecode/skills/responsive-craft.md) — скилл · kylezantos · Claude Code, Codex, Cursor +3 · 738 установок — Скилл для адаптивной вёрстки: разбирает существующий сайт, строит раскладку с нуля или открывает живой предпросмотр на разных ширинах экрана. - [accessibility-audit](https://affpapa.org/nevibecode/skills/accesslint-accessibility-audit.md) — скилл · AccessLint · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл проводит глубокую проверку доступности сайта по стандарту WCAG 2.2 и методологии WCAG-EM. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=39 ## Уточнить [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