# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 15 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=15 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [web-design-guidelines](https://affpapa.org/nevibecode/skills/web-design-guidelines.md) — скилл · davila7 · Claude Code · 2076 установок — Скилл проверяет файлы интерфейса по актуальным правилам Web Interface Guidelines и выдаёт замечания с указанием файла и строки. - [sanity-best-practices](https://affpapa.org/nevibecode/skills/sanity-best-practices.md) — скилл · sanity-io · Claude Code, Codex, Cursor +3 · 31800 установок — Набор правил разработки на Sanity для ИИ-агента: схемы, GROQ, TypeGen, визуальный редактор, миграции и подключение к фронтенд-фреймворкам. - [typeui-fundamentals](https://affpapa.org/nevibecode/skills/typeui-fundamentals.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 установок — Скилл задаёт агенту базовые правила UI/UX: визуальную иерархию, 4-пиксельную сетку, типографику и требования доступности WCAG. - [react-dev](https://affpapa.org/nevibecode/skills/react-dev.md) — скилл · softaworks · Claude Code, Codex, Cursor +3 · 4100 установок — Скилл помогает писать строго типизированный код на React 18–19 и переходить на новые API вроде useActionState. - [react-native-brownfield-migration](https://affpapa.org/nevibecode/skills/react-native-brownfield-migration.md) — скилл · callstackincubator · Claude Code, Codex, Cursor +3 · 5200 установок — Помогает пошагово внедрять React Native или Expo в нативные приложения iOS и Android с помощью @callstack/react-native-brownfield. - [yaml](https://affpapa.org/nevibecode/skills/yaml.md) — скилл · vercel-labs · Claude Code, Codex, Cursor +3 · 1000 установок — Потоковый парсер YAML для json-render, который превращает код-фенсы в JSON Patch. - [ios-hig-design](https://affpapa.org/nevibecode/skills/ios-hig-design.md) — скилл · wondelai · Claude Code, Codex, Cursor +3 · 8200 установок — Скилл помогает проектировать нативные iOS-интерфейсы в соответствии с Human Interface Guidelines Apple. - [tailwind-4](https://affpapa.org/nevibecode/skills/tailwind-4.md) — скилл · prowler-cloud · Claude Code, Codex, Cursor +3 · 612 установок — Скилл ведёт агента по стилизации на Tailwind CSS 4: что писать в className, когда нужен style, а когда cn(). - [transitions-ui-generation](https://affpapa.org/nevibecode/skills/transitions-ui-generation.md) — скилл · Jakubantalik · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл добавляет анимацию, будто агент строит интерфейс, заголовок или изображение. - [engineering-skills](https://affpapa.org/nevibecode/skills/engineering-skills.md) — скилл · Alireza Rezvani · Claude Code · 2387 установок — Каталог инженерных скиллов для Claude Code: помогает выбрать роль под задачу и загрузить только нужный SKILL.md. - [threejs-game-ui-designer](https://affpapa.org/nevibecode/skills/threejs-game-ui-designer.md) — скилл · majidmanzarpour · Claude Code, Codex, Cursor +3 · 3300 установок — Скилл для проектирования игровых интерфейсов на Three.js: HUD, меню, экраны паузы и победы, адаптивная вёрстка для мобильных и десктопа. - [threejs-gameplay-systems](https://affpapa.org/nevibecode/skills/threejs-gameplay-systems.md) — скилл · majidmanzarpour · Claude Code, Codex, Cursor +3 · 3300 установок — Разворачивает игровой цикл на Three.js, Vite и TypeScript с контролем физики, ввода и камеры. - [hairline-adopt](https://affpapa.org/nevibecode/skills/hairline-adopt.md) — скилл · lucasmarkes · Claude Code, Codex, Cursor +3 · 1700 установок — Пересобирает иконку или логотип из SVG в изометрическую линейную фигуру на движке @lucasmarkes/hairline, которая реагирует на указатель. - [firecrawl-website-design-clone](https://affpapa.org/nevibecode/skills/firecrawl-website-design-clone.md) — скилл · firecrawl · Claude Code, Codex, Cursor +3 · 33100 установок — Извлекает визуальную систему действующего сайта в DESIGN.md: токены, компоненты, логотип, шрифты и палитру. - [threejs-gltf-loading](https://affpapa.org/nevibecode/skills/threejs-gltf-loading.md) — скилл · gamedev-skills · Claude Code, Codex, Cursor +3 · 5900 установок — Загружает glTF и GLB в three.js и проигрывает запечённые клипы через AnimationMixer, включая сжатые DRACO, Meshopt и KTX2. - [angular-component](https://affpapa.org/nevibecode/skills/angular-component.md) — скилл · analogjs · Claude Code, Codex, Cursor +3 · 11500 установок — Скилл под Angular 20+ с сигнальными входами, OnPush и host bindings, помеченный как deprecated: гайд из него удалён, вместо него — официальные скиллы Angular. - [react-navigation](https://affpapa.org/nevibecode/skills/react-navigation.md) — скилл · callstackincubator · Claude Code, Codex, Cursor +3 · 4800 установок — Справочники по UI-паттернам React Navigation 7: стеки, табы, шторки, drawer, шапки, safe area. - [orval](https://affpapa.org/nevibecode/skills/orval.md) — скилл · orval-labs · Claude Code, Codex, Cursor +3 · 589 установок — Генерирует типизированные клиенты, хуки TanStack Query, схемы Zod и моки MSW из спецификаций OpenAPI. - [threejs-aaa-graphics-builder](https://affpapa.org/nevibecode/skills/threejs-aaa-graphics-builder.md) — скилл · majidmanzarpour · Claude Code, Codex, Cursor +3 · 3200 установок — Скилл переводит браузерную 3D-графику Three.js из прототипа в качественный продакшен: настраивает материалы, свет, шейдеры и проверяет сцену по шкале качества. - [phaser-arcade-physics](https://affpapa.org/nevibecode/skills/phaser-arcade-physics.md) — скилл · gamedev-skills · Claude Code, Codex, Cursor +3 · 5800 установок — Настраивает перемещение, прыжки и столкновения в 2D-играх на Phaser 4 через физический движок Arcade Physics. - [threejs-scene-setup](https://affpapa.org/nevibecode/skills/threejs-scene-setup.md) — скилл · gamedev-skills · Claude Code, Codex, Cursor +3 · 5800 установок — Настраивает базовую сцену three.js и помогает найти причины пустого или чёрного canvas. - [threejs-materials-lighting](https://affpapa.org/nevibecode/skills/threejs-materials-lighting.md) — скилл · gamedev-skills · Claude Code, Codex, Cursor +3 · 5800 установок — Скилл для three.js: подбирает материал, ставит источники света, включает тени и подключает HDR-окружение, когда модель выглядит чёрной или плоской. - [pixijs-rendering](https://affpapa.org/nevibecode/skills/pixijs-rendering.md) — скилл · gamedev-skills · Claude Code, Codex, Cursor +3 · 5600 установок — Скилл для сборки слоя рендера на PixiJS v8: асинхронный Application, загрузка текстур, сцена на Container, тикер и события указателя. - [threejs-debug-profiler](https://affpapa.org/nevibecode/skills/threejs-debug-profiler.md) — скилл · majidmanzarpour · Claude Code, Codex, Cursor +3 · 3100 установок — Ищет причины пустого экрана и сбоев рендера в браузерных играх на Three.js. - [svelte-core-bestpractices](https://affpapa.org/nevibecode/skills/svelte-core-bestpractices.md) — скилл · sveltejs · Claude Code, Codex, Cursor +3 · 10900 установок — Скилл объясняет агенту, как писать код на Svelte с рунами: $state, $derived, события, стили. - [top-design](https://affpapa.org/nevibecode/skills/top-design.md) — скилл · wondelai · Claude Code, Codex, Cursor +3 · 7100 установок — Скилл направляет агента на создание веб-интерфейсов уровня Awwwards с акцентной типографикой, выверенной анимацией и оценкой макета по десятибалльной шкале. - [develop](https://affpapa.org/nevibecode/skills/develop.md) — скилл · jsmastery-pro · Claude Code, Codex, Cursor +3 · 4400 установок — Скилл превращает готовую спецификацию и правила AGENTS.md в код интерфейса или бэкенда. - [threejs-qa-release](https://affpapa.org/nevibecode/skills/threejs-qa-release.md) — скилл · majidmanzarpour · Claude Code, Codex, Cursor +3 · 3000 установок — Проверяет браузерные игры на Three.js перед релизом: игровой цикл, адаптивность, сборку и визуальные артефакты. - [vgpu](https://affpapa.org/nevibecode/skills/vgpu.md) — скилл · vercel-labs · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл помогает создавать и отлаживать WebGPU-проекты на базе vgpu, опираясь на встроенную документацию установленного в проекте пакета. - [display-glasses-with-jetpack-compose-glimmer](https://affpapa.org/nevibecode/skills/display-glasses-with-jetpack-compose-glimmer.md) — скилл · Google LLC · Claude Code, Codex, Cursor +3 · 1500 установок — Правила разработки приложений для очков с дисплеем на Jetpack Compose Glimmer: темы, фокус, работа с аддитивным экраном. - [remocn](https://affpapa.org/nevibecode/skills/remocn.md) — скилл · Remocn · Claude Code, Codex, Cursor +3 · 1700 установок — Подбирает и устанавливает готовые анимации, переходы и UI-компоненты для роликов на Remotion. - [html-wireframe](https://affpapa.org/nevibecode/skills/html-wireframe.md) — скилл · plannotator · Claude Code, Codex, Cursor +3 · 1800 установок — Скилл собирает низкодетальные HTML-каркасы экранов, чтобы проверить иерархию информации, навигацию и ход задачи ещё до визуального дизайна. - [html-prototype](https://affpapa.org/nevibecode/skills/html-prototype.md) — скилл · plannotator · Claude Code, Codex, Cursor +3 · 1800 установок — Скилл собирает один самодостаточный HTML-файл: статичный макет или рабочий прототип с состояниями, клавиатурой и адаптивом. - [microinteractions](https://affpapa.org/nevibecode/skills/microinteractions.md) — скилл · wondelai · Claude Code, Codex, Cursor +3 · 6700 установок — Скилл про микровзаимодействия: состояния кнопок, отклик на ввод, индикаторы загрузки. - [router-core](https://affpapa.org/nevibecode/skills/router-core.md) — скилл · TanStack · Claude Code, Codex, Cursor +3 · 589 установок — Скилл-навигатор по TanStack Router: разводит задачу по подскиллам и напоминает про вывод типов и клиентские лоадеры, на которых агенты ломаются. - [guide](https://affpapa.org/nevibecode/skills/guide.md) — скилл · toss · Claude Code, Codex, Cursor +3 · 518 установок — Помогает настроить библиотеку es-toolkit в проекте, подобрать правильный импорт и команду установки для текущего рантайма. - [wp-interactivity-api](https://affpapa.org/nevibecode/skills/wp-interactivity-api.md) — скилл · WordPress · Claude Code, Codex, Cursor +3 · 4200 установок — Помогает настраивать интерактивные блоки WordPress без сбоев гидратации. - [generative-ui](https://affpapa.org/nevibecode/skills/generative-ui.md) — скилл · himself65 · Claude Code, Codex, Cursor +3 · 3200 установок — Задаёт правила дизайн-системы для интерактивных HTML- и SVG-виджетов. - [design-artifact](https://affpapa.org/nevibecode/skills/design-artifact.md) — скилл · plannotator · Claude Code, Codex, Cursor +3 · 1700 установок — Набор правил для генерации аккуратных HTML-документов и отчётов. - [reka-ui](https://affpapa.org/nevibecode/skills/reka-ui.md) — скилл · onmax · Claude Code, Codex, Cursor +3 · 7400 установок — Скилл для работы с Reka UI — библиотекой unstyled компонентов Vue 3 с полной поддержкой доступности. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=16 ## Уточнить [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