# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 21 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=21 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [angular-ssr](https://affpapa.org/nevibecode/skills/angular-ssr.md) — скилл · analogjs · Claude Code, Codex, Cursor +3 · 3900 установок — Скилл для задач Angular SSR, гидратации и пререндеринга. - [create-canvas](https://affpapa.org/nevibecode/skills/create-canvas.md) — скилл · ibelick · Claude Code, Codex, Cursor +3 · 381 установка — Скилл собирает в проекте свободный холст, где варианты интерфейса или контента живут рядом, двигаются и сравниваются без перезагрузки страницы. - [code-to-prd](https://affpapa.org/nevibecode/skills/code-to-prd.md) — скилл · Alireza Rezvani · Claude Code · 763 установки — Скилл превращает кодовую базу в PRD с описанием страниц, маршрутов, API и пользовательских действий. - [roku](https://affpapa.org/nevibecode/skills/roku.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 установок — Задаёт агенту правила дизайн-системы приложения: фиолетовая палитра, верхняя навигация, карточные раскладки. - [power](https://affpapa.org/nevibecode/skills/power.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 установок — Задаёт агенту правила тёмного интерфейса: крупные заголовки, монохромная палитра, токены и проверки доступности. - [geometric](https://affpapa.org/nevibecode/skills/geometric.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 установок — Задаёт правила геометрической дизайн-системы с нейтральными цветами и шрифтами Inter. - [stitch](https://affpapa.org/nevibecode/skills/stitch.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 установок — Скилл задаёт правила для интерфейсов с данными: токены, состояния компонентов, доступность и QA-проверки. - [data-table-filters](https://affpapa.org/nevibecode/skills/data-table-filters.md) — скилл · openstatusHQ · Claude Code, Codex, Cursor +3 · 476 установок — Скилл помогает собирать React-таблицы с фильтрами, сортировкой, виртуализацией и бесконечной прокруткой. - [web3d-integration-patterns](https://affpapa.org/nevibecode/skills/web3d-integration-patterns.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 3200 установок — Скилл помогает проектировать 3D-сцены, где Three.js, React Three Fiber и библиотеки анимации работают вместе. - [globe-gl](https://affpapa.org/nevibecode/skills/globe-gl.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл помогает настраивать 3D-глобусы через библиотеку globe.gl на ThreeJS и WebGL. - [vantajs](https://affpapa.org/nevibecode/skills/vantajs.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Помогает добавить анимированный фон на Vanta.js и настроить его в статическом сайте, React или Next.js. - [atmosphere-background](https://affpapa.org/nevibecode/skills/atmosphere-background.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл для генерации тёмного атмосферного фона: вертикальные световые складки медленно дрейфуют, свечение складывается в углу или у нижнего края. - [editorial-tech](https://affpapa.org/nevibecode/skills/editorial-tech.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Задаёт правила вёрстки на стыке журнальной графики и строгого интерфейса: асимметричная сетка, панорамные медиа-полосы, моноширинные метки и один акцентный цвет. - [css-alpha-masking](https://affpapa.org/nevibecode/skills/css-alpha-masking.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл добавляет CSS-маски с градиентным исчезновением по краям. - [stitched-full-page-capture](https://affpapa.org/nevibecode/skills/stitched-full-page-capture.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл собирает полный скриншот страницы из кусков вьюпорта, когда обычный fullPage даёт пустоту. - [glass-dark-ui](https://affpapa.org/nevibecode/skills/glass-dark-ui.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Настраивает тёмный глассморфизм с матовыми панелями и градиентными рамками через CSS-маски. - [build-threejs-scroll-worlds](https://affpapa.org/nevibecode/skills/build-threejs-scroll-worlds.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл помогает собирать интерактивные Three.js-миры, где нативный скролл ведёт через несколько сцен. - [container-lines](https://affpapa.org/nevibecode/skills/container-lines.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл добавляет тонкие вертикальные линии по краям контентного контейнера и мини-квадраты в углах секций. - [company-logos](https://affpapa.org/nevibecode/skills/company-logos.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл настраивает добавление логотипов брендов через Iconify Simple Icons в сетке 64x64 вместо текстовых названий и случайных картинок. - [matterjs](https://affpapa.org/nevibecode/skills/matterjs.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Помогает агенту собрать сцену на Matter.js: движок, рендер, тела, ограничения и перетаскивание мышью. - [css-border-gradient](https://affpapa.org/nevibecode/skills/css-border-gradient.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Добавляет в веб-интерфейс аккуратные градиентные рамки через CSS или Tailwind. - [scroll-scrubbed-visual-sequence](https://affpapa.org/nevibecode/skills/scroll-scrubbed-visual-sequence.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1500 установок — Собирает обратимые визуальные сцены, управляемые прокруткой: от сборки продукта до смены состояний интерфейса. - [unsplash-asset-images](https://affpapa.org/nevibecode/skills/unsplash-asset-images.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл подбирает фотографии Unsplash под аватары, хедшоты, фоны и обои и сразу называет нужные пропорции и разрешения. - [scroll-world-storytelling](https://affpapa.org/nevibecode/skills/scroll-world-storytelling.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл превращает статьи, кейсы и продуктовые истории в кинематографичные скролл-лендинги. - [staggered-word-reveal](https://affpapa.org/nevibecode/skills/staggered-word-reveal.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1600 установок — Создаёт пословное появление короткого текста при прокрутке. - [landing-page-generator](https://affpapa.org/nevibecode/skills/landing-page-generator.md) — скилл · Alireza Rezvani · Claude Code · 754 установки — Создаёт лендинги в виде TSX-компонентов Next.js/React с Tailwind CSS. - [navigation-event](https://affpapa.org/nevibecode/skills/navigation-event.md) — скилл · Google LLC · Claude Code, Codex, Cursor +3 · 546 установок — Помогает внедрить библиотеку androidx.navigationevent в Compose Android. - [typography-scale](https://affpapa.org/nevibecode/skills/typography-scale.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2600 установок — Строит модульную типографическую шкалу: размеры, насыщенность, межстрочный интервал. - [flutter-animations](https://affpapa.org/nevibecode/skills/flutter-animations.md) — скилл · Stanislav \[MADTeacher\] Chernyshev · Claude Code, Codex, Cursor +3 · 15400 установок — Скилл для работы с анимациями во Flutter: добавить, починить, отрефакторить или объяснить движение в интерфейсе. - [ios-accessibility](https://affpapa.org/nevibecode/skills/ios-accessibility.md) — скилл · dpearson2699 · Claude Code, Codex, Cursor +3 · 4900 установок — Помогает настраивать доступность в приложениях под iOS и macOS, проверяя разметку для экранных дикторов и системные параметры интерфейса. - [remotion-render](https://affpapa.org/nevibecode/skills/101-skills-remotion-render.md) — скилл · 101-skills · Claude Code, Codex, Cursor +3 · 109700 установок — Скилл отдаёт TSX-компонент Remotion в inference.sh и получает готовый MP4. - [ui-screenshots](https://affpapa.org/nevibecode/skills/ui-screenshots.md) — скилл (официальный GitHub) · github · GitHub Copilot · 209 установок — Скилл снимает скриншоты веб-приложений и десктопных окон, чтобы показать изменения интерфейса до и после правок кода. - [bencium-impact-designer](https://affpapa.org/nevibecode/skills/bencium-impact-designer.md) — скилл · bencium · Claude Code, Codex, Cursor +3 · 5400 установок — Создаёт фронтенд-интерфейсы с выраженным визуальным направлением. - [nuxt-content](https://affpapa.org/nevibecode/skills/nuxt-content.md) — скилл · onmax · Claude Code, Codex, Cursor +3 · 2800 установок — Скилл для работы с @nuxt/content: коллекции, схемы, запросы и рендер Markdown. - [square](https://affpapa.org/nevibecode/skills/square.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 установок — Скилл задаёт агенту правила дизайн-системы Square: токены, типографику, состояния компонентов и критерии доступности. - [pulse](https://affpapa.org/nevibecode/skills/typeuish-pulse.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 установок — Задаёт правила дерзкой дизайн-системы Pulse с рамками 4px, яркой оранжевой палитрой и шрифтом Limelight. - [basic](https://affpapa.org/nevibecode/skills/basic.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 установок — Скилл задаёт редакционный дизайн для книг, журналов и отчётов: сетку, типографику, токены и правила доступности. - [color-system](https://affpapa.org/nevibecode/skills/color-system.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл собирает палитру продукта: тональные шкалы, семантические роли и проверку контраста по WCAG. - [visual-hierarchy](https://affpapa.org/nevibecode/skills/visual-hierarchy.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл выстраивает визуальную иерархию интерфейса через размер, насыщенность, цвет, отступы и позицию. - [animated-component-libraries](https://affpapa.org/nevibecode/skills/animated-component-libraries.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 2900 установок — Скилл помогает добавлять готовые анимированные React-компоненты из Magic UI и React Bits. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=22 ## Уточнить [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