# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 5 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=5 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [better-accessibility](https://affpapa.org/nevibecode/skills/better-accessibility.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 29600 установок — Проверяет доступность интерфейса по WCAG 2.2 и исправляет найденные проблемы в стилях проекта. - [better-writing](https://affpapa.org/nevibecode/skills/better-writing.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 29100 установок — Скилл проверяет и пишет текст интерфейса: ошибки, пустые экраны, кнопки и подсказки. - [game-engine](https://affpapa.org/nevibecode/skills/game-engine.md) — скилл (официальный GitHub) · github · GitHub Copilot · 13140 установок — Помогает GitHub Copilot создавать браузерные игры и игровые движки на HTML5 и JavaScript. - [flags](https://affpapa.org/nevibecode/skills/flags.md) — скилл · react · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл запускает проверку feature flags в React и помогает сравнить каналы релизов. - [flow](https://affpapa.org/nevibecode/skills/flow.md) — скилл · react · Claude Code, Codex, Cursor +3 · 1100 установок — Запускает проверку типов Flow в проекте React и показывает ошибки с файлами и строками. - [penpot-uiux-design](https://affpapa.org/nevibecode/skills/penpot-uiux-design.md) — скилл (официальный GitHub) · github · GitHub Copilot · 12782 установки — Скилл для создания интерфейсов в Penpot через MCP-инструменты: веб, мобайл, дашборды, дизайн-системы. - [transitions-dev](https://affpapa.org/nevibecode/skills/transitions-dev.md) — скилл · Jakubantalik · Claude Code, Codex, Cursor +3 · 20300 установок — Скилл с готовыми CSS-переходами для веб-приложений: модалки, дропдауны, тосты, скелетоны. - [design-is](https://affpapa.org/nevibecode/skills/design-is.md) — скилл · thedotmack · Claude Code, Codex, Cursor +3 · 4200 установок — Скилл проверяет интерфейс по десяти принципам Дитера Рамса, выставляет баллы с доказательствами и готовит промпт для команды /make-plan. - [nextjs-app-router-patterns](https://affpapa.org/nevibecode/skills/nextjs-app-router-patterns.md) — скилл · Seth Hobson · Claude Code, Codex, Cursor · 32529 установок — Помогает строить приложения на Next.js App Router: выбирать режим рендеринга, организовывать маршруты и получать данные. - [web-quality-audit](https://affpapa.org/nevibecode/skills/web-quality-skills-web-quality-audit.md) — скилл · web-quality-skills · Claude Code, Codex, Cursor +3 · 32700 установок — Скилл для всестороннего аудита сайта: проверяет производительность, доступность, SEO и базовые практики по живым данным браузера. - [fixing-metadata](https://affpapa.org/nevibecode/skills/fixing-metadata.md) — скилл · ibelick · Claude Code, Codex, Cursor +3 · 18200 установок — Проверяет и приводит в порядок метаданные страниц: заголовки, описания, canonical, Open Graph, карточки Twitter, иконки и JSON-LD. - [core-web-vitals](https://affpapa.org/nevibecode/skills/web-quality-skills-core-web-vitals.md) — скилл · web-quality-skills · Claude Code, Codex, Cursor +3 · 32000 установок — Скилл для оптимизации Core Web Vitals: сначала измеряет, потом правит LCP, INP и CLS. - [react](https://affpapa.org/nevibecode/skills/react.md) — скилл · vercel-labs · Claude Code, Codex, Cursor +3 · 16300 установок — Скилл помогает собирать React-интерфейсы из JSON-спецификаций через json-render. - [vue-best-practices](https://affpapa.org/nevibecode/skills/vue-best-practices.md) — скилл · github.com/vuejs-ai · Claude Code, Codex, Cursor +3 · 42900 установок — Задаёт стандарты разработки на Vue 3 с Composition API и TypeScript. - [chakra-ui-builder](https://affpapa.org/nevibecode/skills/chakra-ui-builder.md) — скилл · chakra-ui · Claude Code, Codex, Cursor +3 · 3500 установок — Скилл собирает адаптивные и доступные интерфейсы на Chakra UI v3, подключает библиотеку и настраивает темы. - [modern-web-guidance](https://affpapa.org/nevibecode/skills/modern-web-guidance.md) — скилл · GoogleChrome · Claude Code, Codex, Cursor +3 · 35600 установок — Скилл ищет актуальные гайды по HTML, CSS и клиентскому JS и подставляет их в работу агента. - [playwright-best-practices](https://affpapa.org/nevibecode/skills/playwright-best-practices.md) — скилл · currents.dev · Claude Code, Codex, Cursor +3 · 98500 установок — Справочник по тестированию на Playwright: от написания E2E-сценариев до Page Object Model. - [core](https://affpapa.org/nevibecode/skills/core.md) — скилл · vercel-labs · Claude Code, Codex, Cursor +3 · 15000 установок — Описывает схему и каталог компонентов для json-render и собирает системный промпт, по которому ИИ выдаёт JSON-спеки интерфейсов. - [winui-app](https://affpapa.org/nevibecode/skills/winui-app.md) — скилл (официальный OpenAI) · openai · Claude Code, Codex, Cursor +3 · 3200 установок — Скилл помогает создавать, настраивать и проверять приложения WinUI 3 на C# с Windows App SDK. - [frontend-design](https://affpapa.org/nevibecode/skills/bytedance-frontend-design.md) — скилл · bytedance · Claude Code, Codex, Cursor +3 · 3700 установок — Скилл задаёт агенту направление в дизайне до того, как он напишет код. - [text-to-lottie](https://affpapa.org/nevibecode/skills/text-to-lottie.md) — скилл · diffusionstudio · Claude Code, Codex, Cursor +3 · 10700 установок — Генерирует, редактирует и чинит анимации Lottie JSON для локального плеера Skia Skottie. - [ai-elements](https://affpapa.org/nevibecode/skills/vercel-ai-elements.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 20400 установок — Библиотека React-компонентов для AI-интерфейсов: сообщения, история диалогов, поля ввода промптов, отображение вызовов инструментов. - [shadcn-svelte](https://affpapa.org/nevibecode/skills/shadcn-svelte.md) — скилл · huntabyte · Claude Code, Codex, Cursor +3 · 6700 установок — Скилл помогает работать с shadcn-svelte: добавлять компоненты, составлять интерфейсы, исправлять стили и отлаживать проекты. - [motion-design](https://affpapa.org/nevibecode/skills/motion-design.md) — скилл · LottieFiles · Claude Code, Codex, Cursor +3 · 19900 установок — Скилл помогает проектировать анимации интерфейса: выбирать длительность, easing и последовательность движения. - [a11y-debugging](https://affpapa.org/nevibecode/skills/a11y-debugging.md) — скилл · ChromeDevTools · Claude Code, Codex, Cursor +3 · 3600 установок — Проверяет доступность веб-страниц через Chrome DevTools MCP: семантику, ARIA, фокус, клавиатурную навигацию и контраст. - [extract-design-system](https://affpapa.org/nevibecode/skills/extract-design-system.md) — скилл · arvindrk · Claude Code, Codex, Cursor +3 · 130700 установок — Скилл находит базовые токены дизайна на веб-странице и создаёт начальные файлы tokens.json и tokens.css. - [figma-generate-design](https://affpapa.org/nevibecode/skills/openai-figma-generate-design.md) — скилл (официальный OpenAI) · openai · Claude Code, Codex, Cursor +3 · 2900 установок — Собирает и обновляет целые экраны в Figma из кода или описания, используя опубликованную дизайн-систему, а не нарисованные с нуля прямоугольники. - [figma-create-design-system-rules](https://affpapa.org/nevibecode/skills/figma-create-design-system-rules.md) — скилл (официальный OpenAI) · openai · Claude Code, Codex, Cursor +3 · 2900 установок — Генерирует правила дизайн-системы для кодовой базы при переносе макетов из Figma. - [shadcn-vue](https://affpapa.org/nevibecode/skills/shadcn-vue.md) — скилл · unovue · Claude Code, Codex, Cursor +3 · 5800 установок — Настраивает агента на правила shadcn-vue: добавление компонентов через CLI, вёрстка форм через FieldGroup, запрет space-y и строгие токены Tailwind. - [mobile-android-design](https://affpapa.org/nevibecode/skills/mobile-android-design.md) — скилл · Seth Hobson · Claude Code, Codex, Cursor · 24847 установок — Скилл помогает проектировать нативные Android-интерфейсы на Material Design 3 и Jetpack Compose. - [debug-optimize-lcp](https://affpapa.org/nevibecode/skills/debug-optimize-lcp.md) — скилл · ChromeDevTools · Claude Code, Codex, Cursor +3 · 3600 установок — Разбирает Largest Contentful Paint на четыре последовательных этапа и показывает, где именно тормозит загрузка главного контента страницы. - [design-critique](https://affpapa.org/nevibecode/skills/design-critique.md) — скилл (официальный Anthropic) · anthropics · Claude Code, Codex, Cursor +3 · 5300 установок — Скилл проводит структурированный разбор интерфейса по критериям доступности, визуальной иерархии и удобства. - [next-intl-add-language](https://affpapa.org/nevibecode/skills/next-intl-add-language.md) — скилл (официальный GitHub) · github · GitHub Copilot · 9349 установок — Добавляет язык в Next.js-приложение с next-intl: переводит en.json и обновляет маршрутизацию. - [design-mobile-apps](https://affpapa.org/nevibecode/skills/design-mobile-apps.md) — скилл · designed-by-ai · Claude Code, Codex, Cursor +3 · 1000000 установок — Генерирует экраны мобильных приложений через сервис Sleek и помогает перенести готовый макет в React Native или HTML. - [nuxt](https://affpapa.org/nevibecode/skills/nuxt.md) — скилл · Anthony Fu · Claude Code, Codex, Cursor +3 · 24100 установок — Скилл добавляет поддержку Nuxt 5 — полнофункционального Vue-фреймворка с серверным рендерингом, файловой маршрутизацией и автоимпортами. - [agentation](https://affpapa.org/nevibecode/skills/agentation.md) — скилл · benjitaylor · Claude Code, Codex, Cursor +3 · 13600 установок — Ставит в Next.js-проект панель визуальных отзывов и по запросу связывает её с кодинг-агентом через MCP. - [mobile-ios-design](https://affpapa.org/nevibecode/skills/mobile-ios-design.md) — скилл · Seth Hobson · Claude Code, Codex, Cursor · 23659 установок — Помогает проектировать нативные интерфейсы iOS и писать SwiftUI-вью по Apple HIG. - [vscode-ext-commands](https://affpapa.org/nevibecode/skills/vscode-ext-commands.md) — скилл (официальный GitHub) · github · GitHub Copilot · 9000 установок — Скилл подсказывает, как добавлять команды в расширения VS Code: задавать имена, видимость, локализацию и связанные параметры. - [fluentui-blazor](https://affpapa.org/nevibecode/skills/fluentui-blazor.md) — скилл (официальный GitHub) · github · GitHub Copilot · 9000 установок — Скилл подсказывает, как подключать Microsoft Fluent UI Blazor и собирать интерфейсы из Fluent-компонентов. - [chakra-ui-refactor](https://affpapa.org/nevibecode/skills/chakra-ui-refactor.md) — скилл · chakra-ui · Claude Code, Codex, Cursor +3 · 2800 установок — Проверяет компоненты на правила Chakra UI v3 и переводит вёрстку с HTML, Tailwind или styled-components. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=6 ## Уточнить [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