# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 24 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=24 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [clerk-react-patterns](https://affpapa.org/nevibecode/skills/clerk-react-patterns.md) — скилл · clerk · Claude Code, Codex, Cursor +3 · 19700 установок — Скилл помогает настроить аутентификацию в React SPA на базе @clerk/react. - [rive-interactive](https://affpapa.org/nevibecode/skills/rive-interactive.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 2600 установок — Скилл для работы с Rive: стейт-машины, ввод от пользователя и привязка данных к анимации в React. - [lightweight-3d-effects](https://affpapa.org/nevibecode/skills/lightweight-3d-effects.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 2600 установок — Скилл для декоративных 3D-элементов и микроанимаций: псевдо-3D иллюстрации, живые фоны, наклон карточек под курсор. - [design-token](https://affpapa.org/nevibecode/skills/design-token.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 установок — Помогает описать токены цвета, отступов, типографики и теней: категории, уровни и правила именования. - [error-handling-ux](https://affpapa.org/nevibecode/skills/error-handling-ux.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 установок — Скилл для проектирования ошибок в продукте: как их предотвратить, показать и дать пользователю выход. - [design-qa-checklist](https://affpapa.org/nevibecode/skills/design-qa-checklist.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 установок — Генерирует систематический чек-лист для проверки вёрстки на соответствие дизайну. - [loading-states](https://affpapa.org/nevibecode/skills/loading-states.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 установок — Проектирует состояния ожидания: скелетоны, индикаторы, постепенную загрузку и оптимистичные обновления. - [state-machine](https://affpapa.org/nevibecode/skills/owl-listener-state-machine.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 установок — Скилл помогает спроектировать поведение интерфейса через конечные автоматы: состояния, переходы, события и гарды. - [design-token-audit](https://affpapa.org/nevibecode/skills/design-token-audit.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 установок — Проверяет, где в проекте обходят дизайн-токены: находит захардкоженные значения, дубли и пробелы в наборе токенов. - [animation-principles](https://affpapa.org/nevibecode/skills/owl-listener-animation-principles.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 установок — Скилл для настройки одной конкретной анимации в интерфейсе: подбирает easing, длительность и порядок движения элементов. - [wireframe-spec](https://affpapa.org/nevibecode/skills/wireframe-spec.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2300 установок — Составляет текстовые спецификации вайрфреймов с приоритетами контента и заметками о поведении элементов. - [micro-interaction-spec](https://affpapa.org/nevibecode/skills/micro-interaction-spec.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2300 установок — Описывает одну микромикровзаимодействие целиком: триггер, правила, отклик, циклы и режимы. - [react-native-best-practices](https://affpapa.org/nevibecode/skills/software-mansion-labs-react-native-best-practices.md) — скилл · software-mansion-labs · Claude Code, Codex, Cursor +3 · 5600 установок — Набор подсказок Software Mansion для кода React Native и Expo на New Architecture: анимации, жесты, аудио, JSI, мультипоточность. - [saas-scaffolder](https://affpapa.org/nevibecode/skills/saas-scaffolder.md) — скилл · Alireza Rezvani · Claude Code · 630 установок — Генерирует рабочий каркас SaaS на Next.js: авторизация, схема базы, биллинг Stripe, API-роуты и дашборд. - [ant-design](https://affpapa.org/nevibecode/skills/ant-design.md) — скилл · ant-design · Claude Code, Codex, Cursor +3 · 4100 установок — Скилл-справочник по antd 6.x, Ant Design Pro 5 и Ant Design X v2. - [bencium-controlled-ux-designer](https://affpapa.org/nevibecode/skills/bencium-controlled-ux-designer.md) — скилл · bencium · Claude Code, Codex, Cursor +3 · 4600 установок — Помогает обсуждать визуальные решения для веб-интерфейсов до правок кода. - [form-cro](https://affpapa.org/nevibecode/skills/form-cro.md) — скилл · Alireza Rezvani · Claude Code · 622 установки — Помогает разбирать формы захвата лидов, контактов, заявок и оплаты. - [ui-design-brain](https://affpapa.org/nevibecode/skills/ui-design-brain.md) — скилл · carmahhawwari · Claude Code, Codex, Cursor +3 · 845 установок — Скилл помогает создавать интерфейсы по реальным паттернам компонентов и правилам дизайн-систем. - [babylonjs-engine](https://affpapa.org/nevibecode/skills/babylonjs-engine.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл для работы с Babylon.js: подсказывает, как завести движок, камеру, свет и меши, когда вы собираете 3D в браузере и не хотите вспоминать API по памяти. - [pixijs-2d](https://affpapa.org/nevibecode/skills/pixijs-2d.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл обучает агента создавать 2D-графику на PixiJS с WebGL и WebGPU: анимировать спрайты, выводить частицы и рисовать векторные фигуры на холсте. - [locomotive-scroll](https://affpapa.org/nevibecode/skills/locomotive-scroll.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл помогает внедрить Locomotive Scroll: плавную прокрутку, параллакс и анимации от скролла. - [experience-lwc-generate](https://affpapa.org/nevibecode/skills/experience-lwc-generate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 6200 установок — Скилл для разработки Lightning Web Components: собирает бандлы, паттерны wire-сервиса, стили SLDS 2 и Jest-тесты. - [accessibility-test-plan](https://affpapa.org/nevibecode/skills/accessibility-test-plan.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2100 установок — Помогает спланировать тестирование доступности интерфейса с ассистивными технологиями и реальными пользователями. - [naming-convention](https://affpapa.org/nevibecode/skills/naming-convention.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2100 установок — Задаёт единые правила именования компонентов, токенов и слоёв, чтобы имена в проекте не расходились от файла к файлу. - [handoff-spec](https://affpapa.org/nevibecode/skills/handoff-spec.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2100 установок — Оформляет спецификацию передачи дизайна в разработку: отступы, токены, состояния экранов и граничные случаи. - [gesture-patterns](https://affpapa.org/nevibecode/skills/gesture-patterns.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2100 установок — Проектирует жесты для сенсорного и указательного ввода: свайпы, перетаскивание и долгое нажатие. - [feedback-patterns](https://affpapa.org/nevibecode/skills/feedback-patterns.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2100 установок — Учит агента проектировать отклик системы на действие пользователя: тосты, индикаторы, бейджи и уведомления. - [theming-system](https://affpapa.org/nevibecode/skills/theming-system.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2100 установок — Скилл проектирует трёхуровневую архитектуру дизайн-токенов для поддержки тем оформления, плотности интерфейса и тёмного режима в единой библиотеке компонентов. - [component-spec](https://affpapa.org/nevibecode/skills/component-spec.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2100 установок — Скилл описывает один компонент дизайн-системы: анатомию, варианты, состояния, доступность и правила использования. - [accessibility-audit](https://affpapa.org/nevibecode/skills/accessibility-audit.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2100 установок — Проверяет готовый интерфейс по WCAG и выдаёт проблемы с уровнем серьёзности, влиянием и шагами исправления. - [ux-writing](https://affpapa.org/nevibecode/skills/owl-listener-ux-writing.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2200 установок — Пишет микротексты, сообщения об ошибках, пустые состояния и кнопки. - [threejs-towers](https://affpapa.org/nevibecode/skills/threejs-towers.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1200 установок — Собирает пагоды, замки и купола из параметров вместо меш-файлов и показывает, как постройка растёт снизу вверх. - [audit-ai-design-slop](https://affpapa.org/nevibecode/skills/audit-ai-design-slop.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл находит визуальный шум, нагромождение декоративных слоёв и дефекты интерфейса в коде или макетах. - [threejs-weather](https://affpapa.org/nevibecode/skills/threejs-weather.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1200 установок — Добавляет в Three.js сцены управляемые состояния дождя, грозы и снега. - [threejs-landscape](https://affpapa.org/nevibecode/skills/threejs-landscape.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл собирает живой ландшафт на Three.js: холмы, трава, камни, небо и смена времени суток. - [falling-leaves](https://affpapa.org/nevibecode/skills/falling-leaves.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл помогает генерировать реалистичную анимацию падающих листьев и лепестков на canvas или в 3D. - [pointer-trail-emitter](https://affpapa.org/nevibecode/skills/pointer-trail-emitter.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл учит агента строить шлейф за курсором, который держит одинаковый шаг между частицами при любой скорости руки. - [build-vesperfall-review-assets](https://affpapa.org/nevibecode/skills/build-vesperfall-review-assets.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл формирует пары для ревью ассетов каталога Vesperfall: прозрачный PNG-референс и живую модель Three.js или FBX. - [build-game-changelog](https://affpapa.org/nevibecode/skills/build-game-changelog.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл для проектирования и ведения внутриигрового чейнджлога: версии, провенанс деплоя, навигация по меню. - [build-game-map-editor](https://affpapa.org/nevibecode/skills/build-game-map-editor.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл помогает спроектировать браузерный редактор карт для Three.js и изометрических игр. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=25 ## Уточнить [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