# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 19 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=19 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [tanstack-router-best-practices](https://affpapa.org/nevibecode/skills/tanstack-router-best-practices.md) — скилл · DeckardGer · Claude Code, Codex, Cursor +3 · 7100 установок — Набор правил по TanStack Router для React: типизация, загрузка данных, search params и навигация. - [tailwind-css-patterns](https://affpapa.org/nevibecode/skills/tailwind-css-patterns.md) — скилл · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 17700 установок — Скилл с готовыми паттернами Tailwind CSS: адаптивные сетки, карточки, формы, тёмная тема. - [brutalism](https://affpapa.org/nevibecode/skills/brutalism.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл задаёт агенту правила бруталистского дизайна: бетонная эстетика, резкие макеты, функциональный минимализм. - [material](https://affpapa.org/nevibecode/skills/material.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл задаёт правила Material Design для проектирования интерфейсов: фиксирует шкалу отступов, типографику, токены цветов и требования WCAG 2.2 AA. - [corporate](https://affpapa.org/nevibecode/skills/corporate.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл задаёт корпоративную дизайн-систему для интерфейсов: сетку, токены, состояния компонентов и требования доступности. - [contemporary](https://affpapa.org/nevibecode/skills/contemporary.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Задаёт агенту правила современного минималистичного интерфейса: bento-сетки, тёмная тема, доступность по WCAG 2.2 AA. - [sleek](https://affpapa.org/nevibecode/skills/sleek.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Задаёт правила дизайн-системы в минималистичном стиле: фиксирует сетку 8pt, шрифты Inter и JetBrains Mono, палитру и требования WCAG 2.2 AA. - [claymorphism](https://affpapa.org/nevibecode/skills/claymorphism.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл задаёт ИИ-агенту правила дизайн-системы claymorphism: мягкие объёмные формы, палитра, типографика, состояния компонентов. - [storytelling](https://affpapa.org/nevibecode/skills/typeuish-storytelling.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл задаёт агенту рамки дизайн-системы: токены, состояния компонентов, доступность и структуру вывода. - [modern](https://affpapa.org/nevibecode/skills/modern.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 установок — Задаёт редакционный стиль с антиквой IBM Plex Serif и палитрой на базе токена #553F83. - [neumorphism](https://affpapa.org/nevibecode/skills/neumorphism.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл задаёт правила для неоморфного интерфейса: токены, состояния компонентов и требования доступности. - [professional](https://affpapa.org/nevibecode/skills/professional.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 установок — Задаёт агенту правила дизайн-системы: токены, типографику, состояния компонентов и критерии доступности. - [refined](https://affpapa.org/nevibecode/skills/refined.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 установок — Задаёт правила дизайн-системы в стиле Refined с шрифтами Playfair Display и JetBrains Mono. - [neobrutalism](https://affpapa.org/nevibecode/skills/neobrutalism.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл задаёт правила для нео-бруталистского интерфейса: контраст, цветовые токены, состояния компонентов и доступность. - [shadcn](https://affpapa.org/nevibecode/skills/typeuish-shadcn.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 установок — Задаёт агенту правила дизайн-системы в стиле shadcn/ui: токены, типографику, состояния компонентов и критерии доступности. - [react-component-performance](https://affpapa.org/nevibecode/skills/dimillian-react-component-performance.md) — скилл · Dimillian · Claude Code, Codex, Cursor +3 · 1100 установок — Находит причины медленного рендера в React, изолирует часто обновляемый стейт и убирает лишние вычисления. - [gsap](https://affpapa.org/nevibecode/skills/mengto-gsap.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1800 установок — Скилл для ИИ-агента, который помогает писать и отлаживать веб-анимации на GSAP: таймлайны, ScrollTrigger, stagger, трансформации. - [design-first-ui-prompting](https://affpapa.org/nevibecode/skills/design-first-ui-prompting.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1800 установок — Превращает сырые идеи интерфейсов в строгие спецификации для генерации UI. - [gsap-scrolltrigger-storytelling](https://affpapa.org/nevibecode/skills/gsap-scrolltrigger-storytelling.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1800 установок — Скилл для скролл-сторителлинга: закреплённые секции, послойное появление интерфейса и переходы между сценами на GSAP ScrollTrigger. - [threejs-asset-pipeline](https://affpapa.org/nevibecode/skills/threejs-asset-pipeline.md) — скилл · CloudAI-X · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл для сжатия и проверки glTF-моделей перед загрузкой в three.js: команды gltf-transform, Draco, meshopt, KTX2 и gltfjsx. - [threejs-react-three-fiber](https://affpapa.org/nevibecode/skills/threejs-react-three-fiber.md) — скилл · CloudAI-X · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл для тех, кто пишет three.js-сцены компонентами React. - [react-three-fiber](https://affpapa.org/nevibecode/skills/react-three-fiber.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 3800 установок — Скилл обучает агента строить декларативные 3D-сцены в React через Three.js, настраивать хуки рендера и загружать модели через Suspense. - [tech-stack-evaluator](https://affpapa.org/nevibecode/skills/tech-stack-evaluator.md) — скилл · Alireza Rezvani · Claude Code · 904 установки — Сравнивает библиотеки, фреймворки и облачные платформы по взвешенным оценкам. - [huashu-motion](https://affpapa.org/nevibecode/skills/huashu-motion.md) — скилл · 花叔 · Claude Code, Codex, Cursor +3 · 827 установок — Собирает motion graphics, launch-видео и explainers из редактируемого кода. - [figma-codegen](https://affpapa.org/nevibecode/skills/figma-codegen.md) — скилл · awdr74100 · Claude Code, Codex, Cursor +3 · 1300 установок — Генерирует код по макетам Figma с учётом стека проекта, переиспользуя готовые компоненты и дизайн-токены вместо вёрстки с нуля. - [pinme](https://affpapa.org/nevibecode/skills/pinme.md) — скилл · glitternetwork · Claude Code, Codex, Cursor +3 · 710 установок — Загружает статические сборки в IPFS и развёртывает фулстек-проекты с бэкендом на Cloudflare Workers и базой D1. - [immersive](https://affpapa.org/nevibecode/skills/immersive.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл формулирует правила дизайн-системы для выставочных интерфейсов. - [claude](https://affpapa.org/nevibecode/skills/claude.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Задаёт агенту правила оформления интерфейса: тёплая бумажная основа, почти чёрные чернила, сдержанный акцент. - [tetris](https://affpapa.org/nevibecode/skills/tetris.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл задаёт агенту правила дизайн-системы в духе классической блочной игры: яркие цвета, крупные шрифты, плотная вёрстка. - [pacman](https://affpapa.org/nevibecode/skills/pacman.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл настраивает ИИ-агента на генерацию дизайн-систем и интерфейсов в ретро-стиле аркадных автоматов с пиксельными шрифтами, точечными рамками и контрастной палитрой. - [perspective](https://affpapa.org/nevibecode/skills/perspective.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Задаёт агенту правила дизайн-системы с изометрией, точками схода и слоями. - [expressive](https://affpapa.org/nevibecode/skills/expressive.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Задаёт правила дизайн-системы с яркой палитрой и моноширинным шрифтом IBM Plex Mono. - [skeumorphism](https://affpapa.org/nevibecode/skills/skeumorphism.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл задаёт правила для интерфейсов в стиле скевоморфизма: текстуры, 3D-эффекты и знакомые физические метафоры. - [neon](https://affpapa.org/nevibecode/skills/typeuish-neon.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Задаёт агенту правила дизайн-системы Neon: контрастные пары цветов, свечение и токены вместо сырых значений. - [retro](https://affpapa.org/nevibecode/skills/typeuish-retro.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Задаёт ретро-стиль интерфейса с контрастной палитрой, шрифтами Macondo и JetBrains Mono, а также формирует гайдлайны по стандарту WCAG 2.2 AA. - [vibrant](https://affpapa.org/nevibecode/skills/vibrant.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Задаёт агенту правила яркого интерфейса: палитра, шрифты, отступы и требования доступности. - [levels](https://affpapa.org/nevibecode/skills/levels.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл для ИИ-агента: выдаёт правила дизайн-системы Levels — токены, состояния компонентов, доступность. - [dithered](https://affpapa.org/nevibecode/skills/dithered.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Задаёт правила дизайн-системы в ретро-стиле с точечными паттернами. - [fantasy](https://affpapa.org/nevibecode/skills/fantasy.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл задаёт игровую фэнтезийную визуальную систему для интерфейсов: палитру, типографику, состояния компонентов и правила доступности. - [mono](https://affpapa.org/nevibecode/skills/mono.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 установок — Задаёт агенту правила дизайн-системы в стиле matrix: моноширинные шрифты, высокий контраст, компактная плотность. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=20 ## Уточнить [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