# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 34 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=34 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [playwright-e2e-testing](https://affpapa.org/nevibecode/skills/playwright-e2e-testing.md) — скилл · fugazi · Claude Code, Codex, Cursor +3 · 615 установок — Скилл для написания и поддержки E2E-тестов на Playwright с TypeScript: пользовательские сценарии, формы, авторизация, моки и визуальные сравнения. - [web-frameworks](https://affpapa.org/nevibecode/skills/web-frameworks.md) — скилл · mrgoonie · Claude Code, Codex, Cursor +3 · 372 установки — Скилл-группа для фуллстек-разработки: подсказывает агенту, как собирать приложения на Next.js, монорепозитории на Turborepo и подключать иконки RemixIcon. - [fire-paper-loader](https://affpapa.org/nevibecode/skills/fire-paper-loader.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 319 установок — Создаёт прелоадер в виде горящей бумаги на WebGL 1 и OffscreenCanvas. - [shopify-theme-optimization](https://affpapa.org/nevibecode/skills/shopify-theme-optimization.md) — скилл · nexscope-ai · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл разбирает скорость и UX темы Shopify: Core Web Vitals, Liquid, загрузку картинок, мобильную вёрстку. - [brand-visual-generator](https://affpapa.org/nevibecode/skills/brand-visual-generator.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл помогает задать или проверить визуальную айдентику: шрифты, палитру, отступы, дизайн-токены и эстетику фронтенда. - [nextjs-react-typescript](https://affpapa.org/nevibecode/skills/nextjs-react-typescript.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 5200 установок — Скилл задаёт стиль кода для Next.js App Router, React, TypeScript, Shadcn UI и Tailwind. - [design-loop](https://affpapa.org/nevibecode/skills/design-loop.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл ведёт цикл: читает задачу из файла-эстафеты, генерирует страницу в HTML/Tailwind, встраивает её в сайт и пишет следующую задачу. - [macos-notch-ui](https://affpapa.org/nevibecode/skills/macos-notch-ui.md) — скилл · fayazara · Claude Code, Codex, Cursor +3 · 557 установок — Скилл помогает добавить в приложение macOS панель, которая раскрывается от выреза экрана. - [tailwind-css](https://affpapa.org/nevibecode/skills/tailwind-css.md) — скилл · PaulRBerg · Claude Code, Codex, Cursor +3 · 3000 установок — Задаёт правила стилизации Tailwind CSS: запрещает ломать вёрстку старых версий синтаксисом v4, требует проверку сборки и инспекцию DOM. - [yyl-remotion-video](https://affpapa.org/nevibecode/skills/yyl-remotion-video.md) — скилл · ttfake92-lab · Claude Code, Codex, Cursor +3 · 503 установки — Превращает статью, сценарий или заметки в проект Remotion и рендерит mp4. - [ui-components](https://affpapa.org/nevibecode/skills/ui-components.md) — скилл · OrchestKit · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл задаёт правила разработки интерфейсов на базе shadcn/ui и Radix Primitives. - [nuxt-i18n](https://affpapa.org/nevibecode/skills/nuxt-i18n.md) — скилл · onmax · Claude Code, Codex, Cursor +3 · 589 установок — Скилл для ИИ-агента, который помогает настроить локали, маршруты и SEO в Nuxt-приложении через @nuxtjs/i18n. - [playwright-core](https://affpapa.org/nevibecode/skills/playwright-core.md) — скилл · testdino-hq · Claude Code, Codex, Cursor +3 · 778 установок — Скилл даёт готовые паттерны Playwright для сквозных тестов, API и моков в проектах на TypeScript и JavaScript. - [ui-craft-dense-dashboard](https://affpapa.org/nevibecode/skills/ui-craft-dense-dashboard.md) — скилл · educlopez · Claude Code, Codex, Cursor +3 · 1200 установок — Задаёт агенту стиль для админок и аналитических панелей: плотная сетка, моноширинные числа, семантические цвета. - [uni-app](https://affpapa.org/nevibecode/skills/uni-app.md) — скилл · FlippeDround · Claude Code, Codex, Cursor +3 · 2000 установок — Скилл-справочник по uni-app: подсказывает агенту компоненты, API и правила сборки под iOS, Android, HarmonyOS, веб и мини-программы. - [design](https://affpapa.org/nevibecode/skills/rshankras-design.md) — скилл · rshankras · Claude Code, Codex, Cursor +3 · 677 установок — Набор дизайн-скиллов для интерфейсов Apple: Liquid Glass, анимации, игровой отклик, UX-тексты, SF Symbols и типографика. - [zustand-patterns](https://affpapa.org/nevibecode/skills/zustand-patterns.md) — скилл · OrchestKit · Claude Code, Codex, Cursor +3 · 1400 установок — Справочник по управлению состоянием на Zustand 5.x: слайсы, middleware, Immer, useShallow, персистентность и devtools. - [odoo-18](https://affpapa.org/nevibecode/skills/odoo-18.md) — скилл · unclecatvn · Claude Code, Codex, Cursor +3 · 1500 установок — Справочник по разработке модулей под Odoo 18 для ИИ-агентов. - [astro-framework](https://affpapa.org/nevibecode/skills/astro-framework.md) — скилл · delineas · Claude Code, Codex, Cursor +3 · 2200 установок — Скилл для ИИ-агента, который разбирается в islands architecture, гидратации и Content Layer API. - [react-pdf](https://affpapa.org/nevibecode/skills/molefrog-react-pdf.md) — скилл · molefrog · Claude Code, Codex, Cursor +3 · 751 установка — Генерирует PDF-документы через библиотеку @react-pdf/renderer. - [om-ux-setup](https://affpapa.org/nevibecode/skills/om-ux-setup.md) — скилл · open-mercato · Claude Code, Codex, Cursor +3 · 2500 установок — Собирает дизайн-систему вашего репозитория в .uxproof/, чтобы UX-скиллы судили код по вашим правилам, а не по встроенным. - [om-ux-review-pr](https://affpapa.org/nevibecode/skills/om-ux-review-pr.md) — скилл · open-mercato · Claude Code, Codex, Cursor +3 · 2600 установок — Скилл проверяет интерфейс в браузере по изменениям ветки или пулл-реквеста и находит ошибки взаимодействия. - [nextjs-seo](https://affpapa.org/nevibecode/skills/nextjs-seo.md) — скилл · laguagu · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл помогает настраивать SEO в Next.js App Router и проверять сайт по данным production. - [mantine-form](https://affpapa.org/nevibecode/skills/mantine-form.md) — скилл · mantinedev · Claude Code, Codex, Cursor +3 · 2700 установок — Скилл для сборки форм на @mantine/form: валидация, схемы zod и valibot, вложенные поля и массивы. - [open-graph](https://affpapa.org/nevibecode/skills/open-graph.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл настраивает и проверяет теги Open Graph для превью в соцсетях. - [sentry-svelte-sdk](https://affpapa.org/nevibecode/skills/sentry-svelte-sdk.md) — скилл · getsentry · Claude Code, Codex, Cursor +3 · 2100 установок — Скилл проводит агента через полную настройку Sentry в Svelte и SvelteKit: сканирует проект, предлагает набор функций и пишет конфиги. - [sap-fiori-guidelines](https://affpapa.org/nevibecode/skills/sap-fiori-guidelines.md) — скилл · SAP · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл подкладывает агенту официальные правила дизайн-системы SAP Fiori: кнопки, формы, таблицы, страницы, цвета, доступность и паттерны Joule. - [motion-dev-animations](https://affpapa.org/nevibecode/skills/motion-dev-animations.md) — скилл · Motion Dev Standards · Claude Code, Codex, Cursor +3 · 594 установки — Генерирует GPU-анимации на Motion.dev для React, Next.js, Svelte и Astro. - [ue-ui-umg-slate](https://affpapa.org/nevibecode/skills/ue-ui-umg-slate.md) — скилл · quodsoler · Claude Code, Codex, Cursor +3 · 1400 установок — Помогает писать и чинить интерфейсы Unreal Engine 5.8 на C++: UMG, Slate, экраны Common UI и вьюмодели MVVM. - [navigation-menu-generator](https://affpapa.org/nevibecode/skills/navigation-menu-generator.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1100 установок — Служебный скилл для обратной совместимости при сборке навигационного меню. - [favicon-generator](https://affpapa.org/nevibecode/skills/favicon-generator.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1100 установок — Помогает собрать favicon и иконки приложений: размеры, форматы, теги в HTML и требования Google Search. - [affiliate-page-generator](https://affpapa.org/nevibecode/skills/affiliate-page-generator.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1100 установок — Устаревшая запись совместимости для создания страниц партнёрских программ. - [mobile-friendly](https://affpapa.org/nevibecode/skills/mobile-friendly.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1100 установок — Разбирает мобильную версию сайта: viewport, размер шрифта, зоны нажатия, паритет контента с десктопом. - [twitter-cards](https://affpapa.org/nevibecode/skills/twitter-cards.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1100 установок — Настраивает мета-теги карточек Twitter и X для корректного отображения ссылок в ленте. - [core-web-vitals](https://affpapa.org/nevibecode/skills/kostja94-core-web-vitals.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл помогает находить и исправлять проблемы LCP, INP и CLS. - [image-optimization](https://affpapa.org/nevibecode/skills/image-optimization.md) — скилл · kostja94 · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл помогает настроить адаптивные изображения, WebP и разметку для поиска Google. - [miniprogram-development](https://affpapa.org/nevibecode/skills/miniprogram-development.md) — скилл · TencentCloudBase · Claude Code, Codex, Cursor +3 · 4400 установок — Помогает создавать, отлаживать, тестировать и публиковать мини-приложения WeChat. - [lynx-devtool](https://affpapa.org/nevibecode/skills/lynx-devtool.md) — скилл · lynx-community · Claude Code, Codex, Cursor +3 · 6200 установок — Помогает отлаживать приложения Lynx на Android, iOS и Desktop через CLI agent-lynx. - [react-hook-form](https://affpapa.org/nevibecode/skills/react-hook-form.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 3000 установок — Оптимизирует клиентские формы на React Hook Form 7.82.0 и защищает от лишних ререндеров при подписках на поля, валидации и интеграции UI-библиотек. - [sentry-tanstack-start-sdk](https://affpapa.org/nevibecode/skills/sentry-tanstack-start-sdk.md) — скилл · getsentry · Claude Code, Codex, Cursor +3 · 1900 установок — Пошагово настраивает Sentry в проектах на TanStack Start React. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=35 ## Уточнить [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