# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 18 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=18 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [frontend-design](https://affpapa.org/nevibecode/skills/julianoczkowski-frontend-design.md) — скилл · julianoczkowski · Claude Code, Codex, Cursor +3 · 5500 установок — Скилл задаёт правила вёрстки интерфейсов по конкретным эстетическим стилям. - [shadcn-ui](https://affpapa.org/nevibecode/skills/giuseppe-trisciuoglio-shadcn-ui.md) — скилл · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 22400 установок — Скилл подсказывает агенту, как ставить и настраивать компоненты shadcn/ui: кнопки, диалоги, таблицы, формы с React Hook Form и Zod. - [senior-qa](https://affpapa.org/nevibecode/skills/senior-qa.md) — скилл · Alireza Rezvani · Claude Code · 1178 установок — Скилл создаёт заготовки unit-, integration- и E2E-тестов для React и Next.js. - [router-plugin](https://affpapa.org/nevibecode/skills/router-plugin.md) — скилл · TanStack · Claude Code, Codex, Cursor +3 · 339 установок — Настраивает плагин сборщика для генерации маршрутов и разделения кода в TanStack Router. - [design-brief](https://affpapa.org/nevibecode/skills/design-brief.md) — скилл · julianoczkowski · Claude Code, Codex, Cursor +3 · 5300 установок — Проводит интервью о задаче, смотрит существующий код и сохраняет дизайн-бриф в markdown. - [brief-to-tasks](https://affpapa.org/nevibecode/skills/brief-to-tasks.md) — скилл · julianoczkowski · Claude Code, Codex, Cursor +3 · 5200 установок — Превращает дизайн-бриф в упорядоченный список задач методом вертикальных срезов и сохраняет чек-лист в markdown-файл. - [design-flow](https://affpapa.org/nevibecode/skills/design-flow.md) — скилл · julianoczkowski · Claude Code, Codex, Cursor +3 · 5300 установок — Ведёт от уточняющих вопросов до готовых компонентов: шесть фаз подряд, каждая с подтверждением перед следующей. - [beui](https://affpapa.org/nevibecode/skills/beui.md) — скилл · starc007 · Claude Code, Codex, Cursor +3 · 844 установки — Подбирает и ставит анимированные React-компоненты beUI через MCP или реестр shadcn. - [angular-directives](https://affpapa.org/nevibecode/skills/angular-directives.md) — скилл · analogjs · Claude Code, Codex, Cursor +3 · 5700 установок — Скилл для Angular-директив, который больше не поддерживают. - [angular-di](https://affpapa.org/nevibecode/skills/angular-di.md) — скилл · analogjs · Claude Code, Codex, Cursor +3 · 5700 установок — Скилл для настройки внедрения зависимостей в Angular v20+ через inject() и токены. - [migrate-oai-app](https://affpapa.org/nevibecode/skills/migrate-oai-app.md) — скилл · modelcontextprotocol · Claude Code, Codex, Cursor +3 · 1100 установок — Переводит интерактивные виджеты с OpenAI Apps SDK на MCP Apps SDK. - [threejs-webgl](https://affpapa.org/nevibecode/skills/threejs-webgl.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 4600 установок — Скилл учит агента настраивать сцены Three.js, рендереры WebGL и WebGPU, свет, материалы и загрузку glTF-моделей. - [beautiful-shadows](https://affpapa.org/nevibecode/skills/beautiful-shadows.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 2200 установок — Скилл подставляет точные arbitrary-классы теней Tailwind для карточек, панелей и поповеров. - [leanback-to-compose-tv-migration](https://affpapa.org/nevibecode/skills/leanback-to-compose-tv-migration.md) — скилл · Google LLC · Claude Code, Codex, Cursor +3 · 772 установки — Скилл ведёт миграцию Android TV с Leanback и Android Views на Jetpack Compose for TV. - [ui-design-system](https://affpapa.org/nevibecode/skills/ui-design-system.md) — скилл · Alireza Rezvani · Claude Code · 1076 установок — Скилл собирает дизайн-токены, палитры, типографику и структуру компонентов. - [glassmorphism](https://affpapa.org/nevibecode/skills/typeuish-glassmorphism.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2900 установок — Задаёт агенту правила дизайн-системы в стиле глассморфизма с полупрозрачными слоями, размытием и контрастными токенами. - [cinematic-scroll-storytelling](https://affpapa.org/nevibecode/skills/cinematic-scroll-storytelling.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 2100 установок — Настраивает плавную прокрутку и сценарную анимацию страниц через Lenis и GSAP ScrollTrigger. - [blog-chart](https://affpapa.org/nevibecode/skills/blog-chart.md) — скилл · AgriciDaniel · Claude Code, Codex, Cursor +3 · 2500 установок — Генерирует адаптивные SVG-диаграммы для статей в HTML и MDX. - [angular-tooling](https://affpapa.org/nevibecode/skills/angular-tooling.md) — скилл · analogjs · Claude Code, Codex, Cursor +3 · 5200 установок — Скилл для работы с Angular CLI в проектах Angular v20 и новее: создание проекта, генерация кода, сборка и тесты. - [ui](https://affpapa.org/nevibecode/skills/ui.md) — скилл · Unity-Technologies · Claude Code, Codex, Cursor +3 · 5000 установок — Определяет, на какой системе интерфейса писать в Unity, и передаёт запрос нужному скиллу. - [premium](https://affpapa.org/nevibecode/skills/premium.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2700 установок — Задаёт правила дизайн-системы в стиле Apple: токены, отступы, типографику и доступность. - [editorial](https://affpapa.org/nevibecode/skills/editorial.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2700 установок — Скилл задаёт правила редакционного дизайна: серифная типографика, 8pt-сетка, токены цветов и проверки доступности. - [react-native-unistyles-v3](https://affpapa.org/nevibecode/skills/react-native-unistyles-v3.md) — скилл · jpudysz · Claude Code, Codex, Cursor +3 · 529 установок — Скилл ведёт агента по react-native-unistyles v3: настройка Babel или Metro, темы, брейкпоинты, варианты и разбор типичных ошибок. - [bencium-innovative-ux-designer](https://affpapa.org/nevibecode/skills/bencium-innovative-ux-designer.md) — скилл · bencium · Claude Code, Codex, Cursor +3 · 7500 установок — Скилл помогает придумать собственный визуальный язык: десять типографических HTML-направлений, выбор человека и доводка до продакшена. - [d3k](https://affpapa.org/nevibecode/skills/d3k.md) — скилл · vercel-labs · Claude Code, Codex, Cursor +3 · 859 установок — Запускает локальный dev-сервер и браузер проекта под единым управлением с общей хронологией событий. - [threejs](https://affpapa.org/nevibecode/skills/mengto-threejs.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 2000 установок — Помогает агенту собирать и отлаживать интерактивные 3D-сцены на Three.js: сцена, камера, свет, загрузка glTF, контролы и производительность. - [animation-on-scroll](https://affpapa.org/nevibecode/skills/animation-on-scroll.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 2000 установок — Скилл добавляет элементам появление при входе во вьюпорт: IntersectionObserver плюс классы и кейфреймы под Tailwind. - [preline-mcp](https://affpapa.org/nevibecode/skills/preline-mcp.md) — скилл · htmlstreamofficial · Claude Code, Codex, Cursor +3 · 349 установок — Скилл подключает MCP-сервер Preline и вставляет готовые компоненты и блоки Preline UI прямо в ваши HTML-файлы. - [convert-web-app](https://affpapa.org/nevibecode/skills/convert-web-app.md) — скилл · modelcontextprotocol · Claude Code, Codex, Cursor +3 · 966 установок — Помогает добавить поддержку MCP App в существующее веб-приложение, сохранив его автономный запуск. - [threejs-performance](https://affpapa.org/nevibecode/skills/threejs-performance.md) — скилл · CloudAI-X · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл помогает находить узкие места в three.js: draw calls, память, CPU, тени и работу GPU. - [wp-patterns](https://affpapa.org/nevibecode/skills/wp-patterns.md) — скилл · WordPress · Claude Code, Codex, Cursor +3 · 2200 установок — Создаёт и обновляет паттерны блоков WordPress, проверяет их регистрацию и разметку. - [landing-page-guide-v2](https://affpapa.org/nevibecode/skills/landing-page-guide-v2.md) — скилл · bear2u · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл ведёт агента через выбор эстетики, дизайн-системы и 11 обязательных элементов лендинга. - [clerk](https://affpapa.org/nevibecode/skills/clerk.md) — скилл · clerk · Claude Code, Codex, Cursor +3 · 30000 установок — Разбирает запрос про Clerk и отправляет к нужному скиллу: настройка, CLI, паттерны фреймворков, биллинг, вебхуки. - [a11y-audit](https://affpapa.org/nevibecode/skills/a11y-audit.md) — скилл · Alireza Rezvani · Claude Code · 970 установок — Проверяет веб-проект на нарушения WCAG 2.2 уровней A и AA, предлагает исправления и повторно сверяет результат. - [macos-design-guidelines](https://affpapa.org/nevibecode/skills/macos-design-guidelines.md) — скилл · platform-design-skills · Claude Code, Codex, Cursor +3 · 4300 установок — Скилл передаёт агенту правила Apple Human Interface Guidelines для macOS. - [animation-systems](https://affpapa.org/nevibecode/skills/animation-systems.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 1900 установок — Инструкции для агента по созданию сдержанной веб-анимации в стиле Stripe, Linear и Apple. - [payload](https://affpapa.org/nevibecode/skills/payload.md) — скилл · payloadcms · Claude Code, Codex, Cursor +3 · 6900 установок — Помогает настраивать коллекции, хуки и права доступа в проектах на Payload CMS. - [bento](https://affpapa.org/nevibecode/skills/bento.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл задаёт правила для интерфейсов в стиле bento: модульная сетка, карточки, иерархия и мягкие отступы. - [enterprise](https://affpapa.org/nevibecode/skills/enterprise.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл задаёт правила тёмной дизайн-системы для дашбордов: сетки, стеклянные панели, токены и доступность. - [clean](https://affpapa.org/nevibecode/skills/clean.md) — скилл · typeui.sh · Claude Code, Codex, Cursor +3 · 2600 установок — Задаёт правила минималистичной дизайн-системы с сеткой 8pt, токенами цветов и требованиями WCAG 2.2 AA для интерфейсных компонентов. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=19 ## Уточнить [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