# Скиллы по теме «Фронтенд и UI»

Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов.

2909 карточек · страница 51 из 73

- HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=51
- Инструкция для агента: https://affpapa.org/nevibecode/agents.md

- [countdown-video](https://affpapa.org/nevibecode/skills/countdown-video.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл для сборки видео с обратным отсчётом: таймер, цифровые перекаты, формат mm:ss или dd:hh:mm:ss.
- [capacitor-deep-linking](https://affpapa.org/nevibecode/skills/capacitor-deep-linking.md) — скилл · Cap-go · Claude Code, Codex, Cursor +3 · 1300 установок — Настраивает и отлаживает диплинки, универсальные ссылки iOS и проверенные ссылки Android в проектах на Capacitor.
- [safe-area-handling](https://affpapa.org/nevibecode/skills/safe-area-handling.md) — скилл · Cap-go · Claude Code, Codex, Cursor +3 · 1300 установок — Чинит вёрстку в Capacitor-приложениях: контент под вырезом, Dynamic Island, домашним индикатором и панелью жестов Android.
- [debugging-capacitor](https://affpapa.org/nevibecode/skills/debugging-capacitor.md) — скилл · Cap-go · Claude Code, Codex, Cursor +3 · 1300 установок — Помогает находить и устранять сбои времени выполнения в приложениях на базе Capacitor для iOS и Android: от белого экрана при запуске до ошибок плагинов и блокировок сети.
- [angular-best-practices](https://affpapa.org/nevibecode/skills/angular-best-practices.md) — скилл · Boise-State-Development · Claude Code, Codex, Cursor +3 · 756 установок — Держит агента в рамках Angular 21: сигналы, standalone-компоненты, реактивные формы.
- [nuxtjs-vue-typescript](https://affpapa.org/nevibecode/skills/nuxtjs-vue-typescript.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 834 установки — Набор правил для разработки приложений на Nuxt 3 и Vue 3 с TypeScript и Tailwind CSS.
- [extract](https://affpapa.org/nevibecode/skills/adobe-extract.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 496 установок — Обходит страницы рабочего сайта и сохраняет дизайн-систему, типографику, палитру и структуру в каталог stardust/current/.
- [bundle-size-optimization](https://affpapa.org/nevibecode/skills/bundle-size-optimization.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 561 установка — Помогает уменьшить размер JS и CSS бандлов через разделение кода и tree shaking.
- [relational-database-web-cloudbase](https://affpapa.org/nevibecode/skills/relational-database-web-cloudbase.md) — скилл · TencentCloudBase · Claude Code, Codex, Cursor +3 · 899 установок — Показывает, как инициализировать @cloudbase/js-sdk в браузере и получить общий клиент реляционной базы CloudBase для запросов в стиле Supabase.
- [responsive-design](https://affpapa.org/nevibecode/skills/mindrally-responsive-design.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 830 установок — Скилл задаёт агенту правила адаптивной вёрстки: mobile-first, гибкие сетки, медиазапросы, адаптивные картинки и типографика.
- [sveltekit-svelte5-tailwind-skill](https://affpapa.org/nevibecode/skills/sveltekit-svelte5-tailwind-skill.md) — скилл · claude-skills · Claude Code, Codex, Cursor +3 · 561 установка — Скилл для сборки сайтов на SvelteKit 2, Svelte 5 и Tailwind CSS v4.
- [ghost](https://affpapa.org/nevibecode/skills/ghost.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 828 установок — Помогает агенту писать темы для Ghost CMS: Handlebars-шаблоны, partials, интеграция Tailwind CSS и Alpine.js, оптимизация картинок и SEO.
- [ionic-angular](https://affpapa.org/nevibecode/skills/ionic-angular.md) — скилл · capawesome-team · Claude Code, Codex, Cursor +3 · 1500 установок — Скилл для ИИ-агента, который ведёт по Angular-паттернам в Ionic: навигация, ленивая загрузка, формы, хуки жизненного цикла страниц.
- [e2e-playwright-testing](https://affpapa.org/nevibecode/skills/e2e-playwright-testing.md) — скилл · Agent Skills Contributors · Claude Code, Codex, Cursor +3 · 803 установки — Скилл для написания и разбора E2E-тестов на Playwright: локаторы, авторизация, формы, ассерты и конфиг для CI.
- [direct](https://affpapa.org/nevibecode/skills/direct.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 488 установок — Формирует спецификацию редизайна сайта на основе пожеланий пользователя.
- [vite](https://affpapa.org/nevibecode/skills/mindrally-vite.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 820 установок — Даёт агенту шаблоны конфигурации Vite: HMR, алиасы путей, сборку бандлов, интеграцию React, Vue и Vitest.
- [neo4j-nvl-skill](https://affpapa.org/nevibecode/skills/neo4j-nvl-skill.md) — скилл · neo4j-contrib · Claude Code, Codex, Cursor +3 · 716 установок — Помогает встроить интерактивный граф Neo4j в веб-приложение через Canvas или WebGL2 и настроить жесты взаимодействия.
- [21st-ui-review](https://affpapa.org/nevibecode/skills/21st-ui-review.md) — скилл · 21st-dev · Claude Code, Codex, Cursor +3 · 1300 установок — Проверяет существующий UI на доступность, адаптивность и расхождения с дизайн-системой проекта.
- [21st-ui-explore](https://affpapa.org/nevibecode/skills/21st-ui-explore.md) — скилл · 21st-dev · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл предлагает несколько разных направлений интерфейса, опираясь на дизайн-систему проекта и подборку референсов из 21st.
- [prepare-migration](https://affpapa.org/nevibecode/skills/prepare-migration.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 487 установок — Координирует подготовку сайта к миграции с редизайном: собирает инвентарь страниц, проверяет типы модулей и формирует дизайн-канон перед переносом.
- [blazor-expert](https://affpapa.org/nevibecode/skills/blazor-expert.md) — скилл · markpitt · Claude Code, Codex, Cursor +3 · 688 установок — Инструкции для Claude Code по созданию приложений на Blazor Server, WebAssembly и Hybrid.
- [angular](https://affpapa.org/nevibecode/skills/mindrally-angular.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 816 установок — Скилл настраивает ИИ-помощника на стандарты Angular и TypeScript: генерацию standalone-компонентов, реактивность на сигналах и отказ от типа any.
- [motion](https://affpapa.org/nevibecode/skills/mindrally-motion.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 812 установок — Задаёт агенту правила работы с библиотекой Motion в чистом JavaScript и TypeScript.
- [web-development](https://affpapa.org/nevibecode/skills/mindrally-web-development.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 815 установок — Скилл с правилами веб-разработки: сетка Bootstrap, вьюхи и модели Django, атрибуты HTMX.
- [Web Design Builder](https://affpapa.org/nevibecode/skills/web-design-builder.md) — скилл · rknall · Claude Code, Codex, Cursor +3 · 416 установок — Собирает HTML5-макеты и лендинги по описанию, а потом сам проверяет доступность и работу интерфейса через Playwright MCP.
- [state-management](https://affpapa.org/nevibecode/skills/state-management.md) — скилл · agent-skills · Claude Code, Codex, Cursor +3 · 790 установок — Скилл с готовыми паттернами TanStack Query v5 и Zustand v5: запросы, кеш, мутации, оптимистичные обновления и клиентские сторы.
- [web-motion-design](https://affpapa.org/nevibecode/skills/web-motion-design.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл, который подсказывает агенту, как делать CSS-анимации, JS-переходы и движение в React и Vue по 12 принципам анимации.
- [real-time-features](https://affpapa.org/nevibecode/skills/real-time-features.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 543 установки — Скилл помогает внедрять веб-сокеты, Server-Sent Events и long polling в веб-приложения.
- [web-performance-audit](https://affpapa.org/nevibecode/skills/web-performance-audit.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 543 установки — Скилл разбирает скорость загрузки страниц, находит узкие места и подсказывает, что чинить.
- [instantdb](https://affpapa.org/nevibecode/skills/instantdb.md) — скилл · instantdb · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл ведёт агента при сборке приложений на InstantDB: схема, права доступа, запросы, хранилище файлов.
- [wechat-miniprogram-skill](https://affpapa.org/nevibecode/skills/wechat-miniprogram-skill.md) — скилл · Gourdbaby · Claude Code, Codex, Cursor +3 · 1400 установок — Задаёт агенту правила разработки нативных мини-программ WeChat на JavaScript: производительность, размер кода, совместимость с платформой.
- [webpack-bundler](https://affpapa.org/nevibecode/skills/webpack-bundler.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 802 установки — Скилл задаёт агенту правила работы с конфигами Webpack: разбиение бандла, tree shaking, лоадеры и плагины.
- [browser-debugging](https://affpapa.org/nevibecode/skills/browser-debugging.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 540 установок — Скилл для разбора клиентских багов: ошибки JavaScript, проблемы вёрстки, просадки производительности.
- [filament-pro](https://affpapa.org/nevibecode/skills/filament-pro.md) — скилл · marcelorodrigo · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл для сборки админ-панелей Laravel на Filament v5: ресурсы, формы, таблицы, виджеты и тесты на Livewire v4.
- [three-js](https://affpapa.org/nevibecode/skills/three-js.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 798 установок — Задаёт правила разработки на Three.js и React Three Fiber: код на TypeScript, очистка ресурсов и оптимизация рендера.
- [design-system-creation](https://affpapa.org/nevibecode/skills/design-system-creation.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 537 установок — Скилл помогает собрать дизайн-систему: компоненты, токены, правила и документацию.
- [blazor](https://affpapa.org/nevibecode/skills/blazor.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 798 установок — Скилл задаёт агенту правила разработки на Blazor: жизненный цикл компонентов, привязка данных, управление состоянием и оптимизация рендеринга.
- [distinctive-frontend](https://affpapa.org/nevibecode/skills/distinctive-frontend.md) — скилл · podo · Claude Code, Codex, Cursor +3 · 588 установок — Генерирует интерфейсы без дефолтной «нейросетевой» эстетики: предлагает готовую типографику, анимации появления и стили Cyberpunk, Brutalist, Vaporwave или Nordic Minimalism.
- [ionic](https://affpapa.org/nevibecode/skills/ionic.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 797 установок — Задаёт агенту правила разработки на Ionic: структура проекта, компоненты, стили, ленивая загрузка и работа с Firebase.
- [graphic-design](https://affpapa.org/nevibecode/skills/graphic-design.md) — скилл · travisjneuman · Claude Code, Codex, Cursor +3 · 492 установки — Скилл с принципами графического дизайна для цифровых и печатных макетов: цвет, типографика, сетки, форматы файлов.

Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=52

## Уточнить
[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=<claude-code|codex|cursor|copilot|gemini-cli|windsurf|…>`, `&topic=<…>`, `&sort=installs|stars|new|updated` — значения в https://affpapa.org/nevibecode/agents.md

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md
