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

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

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

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

- [globe-particles](https://affpapa.org/nevibecode/skills/globe-particles.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Создаёт трёхмерную визуализацию сферы и орбитального кольца из светящихся частиц на WebGL и Three.js.
- [agency-grid-layout-minimal](https://affpapa.org/nevibecode/skills/agency-grid-layout-minimal.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт направление для минималистичного сайта агентства: строгая сетка, крупная типографика и сдержанные изображения.
- [unicorn-studio](https://affpapa.org/nevibecode/skills/unicorn-studio.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Помогает встроить интерактивные WebGL-сцены из Unicorn Studio на сайт: контейнер, адаптивный размер, производительность, слои с текстом и видео.
- [skeuomorphic-ui](https://affpapa.org/nevibecode/skills/skeuomorphic-ui.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл генерирует CSS для скевоморфных веб-интерфейсов: объёмных кнопок, переключателей и панелей.
- [background-grid-webgl](https://affpapa.org/nevibecode/skills/background-grid-webgl.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл для ИИ-агента, который рисует перспективную WebGL-сетку на фоне: тонкие линии, лёгкая пыль частиц, медленный дрейф вперёд.
- [finesse-ui](https://affpapa.org/nevibecode/skills/finesse-ui.md) — скилл · mouse-lin · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл для сборки и доводки веб-интерфейсов: лендинги, дашборды, мобильные экраны, отдельные компоненты.
- [replica-diff](https://affpapa.org/nevibecode/skills/replica-diff.md) — скилл · Jakeschincariol · Claude Code, Codex, Cursor +3 · 625 установок — Оценивает готовность клона приложения к оригиналу: считает паритет функций по матрице и находит структурные отличия в вёрстке без учёта цветов.
- [epic-design](https://affpapa.org/nevibecode/skills/epic-design.md) — скилл · Abbas Mir · Claude Code · 701 установка — Скилл для Claude Code, который собирает кинематографичные страницы: скролл-сторителлинг, параллакс по слоям, анимация текста.
- [nuxt-modules](https://affpapa.org/nevibecode/skills/nuxt-modules.md) — скилл · onmax · Claude Code, Codex, Cursor +3 · 2700 установок — Скилл помогает создавать модули для Nuxt: локальные расширения в папке modules/, пакеты для npm, серверные роуты и плагины с настройкой тестов и CI/CD.
- [replica-build](https://affpapa.org/nevibecode/skills/replica-build.md) — скилл · Jakeschincariol · Claude Code, Codex, Cursor +3 · 622 установки — Собирает приложение экран за экраном по карте разведки: сначала оболочка, потом сквозной поток, потом каждый экран со всеми состояниями.
- [data-visualization](https://affpapa.org/nevibecode/skills/owl-listener-data-visualization.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 установок — Помогает агенту выбрать тип графика и настроить оси, подписи и цвета так, чтобы диаграмма читалась без легенды.
- [layout-grid](https://affpapa.org/nevibecode/skills/layout-grid.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл задаёт адаптивную сетку страницы: колонки, отступы между ними, поля и поведение на брейкпоинтах.
- [icon-system](https://affpapa.org/nevibecode/skills/icon-system.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 установок — Задаёт правила для системы иконок: сетку 24x24px, шкалу размеров, именование и доступность.
- [dark-mode-design](https://affpapa.org/nevibecode/skills/dark-mode-design.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл переводит готовую светлую палитру в тёмную тему: уровни поверхностей, контраст, приглушение ярких цветов.
- [use-igniteui-blazor](https://affpapa.org/nevibecode/skills/use-igniteui-blazor.md) — скилл · dotnet · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл помогает подключить и настроить библиотеки Ignite UI for Blazor Lite в проектах на .NET 8.0 и новее.
- [scandinavian-design](https://affpapa.org/nevibecode/skills/scandinavian-design.md) — скилл · ericzakariasson · Claude Code, Codex, Cursor +3 · 1800 установок — Скилл помогает пересмотреть интерфейс в спокойной скандинавской эстетике: сдержанная палитра, понятная иерархия и меньше украшений.
- [spline-interactive](https://affpapa.org/nevibecode/skills/spline-interactive.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 2800 установок — Справочник по интеграции 3D-сцен Spline в веб-проекты.
- [gsap-scrolltrigger](https://affpapa.org/nevibecode/skills/freshtechbro-gsap-scrolltrigger.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 2800 установок — Скилл, который помогает агенту писать анимации на GSAP и скролл-эффекты на ScrollTrigger: твины, таймлайны, пиннинг, параллакс.
- [awwwards](https://affpapa.org/nevibecode/skills/awwwards.md) — скилл · juliobsz · Claude Code, Codex, Cursor +3 · 1300 установок — Собирает сайт-портфолио или лендинг из одной фразы, держа планку сайтов, которые побеждают на Awwwards.
- [ux-writing](https://affpapa.org/nevibecode/skills/ux-writing.md) — скилл · content-designer · Claude Code, Codex, Cursor +3 · 2700 установок — Пишет и правит подписи кнопок, ошибки, уведомления и тексты пустых состояний по четырём критериям: цель, краткость, разговорность, ясность.
- [swiftui-patterns](https://affpapa.org/nevibecode/skills/dpearson2699-swiftui-patterns.md) — скилл · dpearson2699 · Claude Code, Codex, Cursor +3 · 4500 установок — Помогает строить и проверять SwiftUI-представления: состояние, композицию, окружение и изолированные превью.
- [responsive-design](https://affpapa.org/nevibecode/skills/owl-listener-responsive-design.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл для ИИ-агента, который помогает проектировать макеты и взаимодействия под разные размеры экрана и способы ввода.
- [spacing-system](https://affpapa.org/nevibecode/skills/spacing-system.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2300 установок — Задаёт шкалу отступов на базе 4px или 8px и правила её применения в UI.
- [presentation-creator](https://affpapa.org/nevibecode/skills/presentation-creator.md) — скилл · getsentry · Claude Code, Codex, Cursor +3 · 2900 установок — Создаёт интерактивные слайды на React и Vite в стиле Sentry.
- [react-devtools](https://affpapa.org/nevibecode/skills/react-devtools.md) — скилл · callstackincubator · Claude Code, Codex, Cursor +3 · 2600 установок — Скилл подключает агента к запущенному React или React Native приложению и отдаёт дерево компонентов, пропсы, хуки и данные профайлера.
- [animejs](https://affpapa.org/nevibecode/skills/animejs.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 2800 установок — Скилл для ИИ-агента, который подсказывает синтаксис Anime.js: таймлайны, stagger, морфинг SVG и покадровые последовательности.
- [apple-hig-expert](https://affpapa.org/nevibecode/skills/apple-hig-expert.md) — скилл · Alireza Rezvani · Claude Code · 662 установки — Проверяет интерфейсы iOS, macOS, watchOS и visionOS по Apple HIG.
- [build-game-audio-feedback](https://affpapa.org/nevibecode/skills/build-game-audio-feedback.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1300 установок — Помогает агенту спроектировать звуковые подсказки для Three.js или браузерной игры: попадания, блоки, музыка по состояниям.
- [optimize-threejs-games](https://affpapa.org/nevibecode/skills/optimize-threejs-games.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл для профилирования и ускорения игр на Three.js и WebGL: находит, что тормозит — процессор или видеокарта, и чинит без потери геймплея.
- [liquid-metal-border](https://affpapa.org/nevibecode/skills/liquid-metal-border.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1300 установок — Добавляет и настраивает анимированные WebGL-рамки из metal-fx для кнопок, карточек и выбранных элементов React-интерфейса.
- [beam-glow-states](https://affpapa.org/nevibecode/skills/beam-glow-states.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл для React-интерфейсов: подключает анимированное свечение границ из пакета border-beam к состояниям загрузки, выбора и фокуса.
- [no-ai-design-slop](https://affpapa.org/nevibecode/skills/no-ai-design-slop.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1300 установок — Пассивный фильтр качества дизайна: ловит рефлекторные решения и типовые дефекты интерфейса, пока вы пишете или правите UI.
- [documentary-brutalist-agency](https://affpapa.org/nevibecode/skills/documentary-brutalist-agency.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл для вёрстки сайтов креативных агентств и портфолио: жёсткая типографика, чёрно-белые главы, документальные коллажи.
- [thinking-orbs](https://affpapa.org/nevibecode/skills/thinking-orbs.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1300 установок — Обучает агента внедрять анимированные Canvas-индикаторы статуса нейросети из библиотеки thinking-orbs в React 18+.
- [editorial-service-booking](https://affpapa.org/nevibecode/skills/editorial-service-booking.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1300 установок — Помогает спроектировать сайт услуг с записью: от редакционной подачи процедур до устойчивого сценария выбора времени.
- [operational-enterprise-ai](https://affpapa.org/nevibecode/skills/operational-enterprise-ai.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл для вёрстки и переделки страниц enterprise-продуктов: границы системы, согласования, аудит, исключения и откат.
- [browser-video-recording](https://affpapa.org/nevibecode/skills/browser-video-recording.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1300 установок — Собирает демо-видео интерфейса в 4K 60 fps с пропорциями 4:3 из снимков браузера.
- [add-shader-cursor-trail](https://affpapa.org/nevibecode/skills/add-shader-cursor-trail.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1300 установок — Добавляет в проект hero-эффект на WebGPU: белый мерцающий полутоновый след за курсором с хроматическими волнами и плёночным зерном.
- [shaders-cursor-ripples](https://affpapa.org/nevibecode/skills/shaders-cursor-ripples.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Встраивает водяную рябь на WebGPU поверх изображений с помощью библиотеки shaders.
- [swiftui-navigation](https://affpapa.org/nevibecode/skills/swiftui-navigation.md) — скилл · dpearson2699 · Claude Code, Codex, Cursor +3 · 4400 установок — Скилл обучает ассистента строить типобезопасную навигацию в SwiftUI: от стеков со строгими маршрутами до модальных окон и вкладок.

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

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