# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 47 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=47 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [msw](https://affpapa.org/nevibecode/skills/msw.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 842 установки — Скилл с 45 правилами по MSW v2: настройка, хендлеры, интеграция с тестами, GraphQL. - [hig-components-status](https://affpapa.org/nevibecode/skills/hig-components-status.md) — скилл · raintree-technology · Claude Code, Codex, Cursor +3 · 636 установок — Скилл передаёт агенту правила Apple HIG по индикаторам загрузки и строке состояния. - [fal-redesign](https://affpapa.org/nevibecode/skills/fal-redesign.md) — скилл · fal-ai-community · Claude Code, Codex, Cursor +3 · 394 установки — Скилл создаёт визуальный редизайн существующего сайта или генерирует макет с нуля через fal.ai, выдавая готовый build-spec и токены. - [information-architecture](https://affpapa.org/nevibecode/skills/dembrandt-information-architecture.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 889 установок — Помогает разложить большой интерфейс по полочкам: как называть сущности, строить навигацию и подтверждать необратимые действия. - [modular-scale-typography](https://affpapa.org/nevibecode/skills/modular-scale-typography.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 884 установки — Строит гармоничную типографику на основе единого коэффициента. - [21st-registry](https://affpapa.org/nevibecode/skills/21st-registry.md) — скилл · 21st-dev · Claude Code, Codex, Cursor +3 · 1800 установок — Публикует React-компоненты, CSS-темы и шаблоны на 21st.dev и управляет уже опубликованным через CLI 21st. - [figma-generate-library](https://affpapa.org/nevibecode/skills/figma-generate-library.md) — скилл (официальный OpenAI) · Figma · Codex, ChatGPT · 32 установки — Скилл для построения профессиональной дизайн-системы в Figma на основе кодовой базы. - [algorithmic-color-palette](https://affpapa.org/nevibecode/skills/algorithmic-color-palette.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 887 установок — Скилл выводит полную UI-палитру из одной-двух брендовых красок: состояния, серые с оттенком бренда, семантические цвета. - [terminal-ui](https://affpapa.org/nevibecode/skills/terminal-ui.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 836 установок — Скилл с 42 правилами для терминальных интерфейсов на TypeScript: рендеринг, ввод с клавиатуры, промпты. - [hig-components-search](https://affpapa.org/nevibecode/skills/hig-components-search.md) — скилл · raintree-technology · Claude Code, Codex, Cursor +3 · 634 установки — Подсказывает агенту, как устроить поиск, пагинацию и хлебные крошки по гайдлайнам Apple. - [user-flows-and-guided-paths](https://affpapa.org/nevibecode/skills/user-flows-and-guided-paths.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 879 установок — Скилл помогает проектировать пошаговые сценарии, визарды, экраны онбординга и чекаута. - [webflow-mcp:accessibility-audit](https://affpapa.org/nevibecode/skills/webflow-mcpaccessibility-audit.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 887 установок — Проводит аудит доступности страниц Webflow по стандарту WCAG 2.1, находит ошибки интерактивных элементов и исправляет их без подключения к Designer. - [fal-regenerate-3d](https://affpapa.org/nevibecode/skills/fal-regenerate-3d.md) — скилл · fal-ai-community · Claude Code, Codex, Cursor +3 · 390 установок — Собирает интерактивную 3D-витрину персонажей на Three.js с анимациями, видеофонами и PBR-покрытием пола через модели fal.ai. - [design-system](https://affpapa.org/nevibecode/skills/design-system.md) — скилл · Alireza Rezvani · Claude Code · 33 установки — Настраивает фирменный стиль и проверяет контрастность по WCAG 2.2 AA для конвертеров markdown-html. - [responsive-paradigms](https://affpapa.org/nevibecode/skills/responsive-paradigms.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 875 установок — Задаёт для ИИ-агента правила адаптивной вёрстки: делит мобильные, планшетные и десктопные интерфейсы на разные парадигмы взаимодействия, а не просто масштабирует один макет. - [gestalt-ui-organisation](https://affpapa.org/nevibecode/skills/gestalt-ui-organisation.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 879 установок — Скилл раскладывает контролы по принципам гештальта, чтобы пользователь видел, что к чему относится, без чтения подписей. - [visual-emphasis-and-hierarchy](https://affpapa.org/nevibecode/skills/visual-emphasis-and-hierarchy.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 874 установки — Задаёт правила визуальной иерархии в интерфейсе: акценты на кнопках, контраст, отступы и выделение текста. - [wcag-accessibility](https://affpapa.org/nevibecode/skills/wcag-accessibility.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 873 установки — Скилл помогает проектировать и проверять интерфейсы по WCAG 2.2 AA. - [button-states](https://affpapa.org/nevibecode/skills/button-states.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 877 установок — Скилл описывает шесть состояний интерактивных элементов и выводит цвета hover и active из базового цвета по HSL. - [singleton-pattern](https://affpapa.org/nevibecode/skills/singleton-pattern.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 637 установок — Обучает реализации паттерна «Одиночка» в JavaScript и TypeScript для создания единого экземпляра класса. - [observer-pattern](https://affpapa.org/nevibecode/skills/observer-pattern.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 638 установок — Скилл объясняет паттерн наблюдателя и подсказывает агенту, как строить слабосвязанную подписку на события в JS и TS. - [spatie-javascript](https://affpapa.org/nevibecode/skills/spatie-javascript.md) — скилл · Spatie · Claude Code, Codex, Cursor +3 · 518 установок — Скилл внедряет стандарты оформления JavaScript и TypeScript от команды Spatie. - [component-family-consistency](https://affpapa.org/nevibecode/skills/component-family-consistency.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 874 установки — Скилл следит, чтобы кнопки, поля ввода, бейджи и пилюли делили радиус, цвета, тени, границы и отступы. - [loading-states-and-perceived-performance](https://affpapa.org/nevibecode/skills/loading-states-and-perceived-performance.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 871 установка — Скилл для ИИ-кодинга, который помогает выбрать спиннер, скелетон или прогресс-бар и сделать интерфейс быстрее на ощупь. - [generate-ui-from-brand](https://affpapa.org/nevibecode/skills/generate-ui-from-brand.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 870 установок — Превращает URL сайта или файл DESIGN.md в дизайн-токены, решения по UX и готовую спецификацию интерфейса. - [module-pattern](https://affpapa.org/nevibecode/skills/module-pattern.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 631 установка — Обучает ИИ-агента делить JavaScript и TypeScript на изолированные модули через ES2015. - [micro-interactions](https://affpapa.org/nevibecode/skills/dembrandt-micro-interactions.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 869 установок — Скилл для мелких осмысленных анимаций: переключатели, иконки, моменты успеха. - [databricks-app-design](https://affpapa.org/nevibecode/skills/databricks-app-design.md) — скилл · databricks · Claude Code, Codex, Cursor +3 · 315 установок — Помогает проектировать data-экраны Databricks Apps на AppKit/React. - [iphone-duo-flutter](https://affpapa.org/nevibecode/skills/iphone-duo-flutter.md) — скилл · mirzaaghazadeh · Claude Code, Codex, Cursor +3 · 402 установки — Помогает адаптировать приложение на Flutter под складной iPhone Duo. - [ui-design](https://affpapa.org/nevibecode/skills/pymodel-ui-design.md) — скилл · PyModel · Claude Code, Codex, Cursor +3 · 513 установок — Свод правил фронтенд-дизайна из 42 пунктов в 8 категориях. - [color-palette-extractor](https://affpapa.org/nevibecode/skills/color-palette-extractor.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 609 установок — Достаёт доминирующие цвета из картинки, скриншота или сайта и собирает из них палитру с проверкой контраста. - [html](https://affpapa.org/nevibecode/skills/mindrally-html.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл задаёт правила семантичной HTML-разметки, форм и доступности. - [playwright](https://affpapa.org/nevibecode/skills/mindrally-playwright.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл для автоматизации end-to-end тестов веб-приложений на TypeScript и JavaScript. - [ux-design](https://affpapa.org/nevibecode/skills/ux-design.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл задаёт агенту правила UX-проектирования: от исследования пользователей до доступности и адаптивной вёрстки. - [lottie](https://affpapa.org/nevibecode/skills/lottie.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1100 установок — Правила для ИИ-агента, который пишет Lottie-анимации на веб-страницах: формат dotLottie, ленивая загрузка, выбор рендерера и доступность. - [nextauth-authentication](https://affpapa.org/nevibecode/skills/nextauth-authentication.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл учит агента внедрять аутентификацию через NextAuth.js (Auth.js v5) в Next.js. - [status-colors-and-errors](https://affpapa.org/nevibecode/skills/status-colors-and-errors.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 859 установок — Скилл задаёт правила для семантических цветов статусов и текстов ошибок: сколько цветов держать, что каждый значит и как написать сообщение с выходом из ситуации. - [islands-architecture](https://affpapa.org/nevibecode/skills/islands-architecture.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 624 установки — Скилл объясняет паттерн островной архитектуры и частичной гидратации. - [elevation-and-depth](https://affpapa.org/nevibecode/skills/elevation-and-depth.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 854 установки — Задаёт правила для теней, скруглений и глубины интерфейса в CSS. - [sticky-and-fixed-elements](https://affpapa.org/nevibecode/skills/sticky-and-fixed-elements.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 855 установок — Помогает решить, что остаётся на экране при прокрутке: липкие заголовки, нижние панели, плавающие кнопки, закреплённые шапки таблиц. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=48 ## Уточнить [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