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

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

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

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

- [accessibility-scan](https://affpapa.org/nevibecode/skills/accessibility-scan.md) — скилл · AccessLint · Claude Code, Codex, Cursor +3 · 1000 установок — Проверяет одну открытую страницу на механически обнаруживаемые нарушения WCAG 2.2 и собирает список проблем с привязкой к DOM.
- [stop-describing-ui](https://affpapa.org/nevibecode/skills/stop-describing-ui.md) — скилл · artouc · Claude Code, Codex, Cursor +3 · 717 установок — Скилл вычищает пояснительный текст из UI: заголовки, пустые состояния, подписи кнопок, подсказки и онбординг.
- [verifying-in-browser](https://affpapa.org/nevibecode/skills/verifying-in-browser.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 540 установок — После правок в коде запускает dev-сервер, открывает приложение в браузере и проверяет рендер, ошибки консоли и сетевые запросы.
- [using-ui-stack](https://affpapa.org/nevibecode/skills/using-ui-stack.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 539 установок — Заставляет агента строить интерфейс по фиксированным правилам: сетка 8px, цвета 60-30-10, типографика, тёмная тема и состояния интерактивных элементов.
- [qt-figma-token-extraction](https://affpapa.org/nevibecode/skills/qt-figma-token-extraction.md) — скилл · qt-ai-skills · Claude Code, Codex, Cursor +3 · 439 установок — Достаёт переменные, текстовые стили и токены из файла Figma и превращает их в design-tokens.json и готовые QML-синглтоны с общим Theme.
- [ios-liquid-glass](https://affpapa.org/nevibecode/skills/ios-liquid-glass.md) — скилл · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 803 установки — Справочник по API Liquid Glass из iOS 26+: модификаторы glassEffect, контейнеры, морфинг-переходы и навигация.
- [ui-design](https://affpapa.org/nevibecode/skills/frappe-ui-design.md) — скилл · frappe · Claude Code, Codex, Cursor +3 · 832 установки — Скилл задаёт агенту дизайнерские правила: сетка, типографика, цвет, отступы.
- [godot-ui-containers](https://affpapa.org/nevibecode/skills/godot-ui-containers.md) — скилл · thedivergentai · Claude Code, Codex, Cursor +3 · 507 установок — Скилл обучает ИИ-агента строить интерфейсы в Godot на узлах Container.
- [qt-figma-component-generation](https://affpapa.org/nevibecode/skills/qt-figma-component-generation.md) — скилл · qt-ai-skills · Claude Code, Codex, Cursor +3 · 437 установок — Читает компоненты Figma через MCP и пишет по ним QML-контролы на Qt Quick Controls 2.
- [pyqt6-ui-development-rules](https://affpapa.org/nevibecode/skills/pyqt6-ui-development-rules.md) — скилл · oimiragieo · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл задаёт правила для PyQt6-интерфейсов: разделение логики и UI, сигналы и слоты, фоновые задачи и компоновка.
- [expo-react-native-typescript](https://affpapa.org/nevibecode/skills/expo-react-native-typescript.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 2200 установок — Скилл задаёт агенту правила разработки мобильных приложений на Expo, React Native и TypeScript: структура файлов, навигация, состояние, тесты.
- [mapbox-style-patterns](https://affpapa.org/nevibecode/skills/mapbox-style-patterns.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 2300 установок — Готовые наборы слоёв и стилей Mapbox для типовых карт: поиск заведений, недвижимость, маршруты, доставка.
- [hig](https://affpapa.org/nevibecode/skills/hig.md) — скилл · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 786 установок — Локальный справочник Apple Human Interface Guidelines в Markdown для проверки размеров кнопок, Dynamic Type, терминологии и системных компонентов без выхода в сеть.
- [markstream-install](https://affpapa.org/nevibecode/skills/markstream-install.md) — скилл (официальный GitHub) · github · GitHub Copilot · 18 установок — Скилл помогает подключить стриминговый рендерер Markstream в веб-приложения на React, Vue, Svelte или Angular.
- [quasar-skilld](https://affpapa.org/nevibecode/skills/quasar-skilld.md) — скилл · skilld-dev · Claude Code, Codex, Cursor +3 · 657 установок — Скилл для работы с Quasar 2.33.1: помогает писать, настраивать и отлаживать код на Vue 3, опираясь на документацию, которая лежит внутри пакета.
- [tailwindcss-animations](https://affpapa.org/nevibecode/skills/tailwindcss-animations.md) — скилл · JosiahSiegel · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл по анимациям и переходам Tailwind CSS: встроенные утилиты, свои @keyframes, reduced-motion, Framer Motion.
- [game-playtest](https://affpapa.org/nevibecode/skills/game-playtest.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 62 установки — Направляет агента при тестировании браузерных игр и фронтенда.
- [netlify-config](https://affpapa.org/nevibecode/skills/netlify-config.md) — скилл · netlify · Claude Code, Codex, Cursor +3 · 3300 установок — Настраивает сборку и маршрутизацию в Netlify через netlify.toml, _redirects и _headers.
- [accessibility-diff](https://affpapa.org/nevibecode/skills/accessibility-diff.md) — скилл · AccessLint · Claude Code, Codex, Cursor +3 · 947 установок — Сравнивает нарушения доступности на живой странице до и после ваших правок.
- [sapui5](https://affpapa.org/nevibecode/skills/sapui5.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 697 установок — Скилл для ИИ-агентов, который помогает писать приложения на SAP UI5: XML-вью, контроллеры, привязка данных, OData и тесты.
- [no-use-effect](https://affpapa.org/nevibecode/skills/alejandrobailo-no-use-effect.md) — скилл · alejandrobailo · Claude Code, Codex, Cursor +3 · 729 установок — Запрещает прямой вызов useEffect в коде на React и React Native, заменяя его вычисляемым состоянием, обработчиками событий и кастомными хуками.
- [airflow-plugins](https://affpapa.org/nevibecode/skills/airflow-plugins.md) — скилл · astronomer · Claude Code, Codex, Cursor +3 · 594 установки — Скилл помогает писать плагины Airflow 3.1+ с FastAPI-эндпоинтами, React-страницами и своими вкладками прямо в UI.
- [ui-design-system](https://affpapa.org/nevibecode/skills/samhvw8-ui-design-system.md) — скилл · samhvw8 · Claude Code, Codex, Cursor +3 · 3200 установок — Скилл для сборки и разбора React-интерфейсов на TailwindCSS, Radix UI и shadcn/ui.
- [sapui5-linter](https://affpapa.org/nevibecode/skills/sapui5-linter.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 685 установок — Скилл помогает запускать UI5 Linter, настраивать правила и разбирать найденные проблемы в приложениях SAPUI5 и OpenUI5.
- [ai-assisted-prototyping](https://affpapa.org/nevibecode/skills/ai-assisted-prototyping.md) — скилл · RefoundAI · Claude Code, Codex, Cursor +3 · 354 установки — Помогает создавать работающие прототипы продуктов по текстовым описаниям и макетам.
- [netlify-frameworks](https://affpapa.org/nevibecode/skills/netlify-frameworks.md) — скилл · netlify · Claude Code, Codex, Cursor +3 · 3200 установок — Скилл подсказывает агенту настройки сборки, SSR-адаптеры и переменные окружения для деплоя веб-фреймворков на Netlify.
- [appkit-interop](https://affpapa.org/nevibecode/skills/appkit-interop.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 60 установок — Помогает встроить AppKit в SwiftUI-проекты для macOS через компактные мосты.
- [design-style-picker](https://affpapa.org/nevibecode/skills/design-style-picker.md) — скилл · daymade · Claude Code, Codex, Cursor +3 · 342 установки — Генерирует пачку вариантов визуального стиля и даёт выбрать нужный по изображениям, а не по описанию.
- [storybook-story-writing](https://affpapa.org/nevibecode/skills/storybook-story-writing.md) — скилл · TheBushidoCollective · Claude Code, Codex, Cursor +3 · 673 установки — Пишет и правит истории Storybook для компонентов: формат CSF3, все состояния компонента, сборка без ошибок.
- [astro-seo](https://affpapa.org/nevibecode/skills/astro-seo.md) — скилл · jdevalk · Claude Code, Codex, Cursor +3 · 500 установок — Скилл проверяет SEO-настройки сайта на Astro и предлагает правки в коде.
- [sap-btp-build-work-zone-advanced](https://affpapa.org/nevibecode/skills/sap-btp-build-work-zone-advanced.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 674 установки — Помогает настраивать рабочие пространства в SAP Build Work Zone, advanced edition и создавать карточки UI Integration Cards.
- [frontend-design](https://affpapa.org/nevibecode/skills/agent-skills-frontend-design.md) — скилл · agent-skills · Claude Code, Codex, Cursor +3 · 2300 установок — Аудит существующего CSS, извлечение токенов и генерация палитр, типографики и компонентов.
- [writing-tests](https://affpapa.org/nevibecode/skills/writing-tests.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 499 установок — Анализирует исходный код, определяет тестовый раннер и пишет юнит- или интеграционные тесты с моками и граничными случаями.
- [lottie-animation](https://affpapa.org/nevibecode/skills/lottie-animation.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2100 установок — Помогает агенту подключить анимацию из After Effects, управлять воспроизведением и перекрашивать её во время работы приложения.
- [electron-builder](https://affpapa.org/nevibecode/skills/electron-builder.md) — скилл · pedronauck · Claude Code, Codex, Cursor +3 · 392 установки — Настраивает сборку десктопных приложений на Electron под Windows, macOS и Linux.
- [wireframe-prototyping](https://affpapa.org/nevibecode/skills/wireframe-prototyping.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл помогает набросать каркас интерфейса и собрать прототип до того, как начнётся разработка.
- [frontend-session-rca](https://affpapa.org/nevibecode/skills/frontend-session-rca.md) — скилл · grafana · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл разбирает одну сессию реального пользователя из Grafana Frontend Observability: что случилось, какие ошибки, в каком порядке и что с этим делать.
- [markdown](https://affpapa.org/nevibecode/skills/markdown.md) — скилл · assistant-ui · Claude Code, Codex, Cursor +3 · 4300 установок — Готовит агенту точную схему подключения markdown-рендера в assistant-ui: какой компонент выбрать, как подсветить код, вывести формулы и диаграммы.
- [next-best-practices](https://affpapa.org/nevibecode/skills/next-best-practices.md) — скилл · pedronauck · Claude Code, Codex, Cursor +3 · 383 установки — Скилл с набором правил Next.js: файловые конвенции, границы RSC, async API, метаданные, обработка ошибок.
- [netlify-forms](https://affpapa.org/nevibecode/skills/netlify-forms.md) — скилл · netlify · Claude Code, Codex, Cursor +3 · 3100 установок — Скилл для работы с серверлес-формами на Netlify: разметка, AJAX-отправка, защита от спама, уведомления.

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

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