# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 29 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=29 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [antv-g2-chart](https://affpapa.org/nevibecode/skills/antv-g2-chart.md) — скилл · antvis · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл помогает создавать и настраивать визуализации на G2 v5, а также разбирать ошибки и переход с V4. - [axiom-swiftui](https://affpapa.org/nevibecode/skills/axiom-swiftui.md) — скилл · CharlesWiltgen · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл для работы с SwiftUI: разбирает вёрстку, навигацию, анимации, жесты и просадки производительности по конкретным симптомам. - [storefront-best-practices](https://affpapa.org/nevibecode/skills/storefront-best-practices.md) — скилл · medusajs · Claude Code, Codex, Cursor +3 · 4600 установок — Скилл задаёт правила для разработки витрин интернет-магазина: от карточек товаров до корзины и оформления заказа. - [design-review](https://affpapa.org/nevibecode/skills/plugin87-design-review.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 594 установки — Скилл оценивает интерфейс по шести взвешенным критериям, прогоняет эвристики Нильсена и выдаёт таблицу находок по приоритету. - [rams](https://affpapa.org/nevibecode/skills/rams.md) — скилл · brianlovin · Claude Code, Codex, Cursor +3 · 3000 установок — Проверяет компоненты интерфейса на соответствие стандарту WCAG 2.1 и находит дефекты вёрстки. - [building-admin-dashboard-customizations](https://affpapa.org/nevibecode/skills/building-admin-dashboard-customizations.md) — скилл · medusajs · Claude Code, Codex, Cursor +3 · 4400 установок — Скилл обучает агента настраивать интерфейс панели Medusa: собирать виджеты, кастомные страницы и таблицы. - [Frontend Responsive Design Standards](https://affpapa.org/nevibecode/skills/frontend-responsive-design-standards.md) — скилл · am-will · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл задаёт агенту правила mobile-first вёрстки: брейкпоинты, относительные единицы, тач-цели и приоритет контента на мобильных. - [favicon-gen](https://affpapa.org/nevibecode/skills/favicon-gen.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 2200 установок — Скилл создаёт набор иконок для сайта и PWA из логотипа, монограммы или фирменных цветов. - [ui-ux](https://affpapa.org/nevibecode/skills/ui-ux.md) — скилл · evondev · Claude Code, Codex, Cursor +3 · 884 установки — Скилл для ИИ-кодинга, который ведёт агента по дизайн-процессу: сначала бриф и 2–3 вайрфрейма, потом код. - [a11y-audit](https://affpapa.org/nevibecode/skills/plugin87-a11y-audit.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 550 установок — Проверяет интерфейс на соответствие стандартам WCAG 2.2 и ARIA. - [frontend-design-deslop](https://affpapa.org/nevibecode/skills/frontend-design-deslop.md) — скилл · samber · Claude Code, Codex, Cursor +3 · 4800 установок — Скилл для ИИ-кодинга, который уводит интерфейс от типового вида, который выдают модели по умолчанию: типографика, цвет, токены, тёмная тема. - [building-storefronts](https://affpapa.org/nevibecode/skills/building-storefronts.md) — скилл · medusajs · Claude Code, Codex, Cursor +3 · 4200 установок — Скилл для разработки витрины на Medusa: подсказывает, как вызывать API через SDK и React Query, чтобы не сломать запросы. - [sentry](https://affpapa.org/nevibecode/skills/brianlovin-sentry.md) — скилл · brianlovin · Claude Code, Codex, Cursor +3 · 2800 установок — Даёт агенту правила Sentry для отслеживания ошибок и трассировки производительности в Next.js. - [react-doctor](https://affpapa.org/nevibecode/skills/brianlovin-react-doctor.md) — скилл · brianlovin · Claude Code, Codex, Cursor +3 · 2800 установок — Скилл прогоняет React-кодовую базу по 47+ правилам и выдаёт оценку от 0 до 100 с указанием файлов и строк. - [bun](https://affpapa.org/nevibecode/skills/bun.md) — скилл · brianlovin · Claude Code, Codex, Cursor +3 · 2800 установок — Переключает агента на среду Bun вместо привычных Node.js и npm. - [favicon](https://affpapa.org/nevibecode/skills/favicon.md) — скилл · brianlovin · Claude Code, Codex, Cursor +3 · 2800 установок — Создаёт набор фавиконов из исходного изображения, обновляет манифест и HTML проекта. - [design-tokens](https://affpapa.org/nevibecode/skills/plugin87-design-tokens.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 538 установок — Скилл создаёт и проверяет дизайн-токены в формате DTCG. - [redesign](https://affpapa.org/nevibecode/skills/redesign.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 535 установок — Скилл проверяет существующий интерфейс и поэтапно обновляет его, сохраняя работающие функции. - [mvvm-toolkit-di](https://affpapa.org/nevibecode/skills/mvvm-toolkit-di.md) — скилл (официальный GitHub) · github · GitHub Copilot · 92 установки — Помогает связать ViewModels из CommunityToolkit.Mvvm с контейнером Microsoft.Extensions.DependencyInjection в проектах на WPF, WinUI 3, .NET MAUI, Uno и Avalonia. - [apply-aesthetic](https://affpapa.org/nevibecode/skills/apply-aesthetic.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 529 установок — Скилл выбирает визуальное направление — архетип или именную дизайн-систему — и переводит его в токены вашего проекта. - [experience-ui-bundle-project-generate](https://affpapa.org/nevibecode/skills/experience-ui-bundle-project-generate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 3200 установок — Генерирует готовый к разработке проект Salesforce UI bundle из шаблона через Salesforce CLI. - [platform-lightning-type-widget-coordinate](https://affpapa.org/nevibecode/skills/platform-lightning-type-widget-coordinate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 3200 установок — Координирует создание Apex-backed Lightning Type и HXL-виджета. - [design-code](https://affpapa.org/nevibecode/skills/design-code.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 525 установок — Скилл помогает агенту собирать код компонентов и экранов под выбранный фреймворк. - [shopify-liquid-themes](https://affpapa.org/nevibecode/skills/shopify-liquid-themes.md) — скилл · benjaminsehl · Claude Code, Codex, Cursor +3 · 3600 установок — Помогает агенту писать файлы .liquid для тем Shopify: секции, блоки, сниппеты со схемой и переводами. - [platform-conventions](https://affpapa.org/nevibecode/skills/platform-conventions.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл разбирает, какие паттерны интерфейса диктует iOS, какие Android, и где их стоит свести к общему виду. - [law-of-continuity](https://affpapa.org/nevibecode/skills/law-of-continuity.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл про закон непрерывности: выравнивание, стрелки и линии задают путь, по которому глаз идёт по интерфейсу. - [law-of-closure](https://affpapa.org/nevibecode/skills/law-of-closure.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 установок — Учит агента строить интерфейс на подразумеваемых границах: убирать лишние рамки, рисовать иконки из минимальных подсказок и опираться на негативное пространство. - [law-of-figure-ground](https://affpapa.org/nevibecode/skills/law-of-figure-ground.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл разбирает, какой слой интерфейса читается как передний план, а какой как фон, и помогает задать это отношение осознанно. - [law-of-similarity](https://affpapa.org/nevibecode/skills/law-of-similarity.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 установок — Помогает выстроить визуальные связи между элементами интерфейса через форму, цвет и размер. - [design-component](https://affpapa.org/nevibecode/skills/design-component.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 522 установки — Создаёт спецификацию UI-компонента с анатомией, 8 состояниями, токенами и доступностью. - [playwriter](https://affpapa.org/nevibecode/skills/brianlovin-playwriter.md) — скилл · brianlovin · Claude Code, Codex, Cursor +3 · 2700 установок — Скилл подключает агента к уже открытому окну Chrome через Playwriter CLI. - [mvvm-toolkit](https://affpapa.org/nevibecode/skills/mvvm-toolkit.md) — скилл (официальный GitHub) · github · GitHub Copilot · 89 установок — Помогает писать модели представлений, команды и валидацию для CommunityToolkit.Mvvm в WPF, MAUI или Avalonia. - [design-qa](https://affpapa.org/nevibecode/skills/plugin87-design-qa.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 516 установок — Скилл настраивает проверки токенов, контраста, доступности и визуальных регрессий. - [vitest-midscene-e2e](https://affpapa.org/nevibecode/skills/vitest-midscene-e2e.md) — скилл · web-infra-dev · Claude Code, Codex, Cursor +3 · 2100 установок — Скилл объединяет Vitest и Midscene для создания E2E-тестов на естественном языке под Web, Android и iOS. - [chrome-extension](https://affpapa.org/nevibecode/skills/chrome-extension.md) — скилл · samber · Claude Code, Codex, Cursor +3 · 4500 установок — Помогает создавать и дорабатывать Chrome-расширения на Manifest V3. - [brandkit](https://affpapa.org/nevibecode/skills/plugin87-brandkit.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 510 установок — По краткому описанию продукта скилл собирает дизайн-токены для светлой и тёмной темы и проверяет контраст. - [aesthetic](https://affpapa.org/nevibecode/skills/aesthetic.md) — скилл · mrgoonie · Claude Code, Codex, Cursor +3 · 714 установок — Скилл для ИИ-агента, который помогает проектировать интерфейсы: разбирает чужие макеты, генерирует варианты дизайна и доводит их до внятного вида. - [triage-frontend-issues](https://affpapa.org/nevibecode/skills/triage-frontend-issues.md) — скилл · getsentry · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл разбирает новые issue в проекте sentry/javascript: архивирует шум и оставляет настоящие баги человеку. - [ui-designer](https://affpapa.org/nevibecode/skills/daymade-ui-designer.md) — скилл · daymade · Claude Code, Codex, Cursor +3 · 1600 установок — Извлекает дизайн-систему из скриншотов интерфейса и готовит промпт для реализации UI в React. - [crxjs](https://affpapa.org/nevibecode/skills/crxjs.md) — скилл · samber · Claude Code, Codex, Cursor +3 · 4300 установок — Скилл для разработки Chrome-расширений на CRXJS: подсказывает, как настроить настоящий HMR для popup, content scripts и side panel. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=30 ## Уточнить [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