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

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

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

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

- [plan-ui-change](https://affpapa.org/nevibecode/skills/plan-ui-change.md) — скилл · dotnet · Claude Code, Codex, Cursor +3 · 3000 установок — Разбивает сложную страницу Blazor на отдельные компоненты до того, как агент начнёт писать код.
- [collect-user-input](https://affpapa.org/nevibecode/skills/collect-user-input.md) — скилл · dotnet · Claude Code, Codex, Cursor +3 · 3000 установок — Скилл для работы с формами в Blazor: EditForm, встроенные компоненты ввода, валидация и обработка отправки.
- [coordinate-components](https://affpapa.org/nevibecode/skills/coordinate-components.md) — скилл · dotnet · Claude Code, Codex, Cursor +3 · 3000 установок — Скилл учит агента связывать состояние компонентов Blazor без цепочек параметров от предка к потомку.
- [create-blazor-project](https://affpapa.org/nevibecode/skills/create-blazor-project.md) — скилл · dotnet · Claude Code, Codex, Cursor +3 · 3000 установок — Скилл проводит агента через выбор режима рендеринга Blazor и запускает dotnet new blazor с нужными флагами.
- [author-component](https://affpapa.org/nevibecode/skills/author-component.md) — скилл · dotnet · Claude Code, Codex, Cursor +3 · 3100 установок — Помогает проектировать и проверять компоненты Blazor без вызовов JavaScript.
- [fetch-and-send-data](https://affpapa.org/nevibecode/skills/fetch-and-send-data.md) — скилл · dotnet · Claude Code, Codex, Cursor +3 · 3100 установок — Помогает загружать и отправлять данные через API в Blazor-компонентах.
- [component-canvas](https://affpapa.org/nevibecode/skills/component-canvas.md) — скилл · ibelick · Claude Code, Codex, Cursor +3 · 685 установок — Собирает полноэкранный канвас, где компоненты проекта показаны как есть: с панорамированием, зумом и сравнением вариантов.
- [motion-framer](https://affpapa.org/nevibecode/skills/motion-framer.md) — скилл · freshtechbro · Claude Code, Codex, Cursor +3 · 5900 установок — Помогает агенту добавлять анимации Motion и Framer Motion в React-интерфейсы: от эффектов наведения до переходов между состояниями.
- [support-prerendering](https://affpapa.org/nevibecode/skills/support-prerendering.md) — скилл · dotnet · Claude Code, Codex, Cursor +3 · 3000 установок — Настраивает интерактивные компоненты Blazor для работы с пререндерингом.
- [flags-sdk](https://affpapa.org/nevibecode/skills/flags-sdk.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 2600 установок — Скилл помогает подключить Flags SDK и описать feature flags в коде Next.js или SvelteKit.
- [angular-forms](https://affpapa.org/nevibecode/skills/angular-forms.md) — скилл · analogjs · Claude Code, Codex, Cursor +3 · 7100 установок — Скилл для форм на Signal Forms в Angular v21+, который больше не поддерживают: в пакете осталось уведомление о замене на официальные скиллы Angular.
- [color-expert](https://affpapa.org/nevibecode/skills/meodai-color-expert.md) — скилл · meodai · Claude Code, Codex, Cursor +3 · 2700 установок — Скилл для работы с колористикой, цветовым пространством OKLCH, шкалами дизайн-систем и палитрами для генеративной графики.
- [vueuse-functions](https://affpapa.org/nevibecode/skills/vueuse-functions.md) — скилл · SerKo · Claude Code, Codex, Cursor +3 · 3700 установок — Скилл подбирает функции VueUse для задач во Vue.js и Nuxt и помогает применять их вместо собственного кода.
- [open-edit](https://affpapa.org/nevibecode/skills/open-edit.md) — скилл · veedstudio · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл для сборки и монтажа видео через HTML-страницы и CLI-сервисы VEED.
- [senior-fullstack](https://affpapa.org/nevibecode/skills/senior-fullstack.md) — скилл · Alireza Rezvani · Claude Code · 1390 установок — Собирает структуру проекта под Next.js, FastAPI, MERN или Django и проверяет качество кода с оценкой безопасности.
- [angular-routing](https://affpapa.org/nevibecode/skills/angular-routing.md) — скилл · analogjs · Claude Code, Codex, Cursor +3 · 6800 установок — Скилл от AnalogJS для настройки маршрутизации в Angular v20+.
- [ui-ugui](https://affpapa.org/nevibecode/skills/ui-ugui.md) — скилл · Unity-Technologies · Claude Code, Codex, Cursor +3 · 6400 установок — Скилл помогает разбирать, создавать и точечно менять интерфейсы Unity uGUI.
- [create-datadriven-aspnetcore](https://affpapa.org/nevibecode/skills/create-datadriven-aspnetcore.md) — скилл · dotnet · Claude Code, Codex, Cursor +3 · 2800 установок — Генерирует CRUD-код для ASP.NET Core без CLI-генераторов.
- [diffs](https://affpapa.org/nevibecode/skills/diffs.md) — скилл · pierrecomputer · Claude Code, Codex, Cursor +3 · 472 установки — Скилл для работы с библиотекой @pierre/diffs: подсветка синтаксиса, диффы, патчи и конфликты слияния в приложении.
- [cmux-capture](https://affpapa.org/nevibecode/skills/cmux-capture.md) — скилл · manaflow-ai · Claude Code, Codex, Cursor +3 · 383 установки — Скилл помогает снять скриншот окна cmux или записать его в видео.
- [design-lab](https://affpapa.org/nevibecode/skills/design-lab.md) — скилл · 0xdesign · Claude Code, Codex, Cursor +3 · 2000 установок — Скилл проводит дизайн-интервью, собирает пять разных вариантов интерфейса во временной лаборатории и доводит выбранный до плана внедрения.
- [tanstack-start-best-practices](https://affpapa.org/nevibecode/skills/tanstack-start-best-practices.md) — скилл · DeckardGer · Claude Code, Codex, Cursor +3 · 9800 установок — Свод правил и паттернов для full-stack приложений на TanStack Start.
- [react-email](https://affpapa.org/nevibecode/skills/react-email.md) — скилл · Resend · Claude Code, Codex, Cursor +3 · 12600 установок — Скилл для сборки HTML-писем на React-компонентах.
- [information-architecture](https://affpapa.org/nevibecode/skills/information-architecture.md) — скилл · julianoczkowski · Claude Code, Codex, Cursor +3 · 5900 установок — Скилл помогает спроектировать структуру веб-приложения или сайта до отрисовки интерфейса.
- [design-tokens](https://affpapa.org/nevibecode/skills/design-tokens.md) — скилл · julianoczkowski · Claude Code, Codex, Cursor +3 · 5900 установок — Генерирует файл дизайн-токенов — CSS-переменные или конфиг Tailwind — по выбранной эстетике, со светлой и тёмной темами.
- [angular-http](https://affpapa.org/nevibecode/skills/angular-http.md) — скилл · analogjs · Claude Code, Codex, Cursor +3 · 6500 установок — Скилл для настройки HTTP-запросов в Angular v20+ через сигналы и HttpClient.
- [shopify](https://affpapa.org/nevibecode/skills/shopify.md) — скилл · Shopify · Claude Code, Codex, Cursor +3 · 4800 установок — Официальный скилл для разработки под Shopify: от Admin GraphQL API и тем на Liquid до Hydrogen, компонентов Polaris и команд Shopify CLI.
- [shadcn-ui-flutter](https://affpapa.org/nevibecode/skills/shadcn-ui-flutter.md) — скилл · nank1ro · Claude Code, Codex, Cursor +3 · 678 установок — Скилл с документацией и примерами пакета shadcn_ui для Flutter: темы, компоненты, готовые сниппеты.
- [huggingface-lora-space-builder](https://affpapa.org/nevibecode/skills/huggingface-lora-space-builder.md) — скилл · huggingface · Claude Code, Codex, Cursor +3 · 810 установок — Создаёт и публикует веб-демо на Gradio в Hugging Face Spaces для весов LoRA.
- [design-review](https://affpapa.org/nevibecode/skills/design-review.md) — скилл · julianoczkowski · Claude Code, Codex, Cursor +3 · 5800 установок — Проводит структурированную критику интерфейса по брифу и коду: иерархия, консистентность, адаптивность, доступность.
- [skybridge](https://affpapa.org/nevibecode/skills/skybridge.md) — скилл · alpic-ai · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл ведёт от идеи до публикации: помогает собрать ChatGPT-плагин или MCP App, отладить его и выложить в продакшен.
- [router-query](https://affpapa.org/nevibecode/skills/router-query.md) — скилл · TanStack · Claude Code, Codex, Cursor +3 · 366 установок — Связывает TanStack Router с TanStack Query для предзагрузки данных в лоадерах, кэширования через useSuspenseQuery и изоляции QueryClient при SSR.
- [compose-expert](https://affpapa.org/nevibecode/skills/compose-expert.md) — скилл · vitorpamplona · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл с правилами разработки общего UI на Jetpack Compose в проекте Amethyst: навигация, адаптивная вёрстка и ревью компонентов.
- [oklch-skill](https://affpapa.org/nevibecode/skills/oklch-skill.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 4600 установок — Переводит цвета в OKLCH, строит палитры без сдвига тона и проверяет контраст по APCA и WCAG.
- [add-app-to-server](https://affpapa.org/nevibecode/skills/add-app-to-server.md) — скилл · modelcontextprotocol · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл добавляет интерактивный HTML-интерфейс к инструментам уже работающего MCP-сервера.
- [truesheet-usage](https://affpapa.org/nevibecode/skills/truesheet-usage.md) — скилл · lodev09 · Claude Code, Codex, Cursor +3 · 828 установок — Скилл для ИИ-агента, который помогает писать код с @lodev09/react-native-true-sheet: паттерны интеграции, детенты, скролл, навигация.
- [page-mascot](https://affpapa.org/nevibecode/skills/page-mascot.md) — скилл · nilbuild · Claude Code, Codex, Cursor +3 · 1300 установок — Ставит на страницу чиби-персонажа, который поворачивает голову к курсору и реагирует на клик.
- [cinematic-gsap-lenis-motion-system](https://affpapa.org/nevibecode/skills/cinematic-gsap-lenis-motion-system.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 2400 установок — Настраивает кинематографичную анимацию интерфейса на GSAP, ScrollTrigger и Lenis.
- [migrate](https://affpapa.org/nevibecode/skills/toss-migrate.md) — скилл · toss · Claude Code, Codex, Cursor +3 · 314 установок — Разбирает ваш код на lodash и показывает, как заменить функции на es-toolkit или es-toolkit/compat.
- [svg-icon-generator](https://affpapa.org/nevibecode/skills/svg-icon-generator.md) — скилл · Jeremy Longshore · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл для задач с SVG-иконками: подсказывает шаги, пишет код и проверяет результат.

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

## Уточнить
[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
