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

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

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

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

- [expo-project-structure](https://affpapa.org/nevibecode/skills/expo-project-structure.md) — скилл · expo · Claude Code, Codex, Cursor +3 · 22000 установок — Скилл задаёт эталонную структуру папок для нового проекта на Expo Router.
- [emilkowalski-motion](https://affpapa.org/nevibecode/skills/emilkowalski-motion.md) — скилл · nexu-io · Claude Code, Codex, Cursor +3 · 2300 установок — Добавляет микровзаимодействия, переходы состояний и анимацию к готовому интерфейсу.
- [threejs-interaction](https://affpapa.org/nevibecode/skills/threejs-interaction.md) — скилл · CloudAI-X · Claude Code, Codex, Cursor +3 · 14300 установок — Скилл учит агента настраивать выбор объектов, перемещение по плоскости и управление камерой в three.js для WebGL и WebGPU.
- [antislop-human](https://affpapa.org/nevibecode/skills/antislop-human.md) — скилл · miqdadbadjuber · Claude Code, Codex, Cursor +3 · 5900 установок — Скилл для ИИ-агентов, который проверяет UI на доступность: контраст текста, фокус клавиатуры, состояния элементов.
- [expo-dom](https://affpapa.org/nevibecode/skills/expo-dom.md) — скилл · expo · Claude Code, Codex, Cursor +3 · 21000 установок — Запускает веб-код в webview на нативных платформах и рендерит как есть на вебе.
- [antislop-layoutmobile](https://affpapa.org/nevibecode/skills/antislop-layoutmobile.md) — скилл · miqdadbadjuber · Claude Code, Codex, Cursor +3 · 5700 установок — Скилл проверяет мобильную и адаптивную вёрстку: перенос колонок, брейкпоинты, размеры и переполнение.
- [threejs-postprocessing](https://affpapa.org/nevibecode/skills/threejs-postprocessing.md) — скилл · CloudAI-X · Claude Code, Codex, Cursor +3 · 13700 установок — Скилл добавляет в Three.js цепочки постобработки: bloom, глубину резкости, ambient occlusion и пользовательские экранные шейдеры.
- [streamdown](https://affpapa.org/nevibecode/skills/streamdown.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 3200 установок — Рендерит Markdown в React-компонентах с поддержкой потокового вывода от ИИ-агентов, подсветкой синтаксиса Shiki, диаграммами Mermaid и формулами KaTeX.
- [threejs-lighting](https://affpapa.org/nevibecode/skills/threejs-lighting.md) — скилл · CloudAI-X · Claude Code, Codex, Cursor +3 · 13300 установок — Скилл содержит правила настройки света, теней и физических единиц в Three.js r186.
- [vue-options-api-best-practices](https://affpapa.org/nevibecode/skills/vue-options-api-best-practices.md) — скилл · github.com/vuejs-ai · Claude Code, Codex, Cursor +3 · 11600 установок — Помогает писать компоненты Vue 3 в стиле Options API и разбирать типичные ошибки с TypeScript, методами и хуками жизненного цикла.
- [conversion-tracking](https://affpapa.org/nevibecode/skills/conversion-tracking.md) — скилл · coreyhaines31 · Claude Code, Codex, Cursor +3 · 3400 установок — Скилл настраивает и проверяет отслеживание конверсий в рекламе и аналитике.
- [expo-app-clip](https://affpapa.org/nevibecode/skills/expo-app-clip.md) — скилл · expo · Claude Code, Codex, Cursor +3 · 19800 установок — Добавляет iOS App Clip к проекту на Expo — лёгкую версию приложения, которая запускается по URL без установки из App Store.
- [expo-web-to-native](https://affpapa.org/nevibecode/skills/expo-web-to-native.md) — скилл · expo · Claude Code, Codex, Cursor +3 · 19600 установок — Помогает перенести существующее React-приложение с веба в нативное iOS/Android-приложение на Expo.
- [claude-design](https://affpapa.org/nevibecode/skills/badtechbandit-claude-design.md) — скилл · BadTechBandit · Claude Code, Codex, Cursor +3 · 645 установок — Скилл для сборки HTML-артефактов — лендингов, прототипов, деков — в Claude Code, Codex и Cursor.
- [threejs-loaders](https://affpapa.org/nevibecode/skills/threejs-loaders.md) — скилл · CloudAI-X · Claude Code, Codex, Cursor +3 · 12900 установок — Скилл обучает ИИ загружать 3D-модели glTF, текстуры и HDR-карты в three.js r186.
- [threejs-textures](https://affpapa.org/nevibecode/skills/threejs-textures.md) — скилл · CloudAI-X · Claude Code, Codex, Cursor +3 · 12600 установок — Скилл помогает настраивать загрузку изображений, цветовые пространства и типы текстур в Three.js r186.
- [uncodixfy](https://affpapa.org/nevibecode/skills/uncodixfy.md) — скилл · cyxzdev · Claude Code, Codex, Cursor +3 · 5600 установок — Учит агента не генерировать типичный «кодексовый» интерфейс: без градиентов, плавающих панелей и декоративных заголовков.
- [ui-ux-pro-max](https://affpapa.org/nevibecode/skills/athevon-ui-ux-pro-max.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 948 установок — Подбирает дизайн-системы, палитры и шрифтовые пары под стек и тип продукта через локальную базу правил.
- [building-components](https://affpapa.org/nevibecode/skills/building-components.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 14700 установок — Помогает проектировать доступные UI-компоненты, их API, темы и документацию.
- [create-design-md](https://affpapa.org/nevibecode/skills/create-design-md.md) — скилл · ibelick · Claude Code, Codex, Cursor +3 · 4400 установок — Генерирует и обновляет файл DESIGN.md на основе репозитория или открытого сайта.
- [debugging-streamlit](https://affpapa.org/nevibecode/skills/debugging-streamlit.md) — скилл · streamlit · Claude Code, Codex, Cursor +3 · 493 установки — Скилл запускает отладку приложений и компонентов Streamlit через команду make debug с горячей перезагрузкой, сбором логов и скриншотами через Playwright.
- [design-dna](https://affpapa.org/nevibecode/skills/design-dna.md) — скилл · zanwei · Claude Code, Codex, Cursor +3 · 6500 установок — Разбирает референсы на токены, стиль и визуальные эффекты, затем применяет профиль к макету.
- [image-to-code](https://affpapa.org/nevibecode/skills/nexu-io-image-to-code.md) — скилл · nexu-io · Claude Code, Codex, Cursor +3 · 1800 установок — Скилл для задач, где важна картинка: сначала сам генерирует дизайн-макеты, разбирает их, потом пишет фронтенд по этим референсам.
- [gpt-taste](https://affpapa.org/nevibecode/skills/gpt-taste.md) — скилл · nexu-io · Claude Code, Codex, Cursor +3 · 1800 установок — Задаёт правила вёрстки лендингов: убирает шаблонные сетки, ограничивает длину H1 двумя строками и добавляет анимации на GSAP.
- [redesign-existing-projects](https://affpapa.org/nevibecode/skills/redesign-existing-projects.md) — скилл · nexu-io · Claude Code, Codex, Cursor +3 · 1900 установок — Аудитирует существующий интерфейс и точечно перерабатывает сайт или приложение, сохраняя рабочую логику.
- [export-download-debugging](https://affpapa.org/nevibecode/skills/export-download-debugging.md) — скилл · nexu-io · Claude Code, Codex, Cursor +3 · 1800 установок — Помогает находить и чинить ошибки выгрузки файлов в браузерах и Electron, когда сохраняются пустые файлы в 0 КБ.
- [ui-ux-designer](https://affpapa.org/nevibecode/skills/ui-ux-designer.md) — скилл · sickn33 · Claude Code, Codex, Cursor +3 · 3100 установок — Скилл помогает проектировать интерфейсы, пользовательские потоки и дизайн-системы с учётом исследований и доступности.
- [expo-design-system](https://affpapa.org/nevibecode/skills/expo-design-system.md) — скилл · expo · Claude Code, Codex, Cursor +3 · 16700 установок — Помогает выстроить дизайн-систему в приложении на Expo: организовать токены, вынести общие компоненты и убрать расхождения в стилях.
- [p5js](https://affpapa.org/nevibecode/skills/p5js.md) — скилл · SHL0MS, Hermes Agent · Claude Code, Codex, Cursor +3 · 535 установок — Создаёт браузерные скетчи на p5.js: генеративное искусство, интерактивные визуализации, 3D-сцены с WebGL, audio-reactive графика.
- [minimalist-ui](https://affpapa.org/nevibecode/skills/leonxlnx-minimalist-ui.md) — скилл · Leonxlnx · Claude Code, Codex, Cursor +3 · 395 установок — Задаёт правила минималистичного редакционного интерфейса с палитрой тёплого монохрома и сетками бенто.
- [industrial-brutalist-ui](https://affpapa.org/nevibecode/skills/industrial-brutalist-ui.md) — скилл · nexu-io · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл задаёт жёсткие правила визуального стиля для дашбордов, портфолио и редакционных сайтов.
- [design-taste-frontend-v1](https://affpapa.org/nevibecode/skills/design-taste-frontend-v1.md) — скилл · nexu-io · Claude Code, Codex, Cursor +3 · 1700 установок — Оригинальная первая версия скилла с жёсткими правилами вёрстки для React и Next.js.
- [imagegen-frontend-mobile](https://affpapa.org/nevibecode/skills/imagegen-frontend-mobile.md) — скилл · nexu-io · Claude Code, Codex, Cursor +3 · 1700 установок — Генерирует premium mobile-экраны и флоу для iOS, Android и кросс-платформы с чистой иерархией, читаемым текстом и контролируемой палитрой.
- [imagegen-frontend-web](https://affpapa.org/nevibecode/skills/imagegen-frontend-web.md) — скилл · nexu-io · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл задаёт арт-дирекшн для генерации референсов веб-дизайна.
- [angular-new-app](https://affpapa.org/nevibecode/skills/angular-new-app.md) — скилл · Angular Team @ Google · Claude Code, Codex, Cursor +3 · 19300 установок — Скилл для быстрого создания нового Angular-приложения с помощью Angular CLI.
- [design-md](https://affpapa.org/nevibecode/skills/hermes-agent-design-md.md) — скилл · Hermes Agent · Claude Code, Codex, Cursor +3 · 523 установки — Скилл помогает создавать и проверять спецификации DESIGN.md с токенами дизайна, а затем экспортировать их в форматы Tailwind и W3C DTCG.
- [ce-test-browser](https://affpapa.org/nevibecode/skills/ce-test-browser.md) — скилл · EveryInc · Claude Code, Codex, Cursor +3 · 3000 установок — Запускает браузерные тесты для страниц, затронутых текущей веткой или pull request.
- [react-expert](https://affpapa.org/nevibecode/skills/reactjs-react-expert.md) — скилл · reactjs · Claude Code, Codex, Cursor +3 · 1300 установок — Исследует API и концепции React по исходникам, тестам и пуллреквестам фреймворка.
- [chatgpt-app-builder](https://affpapa.org/nevibecode/skills/chatgpt-app-builder.md) — скилл · alpic-ai · Claude Code, Codex, Cursor +3 · 7100 установок — Ведёт по всему циклу создания плагина ChatGPT: от идеи до публикации.
- [seo-review](https://affpapa.org/nevibecode/skills/seo-review.md) — скилл · leonardomso · Claude Code, Codex, Cursor +3 · 644 установки — Проводит SEO-аудит обучающих страниц по JavaScript и проверяет шансы попасть в блоки с ответами поисковиков.

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

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