# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 3 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=3 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [brag](https://affpapa.org/nevibecode/skills/brag.md) — скилл · latent-spaces · Claude Code, Codex, Cursor +3 · 20300 установок — Делает короткий проморолик о проекте по его исходному коду с помощью Hyperframes. - [make-interfaces-feel-better](https://affpapa.org/nevibecode/skills/make-interfaces-feel-better.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 73400 установок — Скилл помогает доводить детали интерфейса: от радиусов и иконок до анимаций. - [find-docs](https://affpapa.org/nevibecode/skills/find-docs.md) — скилл · upstash · Claude Code, Codex, Cursor +3 · 9400 установок — Тянет актуальную документацию, справочники API и примеры кода для любой библиотеки через Context7 CLI. - [baoyu-markdown-to-html](https://affpapa.org/nevibecode/skills/baoyu-markdown-to-html.md) — скилл · JimLiu · Claude Code, Codex, Cursor +3 · 32200 установок — Переводит Markdown в HTML с инлайн-CSS и темами под WeChat. - [interface-design](https://affpapa.org/nevibecode/skills/interface-design.md) — скилл · Dammyjay93 · Claude Code, Codex, Cursor +3 · 30800 установок — Скилл помогает проектировать и проверять интерфейсы продуктов: дашборды, админки, SaaS-приложения и инструменты. - [taste-design](https://affpapa.org/nevibecode/skills/taste-design.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 20200 установок — Скилл формирует файл DESIGN.md для Google Stitch, задавая строгие дизайн-правила против шаблонных интерфейсов. - [html-ppt](https://affpapa.org/nevibecode/skills/html-ppt.md) — скилл · lewislulu · Claude Code, Codex, Cursor +3 · 20900 установок — Скилл создаёт слайдовые презентации в статическом HTML на основе тем и шаблонов. - [baoyu-compress-image](https://affpapa.org/nevibecode/skills/baoyu-compress-image.md) — скилл · JimLiu · Claude Code, Codex, Cursor +3 · 28200 установок — Сжимает изображения в WebP или PNG через системные утилиты вроде sips и cwebp. - [tailwind-design-system](https://affpapa.org/nevibecode/skills/tailwind-design-system.md) — скилл · Seth Hobson · Claude Code, Codex, Cursor · 70180 установок — Помогает строить дизайн-системы на Tailwind CSS v4. - [react-doctor](https://affpapa.org/nevibecode/skills/react-doctor.md) — скилл · millionco · Claude Code, Codex, Cursor +3 · 19200 установок — Проверяет кодовую базу на React: находит проблемы архитектуры, доступности и рендеринга. - [frost-sequence-camera-orbit](https://affpapa.org/nevibecode/skills/frost-sequence-camera-orbit.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 10000 установок — Скилл собирает 22.5-секундную сцену: камера облетает ледяной логотип, он рассыпается, собирается в два текста и растворяется. - [orbit-card](https://affpapa.org/nevibecode/skills/orbit-card.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 10000 установок — Скилл для встраивания готового 10-секундного 3D-блока HyperFrames: карточка фичи облетает сферу из точек по траектории камеры из Blender. - [canopy-part-title](https://affpapa.org/nevibecode/skills/canopy-part-title.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 10000 установок — Блок HyperFrames, в котором плотный слой листьев пролетает через кадр, расходится и открывает заголовок. - [code-slice-hero](https://affpapa.org/nevibecode/skills/code-slice-hero.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 10000 установок — Анимирует смену заголовка сеткой плиток с переворотом ячеек через WebGL 2 и Canvas 2D. - [glass-shard-title](https://affpapa.org/nevibecode/skills/glass-shard-title.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 10000 установок — Собирает заголовок из осколков стекла: они летят сквозь туман, поворачиваются и складываются в буквы. - [cuboid-carousel](https://affpapa.org/nevibecode/skills/cuboid-carousel.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 10000 установок — Скилл собирает 3D-карусель из скруглённых параллелепипедов с контентом: они влетают справа, едут волной и уходят влево. - [accessibility](https://affpapa.org/nevibecode/skills/web-quality-skills-accessibility.md) — скилл · web-quality-skills · Claude Code, Codex, Cursor +3 · 64100 установок — Скилл проводит аудит доступности веб-страницы и подсказывает, что исправить в исходниках. - [chrome-devtools](https://affpapa.org/nevibecode/skills/chromedevtools-chrome-devtools.md) — скилл · ChromeDevTools · Claude Code, Codex, Cursor +3 · 8600 установок — Скилл подключает Chrome DevTools через MCP для отладки страниц, браузерной автоматизации, анализа производительности и сетевых запросов. - [nuxt-ui](https://affpapa.org/nevibecode/skills/nuxt-ui.md) — скилл · nuxt · Claude Code, Codex, Cursor +3 · 19800 установок — Помогает агенту собирать интерфейсы на базе @nuxt/ui v4, настраивать темы Tailwind CSS и правильно выбирать компоненты библиотеки. - [figma-implement-design](https://affpapa.org/nevibecode/skills/openai-figma-implement-design.md) — скилл (официальный OpenAI) · openai · Claude Code, Codex, Cursor +3 · 6700 установок — Скилл переводит макеты Figma в код интерфейса с сохранением структуры, токенов и визуального вида. - [bmad-agent-ux-designer](https://affpapa.org/nevibecode/skills/bmad-agent-ux-designer.md) — скилл · bmad-code-org · Claude Code, Codex, Cursor +3 · 11800 установок — Подключает к проекту субагента Sally для проектирования пользовательского опыта и подготовки UX-спецификаций. - [bmad-ux](https://affpapa.org/nevibecode/skills/bmad-ux.md) — скилл · bmad-code-org · Claude Code, Codex, Cursor +3 · 11600 установок — Фиксирует видение интерфейса в файлах DESIGN.md и EXPERIENCE.md. - [frontend-patterns](https://affpapa.org/nevibecode/skills/frontend-patterns.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 5900 установок — Скилл подсказывает паттерны для React и Next.js: компоненты, состояние, загрузка данных и производительность. - [web-perf](https://affpapa.org/nevibecode/skills/cloudflare-web-perf.md) — скилл · cloudflare · Claude Code, Codex, Cursor +3 · 110200 установок — Пошаговый аудит Core Web Vitals, диагностика медленной загрузки и поиск блокирующих скриптов прямо в терминале. - [imagegen](https://affpapa.org/nevibecode/skills/imagegen.md) — скилл (официальный OpenAI) · openai · Claude Code, Codex, Cursor +3 · 5700 установок — Скилл создаёт и редактирует растровые изображения: иллюстрации, текстуры, спрайты и мокапы. - [playground](https://affpapa.org/nevibecode/skills/playground.md) — скилл (официальный Anthropic) · Anthropic · Claude Code · 7967 установок — Создаёт интерактивные HTML-песочницы с настройками, предпросмотром и готовым промптом. - [app-store-screenshots](https://affpapa.org/nevibecode/skills/parthjadhav-app-store-screenshots.md) — скилл · ParthJadhav · Claude Code, Codex, Cursor +3 · 15000 установок — Собирает редактор на Next.js и ShadCN, в котором вы верстаете и выгружаете скриншоты для App Store и Google Play. - [playwright-interactive](https://affpapa.org/nevibecode/skills/playwright-interactive.md) — скилл (официальный OpenAI) · openai · Claude Code, Codex, Cursor +3 · 5500 установок — Сохраняет сессию Playwright для отладки локальных веб- и Electron-приложений. - [chrome-devtools-cli](https://affpapa.org/nevibecode/skills/chrome-devtools-cli.md) — скилл · ChromeDevTools · Claude Code, Codex, Cursor +3 · 6800 установок — Позволяет агенту управлять браузером через Chrome DevTools: кликать по элементам, собирать снимки памяти и профилировать производительность прямо из терминала. - [better-ui](https://affpapa.org/nevibecode/skills/better-ui.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 39300 установок — Скилл задаёт точные правила для радиусов, теней, иконок и анимаций интерфейса. - [lavish](https://affpapa.org/nevibecode/skills/lavish.md) — скилл · Kun Chen (kunchenguid) · Claude Code, Codex, Cursor +3 · 22900 установок — Превращает планы, сравнения и отчёты агента в HTML-файлы для просмотра, аннотаций и обратной связи. - [frontend-slides](https://affpapa.org/nevibecode/skills/frontend-slides.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 5500 установок — Скилл создаёт анимационные HTML-презентации с нуля и преобразует PPT/PPTX в веб-слайды. - [web-design-engineer](https://affpapa.org/nevibecode/skills/web-design-engineer.md) — скилл · ConardLi · Claude Code, Codex, Cursor +3 · 8700 установок — Скилл настраивает агента на вёрстку веб-интерфейсов на HTML, CSS, JavaScript и React: дашбордов, прототипов и анимаций. - [frontend-design-direction](https://affpapa.org/nevibecode/skills/frontend-design-direction.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 5300 установок — Скилл задаёт направление для веб-интерфейсов: помогает продумать и проверить визуальную иерархию, состояния, адаптивность и доступность. - [fixing-motion-performance](https://affpapa.org/nevibecode/skills/fixing-motion-performance.md) — скилл · ibelick · Claude Code, Codex, Cursor +3 · 26900 установок — Скилл находит и устраняет просадки FPS в анимациях: скролл-эффектах, размытиях и перерисовках макета. - [liquid-glass-design](https://affpapa.org/nevibecode/skills/liquid-glass-design.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 5200 установок — Скилл для Claude и других ИИ-редакторов: подсказывает агенту, как собрать интерфейс в стиле Liquid Glass из iOS 26. - [stitch::generate-design](https://affpapa.org/nevibecode/skills/stitchgenerate-design.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10800 установок — Скилл превращает текстовое описание или картинку в готовый экран интерфейса через Stitch MCP, а потом правит его точечными промптами. - [accessibility](https://affpapa.org/nevibecode/skills/affaan-m-accessibility.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 5100 установок — Проверяет и настраивает доступность интерфейсов по стандарту WCAG 2.2 Level AA для Web, iOS и Android. - [build-dashboard](https://affpapa.org/nevibecode/skills/anthropics-build-dashboard.md) — скилл (официальный Anthropic) · anthropics · Claude Code, Codex, Cursor +3 · 9100 установок — Генерирует автономный HTML-дашборд с графиками Chart.js, карточками KPI и таблицами. - [stitch::extract-design-md](https://affpapa.org/nevibecode/skills/stitchextract-design-md.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10600 установок — Извлекает дизайн-систему в файл DESIGN.md прямо из исходников фронтенда без сборки проекта. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=4 ## Уточнить [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