# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 22 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=22 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [modern-web-design](https://affpapa.org/nevibecode/skills/modern-web-design.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 2900 установок — Скилл-методичка по веб-дизайну 2024-2025: тренды, микровзаимодействия, скроллителлинг, доступность и производительность. - [lottie-animations](https://affpapa.org/nevibecode/skills/lottie-animations.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 2900 установок — Скилл, который помогает агенту подключать Lottie-анимации из After Effects в веб и React: выбирать библиотеку, ставить плееры и управлять воспроизведением. - [replica-design](https://affpapa.org/nevibecode/skills/replica-design.md) — скилл · Jakeschincariol · Claude Code, Codex, Cursor +3 · 630 установок — Воссоздаёт дизайн-систему приложения по скриншотам для клона: токены, стили и спецификации компонентов. - [editorial-portfolio-chapters](https://affpapa.org/nevibecode/skills/editorial-portfolio-chapters.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл для сайтов креативных студий, агентств, фотографов и художников: работа ведёт рассказ, а не блок «о нас». - [product-proof-saas](https://affpapa.org/nevibecode/skills/product-proof-saas.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл для лендингов SaaS и ИИ-продуктов, где главное доказательство — реальный интерфейс или размеченный демо-сценарий, а не атмосферные картинки. - [funky-purple-container-tech](https://affpapa.org/nevibecode/skills/funky-purple-container-tech.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт правила для тёмного интерфейса с фиолетовыми акцентами, чёткими рамками контейнеров и футуристичными деталями. - [ambient-section-particles](https://affpapa.org/nevibecode/skills/ambient-section-particles.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл добавляет сдержанную атмосферу из частиц внутри одной секции страницы: лепестки, снег, искры, конфетти. - [reveal-hover-effect](https://affpapa.org/nevibecode/skills/reveal-hover-effect.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл строит эффект «фонарика»: под курсором проявляется второе изображение через мягкую радиальную маску. - [scroll-progress-timeline](https://affpapa.org/nevibecode/skills/scroll-progress-timeline.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Превращает упорядоченный список шагов в интерактивную шкалу процесса со скроллом. - [daily-ui-inspiration-capture](https://affpapa.org/nevibecode/skills/daily-ui-inspiration-capture.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Собирает датированный набор UI-референсов для статьи: изображения, видео, кадры движения и промпты для AI-билдера. - [framed-tech-dark-border-gradient](https://affpapa.org/nevibecode/skills/framed-tech-dark-border-gradient.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл задаёт ИИ-агенту направление тёмного технического дизайна: рамки, градиентные границы, асимметричные панели и монохромная типографика. - [solar-duotone-bold](https://affpapa.org/nevibecode/skills/solar-duotone-bold.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Набор инструкций для оформления интерфейса иконками Iconify Solar Duotone Bold. - [orange-clean-paper-saas](https://affpapa.org/nevibecode/skills/orange-clean-paper-saas.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт ИИ-агенту направление дизайн-системы: тёплые бумажные тона, оранжевый акцент, скруглённые формы и продуктовые иллюстрации. - [dark-blue-contrasting-clean](https://affpapa.org/nevibecode/skills/dark-blue-contrasting-clean.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт ИИ-агенту направление дизайн-системы: почти чёрная навигационная основа, кобальтовые акцентные блоки, белая типографика и тонкие рамки. - [bright-green-tech-system-webgl](https://affpapa.org/nevibecode/skills/bright-green-tech-system-webgl.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл настраивает техническую дизайн-систему с тёмным фоном, угловыми скобками, акцентным зелёным цветом и витриной WebGL для консолей или инженерных панелей. - [nested-container-clean-agency](https://affpapa.org/nevibecode/skills/nested-container-clean-agency.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт ИИ-агенту направление дизайна: внешняя редакционная оболочка, тёмные врезные блоки, скруглённые карточки и сдержанный акцентный цвет. - [glass-dark-mode-clock](https://affpapa.org/nevibecode/skills/glass-dark-mode-clock.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт дизайн-систему тёмного стекла: матовые панели, сетка лучей и круглый циферблат-калибратор в центре страницы. - [tech-green-dark-mode-modern](https://affpapa.org/nevibecode/skills/tech-green-dark-mode-modern.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт правила для тёмного интерфейса с изумрудными акцентами, матовыми поверхностями и моноширинными метками. - [corner-lasers](https://affpapa.org/nevibecode/skills/corner-lasers.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Создаёт угловую композицию из тонких лазерных лучей, яркого источника и атмосферного свечения. - [blue-cloudy-clean-modern](https://affpapa.org/nevibecode/skills/blue-cloudy-clean-modern.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт дизайн-систему с голубым небом, мягкими облаками и белой типографикой. - [nested-container-frames](https://affpapa.org/nevibecode/skills/nested-container-frames.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл задаёт правила вёрстки многоуровневых интерфейсов по принципу «контейнер в контейнере». - [dither-laser-dark-mode](https://affpapa.org/nevibecode/skills/dither-laser-dark-mode.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл задаёт тёмную дизайн-систему с текстурой ordered dither и тонким лазерным акцентом. - [light-mode-paper-technical](https://affpapa.org/nevibecode/skills/light-mode-paper-technical.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт направление дизайн-системы: тёплые бумажные поверхности, тёмная внешняя рамка, тонкая диагональная текстура и один сдержанный акцент. - [book-serif-index](https://affpapa.org/nevibecode/skills/book-serif-index.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт правила для вёрстки книжных интерфейсов и цифровых архивов: антиквенная типографика, эффект состаренной бумаги, маргиналии и моноширинная каталожная навигация. - [blue-laser-clean-glass-layout](https://affpapa.org/nevibecode/skills/blue-laser-clean-glass-layout.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт дизайн-систему тёмного интерфейса: тонкий синий лазер на фоне, матовые стеклянные панели и аккуратный дашборд. - [high-contrast-skeuomorphic-clean](https://affpapa.org/nevibecode/skills/high-contrast-skeuomorphic-clean.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт правила создания тёмного скевоморфного интерфейса с высокой контрастностью, фасками и акцентными индикаторами. - [split-layout-technical](https://affpapa.org/nevibecode/skills/split-layout-technical.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт технический двухпанельный макет с тонкими рамками, моно-метаданными и акцентом на иерархию. - [scroll-scrubbed-word-reveal](https://affpapa.org/nevibecode/skills/scroll-scrubbed-word-reveal.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл открывает слова в размеченном тексте по мере прокрутки страницы. - [technical-wireframe-info-layout](https://affpapa.org/nevibecode/skills/technical-wireframe-info-layout.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт правила для сборки монохромных инженерных интерфейсов: проволочных 3D-моделей в разрезе, выносных линий и меток диагностики. - [corner-diagonals](https://affpapa.org/nevibecode/skills/corner-diagonals.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл для срезанных углов и фаски на кнопках, карточках и панелях. - [number-details](https://affpapa.org/nevibecode/skills/number-details.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл добавляет декоративные номера 01, 02, 03 к шагам процесса, карточкам и заголовкам. - [gooey-blob-system](https://affpapa.org/nevibecode/skills/gooey-blob-system.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Создаёт эффект слипающихся органических капель с помощью SVG-фильтров. - [dark-glass-clean-layout](https://affpapa.org/nevibecode/skills/dark-glass-clean-layout.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл задаёт тёмную стеклянную систему интерфейса с колонками, плавающими карточками и спокойной глубиной. - [clean-minimal-beige-light-mode](https://affpapa.org/nevibecode/skills/clean-minimal-beige-light-mode.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт направление дизайн-системы: тёплые бежевые поверхности, тихие модульные сетки и сдержанный акцент. - [mesh-gradient-dark-blue-clean](https://affpapa.org/nevibecode/skills/mesh-gradient-dark-blue-clean.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Набор дизайн-правил, CSS-токенов и разметки для тёмно-синего интерфейса с процедурным градиентом на Canvas. - [framed-grid-layout](https://affpapa.org/nevibecode/skills/framed-grid-layout.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл задаёт правила вёрстки страниц с тонкими видимыми границами секций, L-образными уголками и строгой привязкой к сетке. - [webgl-laser](https://affpapa.org/nevibecode/skills/webgl-laser.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл рисует фиксированный полноэкранный фон с тонким вертикальным лучом, цветным ореолом и дымкой. - [image-first-grid-layout](https://affpapa.org/nevibecode/skills/image-first-grid-layout.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт правила вёрстки экранов с полноэкранными фото, полупрозрачными блоками и направляющими линиями сетки. - [dither-background](https://affpapa.org/nevibecode/skills/dither-background.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл для генерации тёмного монохромного фона с крупными квадратными пикселями и упорядоченным дизерингом Байера. - [html-to-interaction-prompts](https://affpapa.org/nevibecode/skills/html-to-interaction-prompts.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1400 установок — Превращает готовую HTML-страницу в статью с промптами для ИИ-конструктора: разбирает анимации, снимает скриншоты, пишет описания. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=23 ## Уточнить [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