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

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

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

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

- [vscode-ext-localization](https://affpapa.org/nevibecode/skills/vscode-ext-localization.md) — скилл (официальный GitHub) · github · GitHub Copilot · 8900 установок — Помогает локализовать пользовательские тексты расширения VS Code.
- [figma-generate-library](https://affpapa.org/nevibecode/skills/openai-figma-generate-library.md) — скилл (официальный OpenAI) · openai · Claude Code, Codex, Cursor +3 · 2700 установок — Скилл для синхронизации дизайн-системы Figma с кодовой базой.
- [figma-code-connect-components](https://affpapa.org/nevibecode/skills/openai-figma-code-connect-components.md) — скилл (официальный OpenAI) · openai · Claude Code, Codex, Cursor +3 · 2700 установок — Связывает опубликованные компоненты из Figma с кодом проекта через Figma Code Connect.
- [power-apps-code-app-scaffold](https://affpapa.org/nevibecode/skills/power-apps-code-app-scaffold.md) — скилл (официальный GitHub) · github · GitHub Copilot · 8700 установок — Создаёт каркас Power Apps Code App с React и TypeScript.
- [mcp-create-adaptive-cards](https://affpapa.org/nevibecode/skills/mcp-create-adaptive-cards.md) — скилл (официальный GitHub) · github · GitHub Copilot · 8700 установок — Добавляет шаблоны Adaptive Cards в MCP API-плагины для визуального вывода данных в Microsoft 365 Copilot.
- [pnpm](https://affpapa.org/nevibecode/skills/pnpm.md) — скилл · Anthony Fu · Claude Code, Codex, Cursor +3 · 22400 установок — Скилл для работы с pnpm, менеджером пакетов Node.js со строгим разрешением зависимостей.
- [interface-review](https://affpapa.org/nevibecode/skills/interface-review.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 18500 установок — Проверяет ветки, пулл-реквесты и незакоммиченные правки на дефекты UI, вёрстки, типографики и доступности.
- [react-vite-dashboard](https://affpapa.org/nevibecode/skills/react-vite-dashboard.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 5500 установок — Скилл превращает макеты из Stitch в рабочий код дашборда на React и Vite.
- [flutter-apply-architecture-best-practices](https://affpapa.org/nevibecode/skills/flutter-apply-architecture-best-practices.md) — скилл · flutter · Claude Code, Codex, Cursor +3 · 43200 установок — Скилл раскладывает Flutter-приложение по слоям UI, Logic и Data.
- [responsive-design](https://affpapa.org/nevibecode/skills/responsive-design.md) — скилл · Seth Hobson · Claude Code, Codex, Cursor · 20956 установок — Помогает строить адаптивные интерфейсы с mobile-first стилями, container queries и fluid-значениями.
- [ui-ux-pro-max](https://affpapa.org/nevibecode/skills/nexu-io-ui-ux-pro-max.md) — скилл · nexu-io · Claude Code, Codex, Cursor +3 · 5400 установок — Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign.
- [flutter-build-responsive-layout](https://affpapa.org/nevibecode/skills/flutter-build-responsive-layout.md) — скилл · flutter · Claude Code, Codex, Cursor +3 · 42500 установок — Скилл обучает агента строить адаптивные интерфейсы Flutter под экраны телефонов и десктопов.
- [scroll-world](https://affpapa.org/nevibecode/skills/scroll-world.md) — скилл · oso95 · Claude Code, Codex, Cursor +3 · 4800 установок — Скилл собирает лендинг, где скролл управляет камерой: она влетает внутрь сцены и без склеек переходит к следующей.
- [baoyu-electron-extract](https://affpapa.org/nevibecode/skills/baoyu-electron-extract.md) — скилл · JimLiu · Claude Code, Codex, Cursor +3 · 7800 установок — Извлекает ресурсы и JavaScript из установленного Electron-приложения, восстанавливая исходники по картам кода.
- [firebase-hosting-basics](https://affpapa.org/nevibecode/skills/firebase-hosting-basics.md) — скилл · Google LLC · Claude Code, Codex, Cursor +3 · 170300 установок — Разворачивает статические сайты и SPA на Firebase Hosting CDN с SSL, preview-каналами и кастомными доменами.
- [opentui](https://affpapa.org/nevibecode/skills/anomalyco-opentui.md) — скилл · anomalyco · Claude Code, Codex, Cursor +3 · 3800 установок — Подключает к агенту справочную документацию OpenTUI: Core, React и Solid, компоненты, API приложений, тестирование и деплой.
- [flutter-fix-layout-issues](https://affpapa.org/nevibecode/skills/flutter-fix-layout-issues.md) — скилл · flutter · Claude Code, Codex, Cursor +3 · 39900 установок — Разбирает ошибки раскладки Flutter по тексту исключения: overflow, неограниченные constraints, неверный ParentData.
- [pinia](https://affpapa.org/nevibecode/skills/pinia.md) — скилл · Anthony Fu · Claude Code, Codex, Cursor +3 · 19700 установок — Скилл Pinia добавляет в Claude Code справку по официальной библиотеке управления состоянием Vue.
- [flutter-add-widget-test](https://affpapa.org/nevibecode/skills/flutter-add-widget-test.md) — скилл · flutter · Claude Code, Codex, Cursor +3 · 39200 установок — Скилл помогает писать компонентные тесты Flutter с помощью WidgetTester.
- [nextjs-on-cloudflare](https://affpapa.org/nevibecode/skills/nextjs-on-cloudflare.md) — скилл · cloudflare · Claude Code, Codex, Cursor +3 · 42800 установок — Скилл для развёртывания Next.js приложений на Cloudflare Workers через vinext.
- [vue-debug-guides](https://affpapa.org/nevibecode/skills/vue-debug-guides.md) — скилл · github.com/vuejs-ai · Claude Code, Codex, Cursor +3 · 26700 установок — Скилл для диагностики ошибок Vue 3: реактивность, watchers, компоненты, шаблоны и hydration.
- [frontend-design](https://affpapa.org/nevibecode/skills/nexu-io-frontend-design.md) — скилл · nexu-io · Claude Code, Codex, Cursor +3 · 4800 установок — Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов.
- [flutter-setup-declarative-routing](https://affpapa.org/nevibecode/skills/flutter-setup-declarative-routing.md) — скилл · flutter · Claude Code, Codex, Cursor +3 · 37800 установок — Настраивает декларативную маршрутизацию Flutter через go_router: маршруты по URL, вложенную навигацию и глубокие ссылки для веба и мобильных платформ.
- [flutter-add-widget-preview](https://affpapa.org/nevibecode/skills/flutter-add-widget-preview.md) — скилл · flutter · Claude Code, Codex, Cursor +3 · 36800 установок — Скилл учит агента создавать интерактивные превью виджетов во Flutter через package:flutter/widget_previews.dart.
- [flutter-setup-localization](https://affpapa.org/nevibecode/skills/flutter-setup-localization.md) — скилл · flutter · Claude Code, Codex, Cursor +3 · 36800 установок — Скилл автоматизирует инициализацию поддержки многоязычности в Flutter-проекте.
- [understand-figma](https://affpapa.org/nevibecode/skills/understand-figma.md) — скилл · Egonex-AI · Claude Code, Codex, Cursor +3 · 1800 установок — Скилл запрашивает макет через Figma REST API и строит интерактивный граф знаний дизайна с экранами, компонентами и токенами для локального дашборда.
- [transitions-polish](https://affpapa.org/nevibecode/skills/transitions-polish.md) — скилл · Jakubantalik · Claude Code, Codex, Cursor +3 · 10800 установок — Скилл проверяет уже существующие анимации и подбирает токены для времени, расстояния, масштаба, blur и easing.
- [guizang-social-card-skill](https://affpapa.org/nevibecode/skills/guizang-social-card-skill.md) — скилл · op7418 · Claude Code, Codex, Cursor +3 · 5200 установок — Собирает карусели и обложки для Xiaohongshu, WeChat и статей из текста, скриншотов или видео в стиле швейцарского дизайна и журнальной вёрстки.
- [variant](https://affpapa.org/nevibecode/skills/variant.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 14600 установок — Скилл собирает несколько заметно разных версий одного элемента интерфейса и показывает их на реальной странице.
- [explain-interface](https://affpapa.org/nevibecode/skills/explain-interface.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 14100 установок — Разбирает чужие веб-интерфейсы, анимации и визуальные эффекты по ссылке или скриншоту.
- [codegen](https://affpapa.org/nevibecode/skills/codegen.md) — скилл · vercel-labs · Claude Code, Codex, Cursor +3 · 8900 установок — Утилиты для генерации кода из json-render UI-деревьев.
- [design-handoff](https://affpapa.org/nevibecode/skills/design-handoff.md) — скилл (официальный Anthropic) · anthropics · Claude Code, Codex, Cursor +3 · 3500 установок — Скилл превращает макет или его описание в спецификацию для разработчиков: размеры, токены, состояния, брейкпоинты, краевые случаи.
- [interaction-design](https://affpapa.org/nevibecode/skills/interaction-design.md) — скилл · Seth Hobson · Claude Code, Codex, Cursor · 16146 установок — Скилл помогает проектировать микровзаимодействия, переходы и состояния обратной связи.
- [break](https://affpapa.org/nevibecode/skills/break.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 13700 установок — Скилл рендерит компонент во всех достижимых сценариях и отмечает видимые поломки.
- [design-system-patterns](https://affpapa.org/nevibecode/skills/design-system-patterns.md) — скилл · Seth Hobson · Claude Code, Codex, Cursor · 15953 установки — Помогает проектировать дизайн-токены, переключение тем и архитектуру библиотеки компонентов.
- [next](https://affpapa.org/nevibecode/skills/next.md) — скилл · vercel-labs · Claude Code, Codex, Cursor +3 · 8600 установок — Генерирует многостраничные приложения Next.js из спецификаций JSON.
- [unocss](https://affpapa.org/nevibecode/skills/unocss.md) — скилл · Anthony Fu · Claude Code, Codex, Cursor +3 · 16100 установок — Скилл даёт агенту справочник по UnoCSS: конфиг, правила, шорткаты, пресеты и трансформеры.
- [react-best-practices](https://affpapa.org/nevibecode/skills/mastra-ai-react-best-practices.md) — скилл · mastra-ai · Claude Code, Codex, Cursor +3 · 2800 установок — 27 правил производительности и качества React-кода, упорядоченных по приоритету: от устранения водопадов запросов до типизации.
- [react-native-design](https://affpapa.org/nevibecode/skills/react-native-design.md) — скилл · Seth Hobson · Claude Code, Codex, Cursor · 15522 установки — Скилл помогает собирать React Native-приложения со стилями, навигацией и анимациями Reanimated.
- [angular-developer](https://affpapa.org/nevibecode/skills/angular-developer.md) — скилл · Copyright 2026 Google LLC · Claude Code, Codex, Cursor +3 · 46200 установок — Генерирует Angular-код и подсказывает архитектурные решения для компонентов, сервисов, форм, маршрутизации и HTTP.

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

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