# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 1 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [frontend-design](https://affpapa.org/nevibecode/skills/frontend-design.md) — скилл (официальный Anthropic) · anthropics · Claude Code, Claude.ai · 1025790 установок — Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. - [design-taste-frontend](https://affpapa.org/nevibecode/skills/design-taste-frontend.md) — скилл · Leonxlnx · Claude Code, Codex, Cursor +3 · 678700 установок — Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. - [prototype](https://affpapa.org/nevibecode/skills/prototype.md) — скилл · Matt Pocock · Claude Code · 986201 установка — Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. - [hyperframes](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 1200000 установок — Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. - [hyperframes-cli](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes-cli.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 1300000 установок — Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. - [webapp-testing](https://affpapa.org/nevibecode/skills/webapp-testing.md) — скилл (официальный Anthropic) · anthropics · Claude Code, Claude.ai · 186758 установок — Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. - [hyperframes-registry](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes-registry.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 1000000 установок — Находит и добавляет в проект около 450 готовых визуальных блоков HyperFrames — от титров до шейдеров. - [ui-ux-pro-max](https://affpapa.org/nevibecode/skills/ui-ux-pro-max.md) — скилл · nextlevelbuilder · Claude Code, Codex, Cursor +3 · 417000 установок — Скилл подключает к агенту локальную базу из 119 UX-правил, 74 шрифтовых пар и 192 палитр. - [impeccable](https://affpapa.org/nevibecode/skills/impeccable.md) — скилл · pbakaus · Claude Code, Codex, Cursor +3 · 363400 установок — Скилл для ИИ-агента: проектирует и переделывает интерфейсы — лендинги, дашборды, формы, экраны iOS и Android. - [web-artifacts-builder](https://affpapa.org/nevibecode/skills/web-artifacts-builder.md) — скилл (официальный Anthropic) · anthropics · Claude Code, Claude.ai · 112122 установки — Скилл собирает сложные HTML-артефакты для claude.ai на React, Tailwind CSS и shadcn/ui. - [theme-factory](https://affpapa.org/nevibecode/skills/theme-factory.md) — скилл (официальный Anthropic) · anthropics · Claude Code, Claude.ai · 94921 установка — Применяет готовые цветовые палитры и пары шрифтов к слайдам, документам и HTML-страницам. - [algorithmic-art](https://affpapa.org/nevibecode/skills/algorithmic-art.md) — скилл (официальный Anthropic) · anthropics · Claude Code, Claude.ai · 89081 установка — Создаёт генеративное искусство на p5.js с seed-случайностью и настройкой параметров. - [remotion-to-hyperframes](https://affpapa.org/nevibecode/skills/remotion-to-hyperframes.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 510300 установок — Конвертирует код Remotion или видеофутажи в HyperFrames с покадровой проверкой оригинала через SSIM. - [shadcn](https://affpapa.org/nevibecode/skills/shadcn-ui-shadcn.md) — скилл · shadcn-ui · Claude Code, Codex, Cursor +3 · 123300 установок — Скилл ведёт агента по работе с shadcn/ui: добавляет компоненты, ищет в реестрах, чинит верстку и собирает дизайн-систему по вашему описанию. - [slideshow](https://affpapa.org/nevibecode/skills/slideshow.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 420300 установок — Собирает слайд-деку из сцен HyperFrames: фрагменты, ветвление по хотспотам и режим докладчика с заметками. - [figma](https://affpapa.org/nevibecode/skills/heygen-com-figma.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 334000 установок — Импортирует ассеты, токены бренда и компоненты из Figma в проект HyperFrames и собирает из кадров анимацию. - [vercel-composition-patterns](https://affpapa.org/nevibecode/skills/vercel-composition-patterns.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 418600 установок — Свод правил, по которым агент переводит React-компоненты с Boolean props на compound components и общий контекст. - [emil-design-eng](https://affpapa.org/nevibecode/skills/emil-design-eng.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 388200 установок — Скилл задаёт правила для полировки интерфейсов, компонентов и анимаций. - [vercel-react-native-skills](https://affpapa.org/nevibecode/skills/vercel-react-native-skills.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 255200 установок — Набор правил по React Native и Expo для ИИ-агента: списки, анимации, навигация. - [review-animations](https://affpapa.org/nevibecode/skills/review-animations.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 256500 установок — Проверяет код интерфейсных анимаций по принципам Эмиля Ковальски. - [apple-design](https://affpapa.org/nevibecode/skills/apple-design.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 244500 установок — Переносит принципы физического интерфейса Apple с докладов WWDC в веб на CSS, Pointer Events и Motion. - [animation-vocabulary](https://affpapa.org/nevibecode/skills/animation-vocabulary.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 239000 установок — Скилл подбирает точный термин для описанной веб-анимации. - [improve-animations](https://affpapa.org/nevibecode/skills/improve-animations.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 224200 установок — Скилл проводит ревизию анимаций в кодовой базе и составляет готовые планы доработок. - [find-animation-opportunities](https://affpapa.org/nevibecode/skills/find-animation-opportunities.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 208900 установок — Ищет в коде и интерфейсе места для уместной анимации, а лишние варианты отбрасывает. - [pick-ui-library](https://affpapa.org/nevibecode/skills/pick-ui-library.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 185400 установок — Скилл подбирает библиотеку под конкретную задачу фронтенда по списку Эмила Ковальски: тосты, графики, OTP-поля, виртуализация, drag and drop. - [turborepo](https://affpapa.org/nevibecode/skills/vercel-turborepo.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 84700 установок — Настраивает монорепозитории с Turborepo и чинит пайплайны задач. - [vercel-react-view-transitions](https://affpapa.org/nevibecode/skills/vercel-react-view-transitions.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 168100 установок — Скилл ведёт агента по нативным view transitions в React: переходы между страницами, общие элементы, появление и исчезновение блоков без сторонних библиотек. - [prototype](https://affpapa.org/nevibecode/skills/emilkowalski-prototype.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 174300 установок — Скилл собирает несколько по-настоящему разных вариантов одного куска UI и ставит их за визуальный пикер: переключаете на ходу и выбираете тот, что нравится больше. - [animate](https://affpapa.org/nevibecode/skills/animate.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 172700 установок — Создаёт анимации интерфейса с нуля по принципам Эмиля Ковальски. - [migrate-radix-to-base](https://affpapa.org/nevibecode/skills/migrate-radix-to-base.md) — скилл · shadcn-ui · Claude Code, Codex, Cursor +3 · 30400 установок — Переводит компоненты и проекты React с Radix UI на Base UI (@base-ui/react). - [hallmark](https://affpapa.org/nevibecode/skills/hallmark.md) — скилл · Nutlope · Claude Code, Codex, Cursor +3 · 70800 установок — Скилл для ИИ-кодинга, который заставляет сгенерированные интерфейсы выглядеть сделанными, а не сгенерированными. - [ask-sonner](https://affpapa.org/nevibecode/skills/ask-sonner.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 140500 установок — Скилл по библиотеке тостов Sonner для React: подскажет, как подключить Toaster, выбрать вызов toast() и починить тосты, которые не появляются. - [design-system](https://affpapa.org/nevibecode/skills/claudekit-design-system.md) — скилл · claudekit · Claude Code, Codex, Cursor +3 · 43200 установок — Скилл собирает дизайн-токены, спецификации компонентов и презентационные слайды. - [remotion-best-practices](https://affpapa.org/nevibecode/skills/remotion-dev-remotion-best-practices.md) — скилл · remotion-dev · Claude Code, Codex, Cursor +3 · 684500 установок — Маршрутизирует задачи Remotion к подходящим инструкциям для создания видео, React-разметки, карт, мультимедиа и рендера. - [animate-expo](https://affpapa.org/nevibecode/skills/animate-expo.md) — скилл · emilkowalski · Claude Code, Codex, Cursor +3 · 137900 установок — Создаёт мобильные анимации для React Native и Expo на базе Reanimated и Gesture Handler. - [design](https://affpapa.org/nevibecode/skills/design.md) — скилл · claudekit · Claude Code, Codex, Cursor +3 · 41800 установок — Скилл для генерации логотипов, бренд-айдентики, дизайн-токенов, слайдов на Chart.js и баннеров через ИИ и Python-скрипты. - [ui-styling](https://affpapa.org/nevibecode/skills/ui-styling.md) — скилл · claudekit · Claude Code, Codex, Cursor +3 · 41200 установок — Скилл для сборки доступных интерфейсов на shadcn/ui и Tailwind CSS: компоненты, темы, тёмная тема, адаптивные сетки и canvas-дизайн. - [brand](https://affpapa.org/nevibecode/skills/brand.md) — скилл · claudekit · Claude Code, Codex, Cursor +3 · 40500 установок — Скилл держит голос бренда, визуальные правила и дизайн-токены в одном файле, а потом раздаёт их промптам агента и вашему CSS. - [banner-design](https://affpapa.org/nevibecode/skills/banner-design.md) — скилл · claudekit · Claude Code, Codex, Cursor +3 · 40000 установок — Создаёт баннеры для соцсетей, рекламы и сайтов в HTML/CSS с готовыми размерами и стилями. - [slides](https://affpapa.org/nevibecode/skills/slides.md) — скилл · claudekit · Claude Code, Codex, Cursor +3 · 39300 установок — Создаёт адаптивные HTML-презентации с графиками Chart.js и дизайн-токенами. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=2 ## Уточнить [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