# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 20 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=20 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [vintage](https://affpapa.org/nevibecode/skills/vintage.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Формирует дизайн-системы в ретро-стиле со скевоморфизмом, пиксельными шрифтами и строгими требованиями доступности для фронтенд-компонентов. - [cafe](https://affpapa.org/nevibecode/skills/cafe.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл задаёт дизайн-систему для интерфейсов в стиле уютного кафе. - [flat](https://affpapa.org/nevibecode/skills/flat.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Задаёт агенту правила плоского дизайна: токены, типографику, состояния компонентов и доступность. - [dramatic](https://affpapa.org/nevibecode/skills/dramatic.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Задаёт правила дизайн-системы с высоким контрастом, тёмным фоном и шрифтом Outfit. - [ant](https://affpapa.org/nevibecode/skills/ant.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл задаёт агенту правила дизайн-системы Ant: токены, состояния компонентов, доступность. - [cosmic](https://affpapa.org/nevibecode/skills/cosmic.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Задаёт футуристичный научно-фантастический стиль с неоновыми акцентами для дизайн-систем. - [artistic](https://affpapa.org/nevibecode/skills/artistic.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Задаёт агенту правила художественного интерфейса: высокий контраст, выразительные шрифты, смелая палитра. - [friendly](https://affpapa.org/nevibecode/skills/friendly.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл задаёт агенту правила дружелюбного интерфейса: скруглённые элементы, много воздуха, пастельная палитра. - [bold](https://affpapa.org/nevibecode/skills/bold.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл настраивает агента на генерацию правил дизайн-системы с плотной типографикой и стандартом WCAG 2.2 AA. - [gradient](https://affpapa.org/nevibecode/skills/gradient.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл задаёт правила для интерфейсов с плавными цветовыми переходами: токены, типографика, состояния компонентов и требования доступности. - [colorful](https://affpapa.org/nevibecode/skills/colorful.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл задаёт агенту правила дизайн-системы: контрастные палитры, токены, состояния компонентов и критерии доступности. - [creative](https://affpapa.org/nevibecode/skills/creative.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Задаёт правила дизайн-системы для лендингов с акцентной типографикой Bangers и яркой графикой. - [doodle](https://affpapa.org/nevibecode/skills/doodle.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл задаёт игровой doodle-стиль для интерфейсов: рукописные шрифты, наброски и неровные линии. - [spacious](https://affpapa.org/nevibecode/skills/spacious.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Задаёт агенту правила вёрстки с щедрыми отступами, сеткой 8pt и токенами цветов. - [paper](https://affpapa.org/nevibecode/skills/paper.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Задаёт правила дизайн-системы Paper Design с палитрой, шрифтами Roboto и Montserrat и проверками доступности. - [futuristic](https://affpapa.org/nevibecode/skills/futuristic.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл задаёт футуристичную систему дизайна: типографику, токены, состояния компонентов и правила доступности. - [trees](https://affpapa.org/nevibecode/skills/trees.md) — скилл · pierrecomputer · Claude Code, Codex, Cursor +3 · 307 установок — Помогает настроить интерактивное дерево файлов на базе @pierre/trees. - [tailwindcss](https://affpapa.org/nevibecode/skills/tailwindcss.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл для ИИ-агента, который помогает верстать интерфейсы на Tailwind CSS: сетки, типографика, адаптив, темы и паттерны компонентов. - [optimize-web-animations](https://affpapa.org/nevibecode/skills/optimize-web-animations.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1700 установок — Останавливает фоновую анимацию вне экрана и устраняет утечки памяти во фронтенде. - [progressive-blur](https://affpapa.org/nevibecode/skills/progressive-blur.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл создаёт верхний или нижний градиентный blur в CSS через слои backdrop-filter. - [cobejs](https://affpapa.org/nevibecode/skills/cobejs.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл помогает агенту собрать лёгкий вращающийся глобус с метками на cobe, без полного three.js. - [native-feel-cross-platform-desktop](https://affpapa.org/nevibecode/skills/native-feel-cross-platform-desktop.md) — скилл · yetone · Claude Code, Codex, Cursor +3 · 608 установок — Скилл для проектирования кросс-платформенных десктопных приложений, которые ощущаются нативными: окна, хоткеи, материалы, запуск. - [anti-ui-slop](https://affpapa.org/nevibecode/skills/davepoon-anti-ui-slop.md) — скилл · davepoon · Claude Code, Codex, Cursor +3 · 475 установок — Не даёт агенту выдать типовой интерфейс: разбирает экран по контексту продукта, закрывает обязательные состояния и проверяет результат на явные дефекты. - [sega](https://affpapa.org/nevibecode/skills/sega.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 установок — Задаёт правила аркадного ретро-интерфейса: пиксельный шрифт VT323, нулевые скругления и кнопки с физическим смещением. - [matrix](https://affpapa.org/nevibecode/skills/matrix.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 установок — Скилл задаёт правила для тёмного Matrix-интерфейса: токены, компоненты, состояния и требования доступности. - [riso](https://affpapa.org/nevibecode/skills/riso.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 установок — Задаёт агенту правила дизайн-системы в стиле двухцветной ризограф-печати: тёплая бумага, розовый акцент, синие заголовки. - [fiction](https://affpapa.org/nevibecode/skills/fiction.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 установок — Скилл задаёт правила дизайн-системы Fiction в стиле детских книг: тёплый кремовый фон, шрифт Cossette Texte, толстые чёрные контуры и стандарт доступности WCAG 2.2 AA. - [terracotta](https://affpapa.org/nevibecode/skills/terracotta.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл задаёт ИИ-агенту правила дизайн-системы Terracotta: кремовые поверхности, тёмно-коричневые заголовки антиквой и один терракотовый акцент. - [impeccable](https://affpapa.org/nevibecode/skills/typeuish-impeccable.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл задаёт агенту правила дизайн-системы: токены, типографику, состояния компонентов и проверку доступности. - [codex](https://affpapa.org/nevibecode/skills/typeuish-codex.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл задаёт строгий минималистичный стиль интерфейса и генерирует спецификации дизайн-системы по стандарту WCAG 2.2 AA. - [sketch](https://affpapa.org/nevibecode/skills/sketch.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл задаёт правила дизайн-системы для интерфейсов в стиле ручного скетча. - [blender-web-pipeline](https://affpapa.org/nevibecode/skills/blender-web-pipeline.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 3500 установок — Скилл настраивает экспорт 3D-моделей из Blender в веб-формат glTF 2.0. - [figma-build](https://affpapa.org/nevibecode/skills/figma-build.md) — скилл · awdr74100 · Claude Code, Codex, Cursor +3 · 1300 установок — Собирает дизайн в подключённом Figma-файле из кода или описания и переиспользует его компоненты, переменные и стили. - [swiftui-animation](https://affpapa.org/nevibecode/skills/swiftui-animation.md) — скилл · dpearson2699 · Claude Code, Codex, Cursor +3 · 5400 установок — Скилл помогает настраивать анимации в SwiftUI. - [webgl-3d-object](https://affpapa.org/nevibecode/skills/webgl-3d-object.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1600 установок — Добавляет в агент правила генерации трёхмерных объектов на Three.js с честным PBR-освещением, тенями и анимацией вместо псевдо-3D на CSS. - [video-to-superprompt](https://affpapa.org/nevibecode/skills/video-to-superprompt.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1600 установок — Разбирает референсное видео и готовит подробный промпт для воссоздания интерфейса, анимаций и прокрутки. - [webgl-landing-steering](https://affpapa.org/nevibecode/skills/webgl-landing-steering.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл помогает выбрать визуальное направление, стек Three.js и ограничения производительности для лендинга с WebGL до написания кода. - [masked-reveal](https://affpapa.org/nevibecode/skills/masked-reveal.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл добавляет появление слов через маску при прокрутке с GSAP ScrollTrigger. - [nuxt-seo](https://affpapa.org/nevibecode/skills/nuxt-seo.md) — скилл · onmax · Claude Code, Codex, Cursor +3 · 3100 установок — Помогает агенту настроить SEO в Nuxt: robots, карту сайта, OG-изображения и структурированные данные. - [stripe-apps](https://affpapa.org/nevibecode/skills/stripe-stripe-apps.md) — скилл · stripe · Claude Code, Codex, Cursor +3 · 1500 установок — Помогает создавать и проверять Stripe Apps, настраивать UI для панели управления и кастомные скрипты биллинга. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=21 ## Уточнить [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