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

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

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

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

- [nextjs-app-router-fundamentals](https://affpapa.org/nevibecode/skills/nextjs-app-router-fundamentals.md) — скилл · wsimmonds · Claude Code, Codex, Cursor +3 · 2200 установок — Скилл ведёт агента по Next.js App Router: перенос с Pages Router, вложенные layout, метаданные, динамические маршруты.
- [playwright-blazor-testing](https://affpapa.org/nevibecode/skills/playwright-blazor-testing.md) — скилл · Aaronontheweb · Claude Code, Codex, Cursor +3 · 537 установок — Скилл учит агента писать end-to-end тесты для Blazor Server и WebAssembly на Playwright: навигация, формы, авторизация, селекторы.
- [vega-multi-tv-migration](https://affpapa.org/nevibecode/skills/vega-multi-tv-migration.md) — скилл · AmazonAppDev · Claude Code, Codex, Cursor +3 · 10400 установок — Скилл переводит приложения Vega OS для Fire TV в монорепозиторий React Native.
- [tesseract-editor](https://affpapa.org/nevibecode/skills/tesseract-editor.md) — скилл · mirage-hq · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл помогает собрать или изменить браузерный редактор проектов Tesseract .tsrct.
- [r3f-fundamentals](https://affpapa.org/nevibecode/skills/r3f-fundamentals.md) — скилл · EnzeD · Claude Code, Codex, Cursor +3 · 2100 установок — Скилл учит агента строить сцены React Three Fiber: Canvas, типизированный JSX, хуки рендер-цикла и владение ресурсами.
- [app-ui-design](https://affpapa.org/nevibecode/skills/app-ui-design.md) — скилл · majiayu000 · Claude Code, Codex, Cursor +3 · 636 установок — Скилл для проектирования интерфейсов iOS и Android: дизайн-системы, доступность, гайдлайны платформ.
- [posthog-analytics](https://affpapa.org/nevibecode/skills/posthog-analytics.md) — скилл · alinaqi · Claude Code, Codex, Cursor +3 · 809 установок — Скилл для внедрения продуктовой аналитики PostHog: события, идентификация пользователей, фича-флаги и дашборды.
- [sentry-react-router-framework-sdk](https://affpapa.org/nevibecode/skills/sentry-react-router-framework-sdk.md) — скилл · getsentry · Claude Code, Codex, Cursor +3 · 1800 установок — Помогает настроить мониторинг ошибок и трейсинг в проектах на React Router v7 в режиме Framework mode.
- [emilkowal-animations](https://affpapa.org/nevibecode/skills/emilkowal-animations.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 2800 установок — Набор из 58 правил веб-анимации на базе подходов Эмиля Ковальски для React и CSS.
- [phaser](https://affpapa.org/nevibecode/skills/phaser.md) — скилл · OpusGameLabs · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл задаёт агенту структуру проекта для 2D-игр на Phaser 3: сцены, общий стейт, шина событий.
- [download-page-generator](https://affpapa.org/nevibecode/skills/download-page-generator.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1000 установок — Устаревший скилл-заглушка для страниц загрузки.
- [toc-generator](https://affpapa.org/nevibecode/skills/toc-generator.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл-заглушка: сборка оглавления теперь живёт в Bricks, а здесь только команда установки преемника.
- [services-page-generator](https://affpapa.org/nevibecode/skills/services-page-generator.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1000 установок — Устаревшая заглушка для сборки страниц услуг.
- [popup-generator](https://affpapa.org/nevibecode/skills/popup-generator.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1000 установок — Заглушка для обратной совместимости, указывающая на переезд правил сборки модальных окон.
- [social-share-generator](https://affpapa.org/nevibecode/skills/social-share-generator.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1000 установок — Заглушка совместимости для создания кнопок шаринга в соцсетях.
- [tab-accordion](https://affpapa.org/nevibecode/skills/tab-accordion.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1000 установок — Совместимостная заглушка для сборки вкладок и аккордеонов.
- [audit](https://affpapa.org/nevibecode/skills/educlopez-audit.md) — скилл · educlopez · Claude Code, Codex, Cursor +3 · 929 установок — Проводит технический аудит интерфейса: доступность, производительность, адаптивность.
- [sap-fiori-tools](https://affpapa.org/nevibecode/skills/sap-fiori-tools.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл для разработки приложений SAP Fiori: генерация шаблонов, Page Editor, аннотации, деплой на ABAP или Cloud Foundry — всё через агента.
- [shiny-bslib](https://affpapa.org/nevibecode/skills/shiny-bslib.md) — скилл · Garrick Aden-Buie (@gadenbuie) · Claude Code, Codex, Cursor +3 · 801 установка — Скилл для сборки дашбордов на Shiny с bslib и Bootstrap 5.
- [angular-performance](https://affpapa.org/nevibecode/skills/angular-performance.md) — скилл · gentleman-programming · Claude Code, Codex, Cursor +3 · 350 установок — Скилл для Angular: подсказывает, как грузить картинки через NgOptimizedImage, откладывать тяжёлые компоненты через @defer и настроить SSR с гидратацией.
- [frontend-enhancer](https://affpapa.org/nevibecode/skills/frontend-enhancer.md) — скилл · ailabs-393 · Claude Code, Codex, Cursor +3 · 968 установок — Скилл для Next.js: готовые компоненты, палитры, анимации и шаблоны секций.
- [swiftui-whats-new-27](https://affpapa.org/nevibecode/skills/swiftui-whats-new-27.md) — скилл · superagents-lab · Claude Code, Codex, Cursor +3 · 737 установок — Справочник по изменениям SwiftUI в SDK 27 для агентов кодинга.
- [qt-qml-docs](https://affpapa.org/nevibecode/skills/qt-qml-docs.md) — скилл · qt-ai-skills · Claude Code, Codex, Cursor +3 · 719 установок — Скилл читает .qml-файлы и связанный код, а на выходе даёт Markdown-справочник по компоненту: свойства, сигналы, методы, зависимости.
- [r3f-animation](https://affpapa.org/nevibecode/skills/r3f-animation.md) — скилл · EnzeD · Claude Code, Codex, Cursor +3 · 2000 установок — Скилл для плавной анимации 3D-объектов в React Three Fiber через useFrame, damping и GLTF-клипы.
- [frontend-testing-best-practices](https://affpapa.org/nevibecode/skills/frontend-testing-best-practices.md) — скилл · sergiodxa · Claude Code, Codex, Cursor +3 · 2200 установок — Набор из 6 правил тестирования фронтенда: заставляет писать сквозные E2E-тесты в Playwright вместо изолированных юнит-тестов компонентов.
- [rsbuild-best-practices](https://affpapa.org/nevibecode/skills/rsbuild-best-practices.md) — скилл · rstackjs · Claude Code, Codex, Cursor +3 · 2700 установок — Задаёт правила настройки, проверки и отладки сборщика Rsbuild.
- [mjml-email-templates](https://affpapa.org/nevibecode/skills/mjml-email-templates.md) — скилл · Aaronontheweb · Claude Code, Codex, Cursor +3 · 492 установки — Скилл учит агента собирать транзакционные письма на MJML и компилировать их в HTML, который одинаково выглядит в Outlook, Gmail и Apple Mail.
- [ui-craft-minimal](https://affpapa.org/nevibecode/skills/ui-craft-minimal.md) — скилл · educlopez · Claude Code, Codex, Cursor +3 · 903 установки — Настраивает агента на вёрстку минималистичных интерфейсов в духе Linear, Notion и Vercel.
- [vocabulary](https://affpapa.org/nevibecode/skills/vocabulary.md) — скилл · index-how · Claude Code, Codex, Cursor +3 · 1100 установок — Обратный словарь по дизайну и интерфейсам: помогает подобрать точный термин для элемента UI, формулировки в спецификации или коммите.
- [ui-craft-editorial](https://affpapa.org/nevibecode/skills/ui-craft-editorial.md) — скилл · educlopez · Claude Code, Codex, Cursor +3 · 898 установок — Скилл настраивает журнальную типографику для блогов, лонгридов и медиа.
- [qt-qml-profiler](https://affpapa.org/nevibecode/skills/qt-qml-profiler.md) — скилл · qt-ai-skills · Claude Code, Codex, Cursor +3 · 701 установка — Скилл запускает профилировщик Qt для 2D-приложений на QML и разбирает трассу, чтобы найти узкие места.
- [colorize](https://affpapa.org/nevibecode/skills/colorize.md) — скилл · educlopez · Claude Code, Codex, Cursor +3 · 890 установок — Скилл добавляет один акцент в 3–5 местах интерфейса или убирает лишний цвет, возвращая экран к нейтральной основе.
- [heuristic](https://affpapa.org/nevibecode/skills/heuristic.md) — скилл · educlopez · Claude Code, Codex, Cursor +3 · 881 установка — Прогоняет интерфейс по 10 эвристикам Нильсена и 6 законам дизайна, выдаёт таблицу находок и балл UsabilityScore от 0 до 100.
- [frontend-visual-qa](https://affpapa.org/nevibecode/skills/frontend-visual-qa.md) — скилл · daymade · Claude Code, Codex, Cursor +3 · 572 установки — Проверяет уже отрендеренный интерфейс в реальном браузере: типографику, переполнение, адаптив, маршруты, графики.
- [shiny-bslib-theming](https://affpapa.org/nevibecode/skills/shiny-bslib-theming.md) — скилл · Garrick Aden-Buie (@gadenbuie) · Claude Code, Codex, Cursor +3 · 750 установок — Скилл для оформления Shiny-приложений через bslib и Bootstrap 5: пресеты, цвета, шрифты, тёмный режим и живую подстройку темы.
- [r3f-materials](https://affpapa.org/nevibecode/skills/r3f-materials.md) — скилл · EnzeD · Claude Code, Codex, Cursor +3 · 1900 установок — Помогает настроить PBR-поверхности и прозрачность в React Three Fiber.
- [r3f-postprocessing](https://affpapa.org/nevibecode/skills/r3f-postprocessing.md) — скилл · EnzeD · Claude Code, Codex, Cursor +3 · 1900 установок — Скилл подсказывает агенту, как собрать постобработку в React Three Fiber: блум по выбранным объектам, глубину резкости, SSAO.
- [game-audio](https://affpapa.org/nevibecode/skills/game-audio.md) — скилл · OpusGameLabs · Claude Code, Codex, Cursor +3 · 1300 установок — Генерирует процедурную фоновую музыку и звуковые эффекты для браузерных игр через Web Audio API.
- [shape](https://affpapa.org/nevibecode/skills/shape.md) — скилл · educlopez · Claude Code, Codex, Cursor +3 · 867 установок — Скилл прогоняет экран через вайрфрейм-проход: ASCII-раскладка, список состояний, инвентарь контента и открытые вопросы — до первой строки кода.
- [foundry-hosted-agent-copilotkit](https://affpapa.org/nevibecode/skills/foundry-hosted-agent-copilotkit.md) — скилл (официальный GitHub) · github · GitHub Copilot · 29 установок — Помогает связать фронтенд React на CopilotKit с агентом Microsoft Agent Framework в Microsoft Foundry через протокол AG-UI.

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

## Уточнить
[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
