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

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

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

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

- [webflow-code-component:deploy-guide](https://affpapa.org/nevibecode/skills/webflow-code-componentdeploy-guide.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 987 установок — Скилл ведёт по шагам от проверок до публикации библиотеки кодовых компонентов в воркспейсе Webflow и подсказывает, как убедиться, что всё встало.
- [vercel-deployments](https://affpapa.org/nevibecode/skills/vercel-deployments.md) — скилл · devops-skills · Claude Code, Codex, Cursor +3 · 316 установок — Скилл для деплоя фронтенда и фулстек-приложений на Vercel: превью, edge-функции, переменные окружения и защита продакшена.
- [scaffold-nextjs](https://affpapa.org/nevibecode/skills/scaffold-nextjs.md) — скилл · mblode · Claude Code, Codex, Cursor +3 · 726 установок — Пошагово разворачивает монорепозиторий Turborepo с Next.js, Blode UI, Ultracite и деплоем на Vercel и GitHub.
- [vuetify-skilld](https://affpapa.org/nevibecode/skills/vuetify-skilld.md) — скилл · skilld-dev · Claude Code, Codex, Cursor +3 · 378 установок — Настраивает агента на разработку с Vuetify 4.x под Vue 3.
- [webflow-code-component:troubleshoot-deploy](https://affpapa.org/nevibecode/skills/webflow-code-componenttroubleshoot-deploy.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 977 установок — Разбирает сбои деплоя Webflow Code Components: читает сообщение об ошибке, находит причину и даёт конкретное исправление.
- [hig-components-layout](https://affpapa.org/nevibecode/skills/hig-components-layout.md) — скилл · raintree-technology · Claude Code, Codex, Cursor +3 · 684 установки — Скилл помогает спроектировать навигацию и вёрстку для приложений под платформы Apple по правилам Human Interface Guidelines.
- [hig-patterns](https://affpapa.org/nevibecode/skills/hig-patterns.md) — скилл · raintree-technology · Claude Code, Codex, Cursor +3 · 685 установок — Скилл с паттернами взаимодействия из Apple Human Interface Guidelines: онбординг, загрузка, модальные окна, уведомления, поиск.
- [js-performance-patterns](https://affpapa.org/nevibecode/skills/js-performance-patterns.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 687 установок — Набор паттернов микрооптимизации JavaScript для горячих путей.
- [meticulous-zero-diff-task](https://affpapa.org/nevibecode/skills/meticulous-zero-diff-task.md) — скилл · alwaysmeticulous · Claude Code, Codex, Cursor +3 · 4500 установок — Организует цикл рефакторинга и обновления библиотек с проверкой через Meticulous.
- [appbuilder-ui-scaffolder](https://affpapa.org/nevibecode/skills/appbuilder-ui-scaffolder.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 716 установок — Генерирует интерфейсы на React Spectrum для Adobe Experience Cloud Shell и расширений AEM.
- [motion](https://affpapa.org/nevibecode/skills/motion.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл по библиотеке Motion для React: подсказывает, как собрать drag-and-drop, scroll-анимации и переходы макета.
- [handover-developer](https://affpapa.org/nevibecode/skills/handover-developer.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 714 установок — Генерирует техническую документацию для разработчиков проекта на AEM Edge Delivery Services.
- [zod-schema-validation](https://affpapa.org/nevibecode/skills/zod-schema-validation.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл задаёт правила валидации данных через Zod и вывода типов TypeScript на границах системы: в API, формах и внешних ответах.
- [bootstrap](https://affpapa.org/nevibecode/skills/mindrally-bootstrap.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1200 установок — Задаёт агенту правила работы с Bootstrap: сетка, компоненты, утилиты и валидация форм.
- [css](https://affpapa.org/nevibecode/skills/css.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл задаёт агенту правила вёрстки: Flexbox, Grid, переменные, BEM и порядок в стилях.
- [modern-web-development](https://affpapa.org/nevibecode/skills/modern-web-development.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1200 установок — Набор правил для современного веб-стека: TypeScript, Next.js 14, React Server Components, Supabase, GraphQL и Tailwind CSS.
- [appbuilder-testing](https://affpapa.org/nevibecode/skills/appbuilder-testing.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 714 установок — Скилл генерирует и запускает Jest-тесты для экшенов Adobe App Builder и React-компонентов, включая моки Adobe SDK.
- [mastering-typescript](https://affpapa.org/nevibecode/skills/mastering-typescript.md) — скилл · Richard Hightower · Claude Code, Codex, Cursor +3 · 790 установок — Помогает писать строгий код на TypeScript 5.9+ и настраивать тулчейн для React 19 или NestJS 11.
- [block-kit](https://affpapa.org/nevibecode/skills/block-kit.md) — скилл · slackapi · Claude Code, Codex, Cursor +3 · 500 установок — Собирает и проверяет Block Kit JSON для сообщений, модалок и Home tab в Slack.
- [view-transitions](https://affpapa.org/nevibecode/skills/view-transitions.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 678 установок — Учит агента работать с View Transitions API: переходы между страницами и состояниями интерфейса браузер анимирует сам.
- [dt-setup-react-native](https://affpapa.org/nevibecode/skills/dt-setup-react-native.md) — скилл · Dynatrace · Claude Code, Codex, Cursor +3 · 868 установок — Пошагово настраивает плагин Dynatrace в проектах на React Native или Expo: правит конфиги Babel, подключает зависимости и проверяет параметры приватности.
- [guide-swiftui-charts](https://affpapa.org/nevibecode/skills/guide-swiftui-charts.md) — скилл · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 429 установок — Скилл-руководство по Swift Charts: метки, оси, выделение, стили, композиция, Chart3D и доступность.
- [color-mode-and-theme](https://affpapa.org/nevibecode/skills/color-mode-and-theme.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 926 установок — Помогает выбрать цветовую схему проекта, решить вопрос о поддержке тёмной темы и выстроить токены без сломанного контраста.
- [iphone-duo-react-native](https://affpapa.org/nevibecode/skills/iphone-duo-react-native.md) — скилл · mirzaaghazadeh · Claude Code, Codex, Cursor +3 · 432 установки — Скилл помогает адаптировать приложения на React Native и Expo под складной iPhone Duo: от асимметричных отступов до нативного модуля под iOS 27.1.
- [dt-setup-flutter](https://affpapa.org/nevibecode/skills/dt-setup-flutter.md) — скилл · Dynatrace · Claude Code, Codex, Cursor +3 · 860 установок — Пошагово подключает Dynatrace к проекту на Flutter: настраивает зависимости и генерирует нативные конфиги для мониторинга.
- [ui-density](https://affpapa.org/nevibecode/skills/ui-density.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 915 установок — Помогает подобрать плотность интерфейса под мобильные экраны, планшеты и десктоп.
- [hig-components-controls](https://affpapa.org/nevibecode/skills/hig-components-controls.md) — скилл · raintree-technology · Claude Code, Codex, Cursor +3 · 655 установок — Помогает выбрать правильные элементы ввода и переключатели по гайдлайнам Apple HIG.
- [vite-bundle-optimization](https://affpapa.org/nevibecode/skills/vite-bundle-optimization.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 667 установок — Скилл с паттернами оптимизации бандла и сборки в Vite + React.
- [reanimated-skia-performance](https://affpapa.org/nevibecode/skills/reanimated-skia-performance.md) — скилл · andreev-danila · Claude Code, Codex, Cursor +3 · 955 установок — Скилл для написания и разбора быстрых анимаций и 2D-графики в React Native на Reanimated v4 и Skia.
- [form-design](https://affpapa.org/nevibecode/skills/dembrandt-form-design.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 916 установок — Скилл для проектирования форм: подсказки под полем, плейсхолдеры, валидация и состояние кнопки отправки.
- [mobile-ux-optimizer](https://affpapa.org/nevibecode/skills/mobile-ux-optimizer.md) — скилл · curiositech · Claude Code, Codex, Cursor +3 · 498 установок — Скилл помогает адаптировать веб-интерфейсы под смартфоны: настраивает safe area, переводит вёрстку на dvh и увеличивает области клика под тач-экраны.
- [brand-visual-language](https://affpapa.org/nevibecode/skills/brand-visual-language.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 907 установок — Скилл помогает выбрать радиусы, шрифты и стиль иконок так, чтобы интерфейс читался как одна марка.
- [hig-components-dialogs](https://affpapa.org/nevibecode/skills/hig-components-dialogs.md) — скилл · raintree-technology · Claude Code, Codex, Cursor +3 · 647 установок — Скилл подсказывает правила Apple Human Interface Guidelines для модальных окон, алертов, шторок и полей ввода цифр.
- [odoo-17](https://affpapa.org/nevibecode/skills/odoo-17.md) — скилл · unclecatvn · Claude Code, Codex, Cursor +3 · 373 установки — Скилл-справочник по Odoo 17: модели и ORM, XML-вьюхи, OWL, QWeb-отчёты, права доступа, миграции.
- [hig-components-menus](https://affpapa.org/nevibecode/skills/hig-components-menus.md) — скилл · raintree-technology · Claude Code, Codex, Cursor +3 · 643 установки — Скилл помогает проектировать меню и кнопки для интерфейсов Apple по правилам Human Interface Guidelines.
- [semantic-html-and-seo](https://affpapa.org/nevibecode/skills/semantic-html-and-seo.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 901 установка — Скилл для ИИ-агента: подсказывает семантичную разметку HTML5, метатеги, alt-тексты и progressive enhancement.
- [hig-components-content](https://affpapa.org/nevibecode/skills/hig-components-content.md) — скилл · raintree-technology · Claude Code, Codex, Cursor +3 · 641 установка — Подсказывает правила Apple HIG по отображению контента: графикам, сеткам, веб-страницам и карточкам.
- [motion-and-storytelling](https://affpapa.org/nevibecode/skills/motion-and-storytelling.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 894 установки — Скилл для проектирования переходов, скролл-анимаций и онбординга.
- [typescript-react-patterns](https://affpapa.org/nevibecode/skills/typescript-react-patterns.md) — скилл · agent-skills · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл с 33 правилами типизации React на TypeScript: пропсы, хуки, события, refs, дженерики и контекст.
- [apple-ui-designer](https://affpapa.org/nevibecode/skills/apple-ui-designer.md) — скилл · heyman333 · Claude Code, Codex, Cursor +3 · 865 установок — Скилл перерабатывает экраны мобильных приложений под каноны Human Interface Guidelines от Apple.

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

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