# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 27 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=27 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [clerk-tanstack-patterns](https://affpapa.org/nevibecode/skills/clerk-tanstack-patterns.md) — скилл · clerk · Claude Code, Codex, Cursor +3 · 15500 установок — Подсказывает агенту, как подключить Clerk к TanStack React Start: защита маршрутов, createServerFn, лоадеры и middleware. - [compose-focus-navigation](https://affpapa.org/nevibecode/skills/compose-focus-navigation.md) — скилл · chrisbanes · Claude Code, Codex, Cursor +3 · 1900 установок — Скилл помогает писать и проверять навигацию фокуса в Jetpack Compose для TV, клавиатуры и D-pad. - [experience-ui-bundle-agentforce-client-generate](https://affpapa.org/nevibecode/skills/experience-ui-bundle-agentforce-client-generate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 5000 установок — Встраивает клиент Agentforce Conversation в React и Angular UI Bundle: находит нужный пакет, проверяет agentId и подключает компонент на страницу. - [experience-ui-bundle-site-generate](https://affpapa.org/nevibecode/skills/experience-ui-bundle-site-generate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 5000 установок — Создаёт метаданные Digital Experience Site для хостинга React UI bundles в Salesforce. - [pixijs-scene-gif](https://affpapa.org/nevibecode/skills/pixijs-scene-gif.md) — скилл · pixijs · Claude Code, Codex, Cursor +3 · 5600 установок — Обучает агента загружать и воспроизводить анимации GIF в PixiJS v8 через GifSprite и GifSource. - [tailwind-theme-builder](https://affpapa.org/nevibecode/skills/tailwind-theme-builder.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 3200 установок — Скилл настраивает тему Tailwind v4 с shadcn/ui и тёмным режимом: ставит зависимости, связывает CSS-переменные через @theme inline, подключает переключатель темы. - [color-palette](https://affpapa.org/nevibecode/skills/color-palette.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 3200 установок — Скилл строит полную цветовую систему из одного брендового hex: 11 оттенков, семантические токены, тёмная тема и проверка контраста по WCAG. - [critique-information-density](https://affpapa.org/nevibecode/skills/critique-information-density.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл разбирает готовый экран по плотности информации: когнитивная нагрузка, приоритеты контента, паттерны сканирования и постепенное раскрытие. - [doherty-threshold](https://affpapa.org/nevibecode/skills/doherty-threshold.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл задаёт пороги отклика для интерфейсов и подсказывает, какую обратную связь показать во время ожидания. - [millers-law](https://affpapa.org/nevibecode/skills/millers-law.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 установок — Разбивает интерфейс на смысловые группы примерно по четыре элемента под ограничения рабочей памяти. - [von-restorff-effect](https://affpapa.org/nevibecode/skills/von-restorff-effect.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл учит агента выделять главное целевое действие в интерфейсе за счёт эффекта изоляции. - [hicks-law](https://affpapa.org/nevibecode/skills/hicks-law.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл применяет закон Хика: время решения растёт с числом одновременных вариантов. - [fitts-law](https://affpapa.org/nevibecode/skills/fitts-law.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл для ИИ-агента, который подсказывает размеры и расположение кнопок по закону Фиттса. - [readable-measure](https://affpapa.org/nevibecode/skills/readable-measure.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 установок — Задаёт оптимальную длину строки текста для экранов и брейкпоинтов. - [localization-design](https://affpapa.org/nevibecode/skills/localization-design.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 установок — Помогает проектировать интерфейсы для разных языков, направлений письма и культурных норм до появления переводов. - [law-of-common-region](https://affpapa.org/nevibecode/skills/law-of-common-region.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл по гештальт-принципу общей области: подсказывает, когда объединять элементы рамкой, фоном или карточкой, а не одним отступом. - [law-of-proximity](https://affpapa.org/nevibecode/skills/law-of-proximity.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1800 установок — Применяет закон близости в интерфейсах: расстояния показывают связь элементов без рамок и подписей. - [search-ux](https://affpapa.org/nevibecode/skills/search-ux.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1800 установок — Помогает агенту проектировать поиск: ввод запроса, подсказки, фильтры, выдача и пустой результат. - [onboarding-design](https://affpapa.org/nevibecode/skills/onboarding-design.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1800 установок — Помогает спроектировать первый сеанс пользователя: путь к активации и сценарии пустых экранов. - [pixijs-accessibility](https://affpapa.org/nevibecode/skills/pixijs-accessibility.md) — скилл · pixijs · Claude Code, Codex, Cursor +3 · 5500 установок — Скилл настраивает поддержку скринридеров и навигацию с клавиатуры в PixiJS v8 через оверлей shadow DOM. - [claude-design](https://affpapa.org/nevibecode/skills/claude-design.md) — скилл · jiji262 · Claude Code, Codex, Cursor +3 · 2200 установок — Скилл для генерации дизайн-артефактов в HTML: лендинги, слайды, прототипы, постеры и вайрфреймы. - [perf-lighthouse](https://affpapa.org/nevibecode/skills/perf-lighthouse.md) — скилл · tech-leads-club · Claude Code, Codex, Cursor +3 · 321 установка — Скилл запускает аудит Lighthouse через консоль или Node API, считывает метрики и настраивает бюджеты производительности. - [i18n-expert](https://affpapa.org/nevibecode/skills/i18n-expert.md) — скилл · daymade · Claude Code, Codex, Cursor +3 · 2700 установок — Настраивает и проверяет локализацию интерфейса: заменяет строки ключами, сверяет локали и форматирование. - [swiftui-webkit](https://affpapa.org/nevibecode/skills/swiftui-webkit.md) — скилл · dpearson2699 · Claude Code, Codex, Cursor +3 · 3200 установок — Справочник по нативным компонентам WebView и WebPage в SwiftUI для iOS 26+. - [jury](https://affpapa.org/nevibecode/skills/jury.md) — скилл · juliobsz · Claude Code, Codex, Cursor +3 · 911 установок — Снимает скриншоты всех типов страниц, замеряет LCP, CLS, FPS и доступность, потом отдельный критик выставляет баллы и список правок. - [omnistudio-flexcard-generate](https://affpapa.org/nevibecode/skills/omnistudio-flexcard-generate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 4800 установок — Генерирует и валидирует интерфейсные карточки OmniStudio FlexCard для Salesforce Industries по шкале из 130 баллов. - [omnistudio-omniscript-generate](https://affpapa.org/nevibecode/skills/omnistudio-omniscript-generate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 4800 установок — Скилл создаёт и проверяет OmniScripts для многошаговых процессов с Integration Procedures и Data Mappers. - [compose-animations](https://affpapa.org/nevibecode/skills/compose-animations.md) — скилл · chrisbanes · Claude Code, Codex, Cursor +3 · 1800 установок — Помогает выбирать и ревьюить анимации в Jetpack Compose под разные сценарии движения. - [clerk-swift](https://affpapa.org/nevibecode/skills/clerk-swift.md) — скилл · clerk · Claude Code, Codex, Cursor +3 · 14500 установок — Собирает экраны входа Clerk в нативных приложениях iOS и macOS: готовые вью ClerkKitUI или свои сценарии на ClerkKit. - [browser-tools](https://affpapa.org/nevibecode/skills/browser-tools.md) — скилл · badlogic · Claude Code, Codex, Cursor +3 · 465 установок — Скилл подключает агент к Chrome через Chrome DevTools Protocol для навигации, проверки интерфейсов и работы с динамическими страницами. - [pixijs-migration-v8](https://affpapa.org/nevibecode/skills/pixijs-migration-v8.md) — скилл · pixijs · Claude Code, Codex, Cursor +3 · 5300 установок — Скилл проводит код PixiJS с v7 на v8 и ищет типичные поломки после обновления. - [clerk-chrome-extension-patterns](https://affpapa.org/nevibecode/skills/clerk-chrome-extension-patterns.md) — скилл · clerk · Claude Code, Codex, Cursor +3 · 14400 установок — Набор инструкций по интеграции @clerk/chrome-extension в браузерные расширения. - [mobile-platform-offline-validate](https://affpapa.org/nevibecode/skills/mobile-platform-offline-validate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 4700 установок — Проверяет компоненты LWC на совместимость с офлайн-режимом Komaci в Salesforce Mobile App Plus. - [mobile-platform-native-capabilities-integrate](https://affpapa.org/nevibecode/skills/mobile-platform-native-capabilities-integrate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 4700 установок — Помогает собрать Salesforce LWC с нативными функциями мобильного устройства: сканированием, геолокацией, NFC и платежами. - [pencilkit](https://affpapa.org/nevibecode/skills/pencilkit.md) — скилл · dpearson2699 · Claude Code, Codex, Cursor +3 · 3100 установок — Помогает настроить рисование через PencilKit в Swift, настроить инструменты PKToolPicker и сохранить штрихи. - [clerk-astro-patterns](https://affpapa.org/nevibecode/skills/clerk-astro-patterns.md) — скилл · clerk · Claude Code, Codex, Cursor +3 · 14300 установок — Подсказывает агенту, как подключить Clerk к Astro: middleware, защита SSR-страниц, авторизация в API-роутах и островных компонентах. - [prototype-prompt-generator](https://affpapa.org/nevibecode/skills/prototype-prompt-generator.md) — скилл · stellarlinkco · Claude Code, Codex, Cursor +3 · 393 установки — Скилл превращает требования к интерфейсу в подробный технический промпт для генерации HTML, CSS или React-прототипов. - [critique-color](https://affpapa.org/nevibecode/skills/critique-color.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл разбирает цветовую схему одного экрана: измеряет контрастность текста и кнопок, проверяет палитру на лишние hex-значения и следит за доступностью интерфейса. - [add-read-aloud](https://affpapa.org/nevibecode/skills/add-read-aloud.md) — скилл · cursor · Claude Code, Codex, Cursor +3 · 320 установок — Добавляет в существующее приложение озвучку ответов и других текстов через Grok Text to Speech. - [add-voice](https://affpapa.org/nevibecode/skills/add-voice.md) — скилл · cursor · Claude Code, Codex, Cursor +3 · 319 установок — Добавляет в приложение голосовой диалог Grok с передачей речи в обе стороны. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=28 ## Уточнить [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