К основному содержанию
NeVibeCode · 75 карточек

Скиллы, плагины, субагенты и слэш-команды для задач: фронтенд и ui

Подборка для Claude Code, Codex и Cursor по теме «Фронтенд и UI»: скиллы, плагины, субагенты и слэш-команды, от популярных к нишевым.

prototype Matt Pocock скилл Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок webapp-testing официальный anthropics скилл Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. Claude Code Claude.ai 186 758установок web-artifacts-builder официальный anthropics скилл Скилл собирает сложные HTML-артефакты для claude.ai на React, Tailwind CSS и shadcn/ui. Подходит для интерфейсов с состоянием и маршрутизацией. Claude Code Claude.ai 112 122установок theme-factory официальный anthropics скилл Применяет готовые цветовые палитры и пары шрифтов к слайдам, документам и HTML-страницам. Подходит, когда материалу нужен единый стиль. Claude Code Claude.ai 94 921установок algorithmic-art официальный anthropics скилл Создаёт генеративное искусство на p5.js с seed-случайностью и настройкой параметров. Подходит для flow fields, частиц и кодовых арт-экспериментов. Claude Code Claude.ai 89 081установок chrome-devtools официальный github скилл Управляет живым Chrome через Chrome DevTools MCP: открывает страницы, проверяет ошибки и пишет трассы производительности. Нужен для отладки интерфейса прямо из агента. GitHub Copilot 15 258установок web-design-reviewer официальный github скилл Скилл осматривает работающий сайт, находит проблемы с вёрсткой, адаптивностью и доступностью, а затем может исправить их в исходном коде. Подойдёт, когда нужно проверить интерфейс и довести исправления до повторной проверки. GitHub Copilot 13 957установок tailwind-design-system Seth Hobson скилл Помогает строить дизайн-системы на Tailwind CSS v4. Пригодится для библиотеки компонентов или унификации интерфейса в проекте. Claude Code CX Codex Cursor 70 180установок game-engine официальный github скилл Помогает GitHub Copilot создавать браузерные игры и игровые движки на HTML5 и JavaScript. Подходит для 2D, 3D, физики, коллизий и управления. GitHub Copilot 13 140установок penpot-uiux-design официальный github скилл Скилл для создания интерфейсов в Penpot через MCP-инструменты: веб, мобайл, дашборды, дизайн-системы. Работает с API Penpot напрямую из редактора кода. GitHub Copilot 12 782установок webapp-testing официальный github скилл Тестирует локальные веб-приложения через Playwright: проверяет интерфейс, формы и сценарии в браузере. Пригодится для поиска ошибок UI и фиксации результатов скриншотами. GitHub Copilot 12 447установок markdown-to-html официальный github скилл Скилл помогает превращать Markdown в HTML и писать скрипты для такой конвертации. Подойдёт для HTML-документации, статических сайтов и предпросмотра .md-файлов. GitHub Copilot 9 899установок next-intl-add-language официальный github скилл Добавляет язык в Next.js-приложение с next-intl: переводит en.json и обновляет маршрутизацию. Нужен, когда новая локаль должна появиться в интерфейсе. GitHub Copilot 9 349установок fluentui-blazor официальный github скилл Скилл подсказывает, как подключать Microsoft Fluent UI Blazor и собирать интерфейсы из Fluent-компонентов. Нужен при разработке и отладке Blazor-приложений. GitHub Copilot 9 000установок vscode-ext-commands официальный github скилл Скилл подсказывает, как добавлять команды в расширения VS Code: задавать имена, видимость, локализацию и связанные параметры. GitHub Copilot 9 000установок vscode-ext-localization официальный github скилл Помогает локализовать пользовательские тексты расширения VS Code. Подходит, когда вы добавляете переводы или обновляете существующие. GitHub Copilot 8 900установок power-apps-code-app-scaffold официальный github скилл Создаёт каркас Power Apps Code App с React и TypeScript. Подходит для старта проекта с коннектором Power Platform. GitHub Copilot 8 700установок mcp-create-adaptive-cards официальный github скилл Добавляет шаблоны Adaptive Cards в MCP API-плагины для визуального вывода данных в Microsoft 365 Copilot. Пригодится, когда ответ API нужно показать карточкой. GitHub Copilot 8 700установок brand-landingpage Travis D. Elliott скилл Скилл проводит интервью о продукте и визуальном стиле, затем помогает создать лендинг через Stitch. Подойдёт, если у проекта пока нет готового дизайна. Claude Code CX Codex Cursor 39 476установок nextjs-app-router-patterns Seth Hobson скилл Помогает строить приложения на Next.js App Router: выбирать режим рендеринга, организовывать маршруты и получать данные. Подойдёт при миграции с Pages Router или работе с Server Components. Claude Code CX Codex Cursor 32 529установок winui3-migration-guide официальный github скилл Скилл помогает переносить UWP-код на WinUI 3 и Windows App SDK. Пригодится для проверки API, пространств имён и типичных ошибок Copilot. GitHub Copilot 5 700установок frontend-developer VoltAgent Community субагент Субагент помогает собирать фронтенд-приложения на React, Vue и Angular, связывая код с текущей архитектурой проекта. Подойдёт для крупных UI-задач. Claude Code 40 905установок ui-ux-designer Seth Hobson субагент Субагент помогает проектировать интерфейсы, вайрфреймы и дизайн-системы с учётом исследований пользователей и доступности. Подойдёт для UX-задач в Claude Code, Codex и Cursor. Claude Code CX Codex Cursor 27 069установок premium-frontend-ui официальный Utkarsh Patrikar скилл Направляет GitHub Copilot при создании визуально выразительных страниц и компонентов с анимацией. Подойдёт для лендинга или интерактивного портфолио. GitHub Copilot 4 900установок mobile-android-design Seth Hobson скилл Скилл помогает проектировать нативные Android-интерфейсы на Material Design 3 и Jetpack Compose. Подойдёт для экранов, навигации и адаптивных раскладок. Claude Code CX Codex Cursor 24 847установок mobile-ios-design Seth Hobson скилл Помогает проектировать нативные интерфейсы iOS и писать SwiftUI-вью по Apple HIG. Пригодится для экранов, навигации и адаптивной вёрстки. Claude Code CX Codex Cursor 23 659установок modern-javascript-patterns Seth Hobson скилл Скилл помогает переводить JavaScript на современный синтаксис ES6+ и применять функциональные паттерны. Пригодится для рефакторинга и асинхронного кода. Claude Code CX Codex Cursor 21 553установок responsive-design Seth Hobson скилл Помогает строить адаптивные интерфейсы с mobile-first стилями, container queries и fluid-значениями. Нужен для компонентов и страниц, которые меняются вместе с доступным местом. Claude Code CX Codex Cursor 20 956установок gsap-framer-scroll-animation официальный Utkarsh Patrikar скилл Скилл помогает создавать анимации, связанные со скроллом, через GSAP ScrollTrigger и Framer Motion. Подойдёт для React, Next.js и vanilla JS. GitHub Copilot 3 900установок interaction-design Seth Hobson скилл Скилл помогает проектировать микровзаимодействия, переходы и состояния обратной связи. Подойдёт для полировки интерфейса и загрузочных экранов. Claude Code CX Codex Cursor 16 146установок design-system-patterns Seth Hobson скилл Скилл помогает проектировать дизайн-системы: токены, темы и архитектуру компонентов. Подойдёт для UI-библиотек и систем с несколькими брендами. Claude Code CX Codex Cursor 15 953установок react-native-design Seth Hobson скилл Скилл помогает собирать React Native-приложения со стилями, навигацией и анимациями Reanimated. Пригодится для кроссплатформенной мобильной разработки. Claude Code CX Codex Cursor 15 522установок react-state-management Seth Hobson скилл Помогает выбрать и настроить управление состоянием в React: локальное, глобальное, серверное, URL и состояние форм. Claude Code CX Codex Cursor 15 286установок react-native-architecture Seth Hobson скилл Скилл для Claude Code, Codex и Cursor: подсказывает структуру проекта, навигацию, нативные модули и офлайн-синхронизацию в React Native на Expo. Claude Code CX Codex Cursor 15 087установок accessibility-compliance Seth Hobson скилл Скилл помогает проверять доступность интерфейсов и исправлять проблемы с клавиатурной навигацией, экранными дикторами и формами. Подключайте его при работе с WCAG 2.2. Claude Code CX Codex Cursor 14 596установок ima-sdk-client-side официальный Google LLC скилл Скилл помогает подключать Google IMA SDK для клиентской вставки видео- и аудиорекламы по VAST или VMAP. Подойдёт для сайтов, приложений и ТВ-платформ. Claude Code Gemini CLI CX Codex 4 500установок visual-design-foundations Seth Hobson скилл Скилл помогает задать типографику, цвета и интервалы для проекта. Подойдёт, когда вы создаёте дизайн-токены или приводите интерфейс к единому стилю. Claude Code CX Codex Cursor 13 566установок web-component-design Seth Hobson скилл Скилл помогает проектировать компоненты для React, Vue и Svelte. Подойдёт для библиотек UI, дизайн-систем и рефакторинга старых компонентов. Claude Code CX Codex Cursor 13 167установок ima-dai-sdk официальный Google LLC скилл Скилл помогает подключить Google IMA DAI SDK для загрузки HLS- и DASH-потоков. Подойдёт для прямых эфиров и видео по запросу в приложениях и на сайтах. Claude Code Gemini CLI CX Codex 4 300установок react-modernization Seth Hobson скилл Скилл обновляет React-код, переносит классовые компоненты на хуки и помогает внедрять возможности React 18. Подойдёт для поэтапной модернизации старого приложения. Claude Code CX Codex Cursor 12 625установок

1–40 из 75

Фронтенд — тема, где агент чаще всего пишет код, который выглядит рабочим и при этом расходится с дизайн-системой проекта. Скиллы и правила здесь задают стек (React, Next.js, Vue, Svelte, Tailwind), устройство компонентов, доступность и проверку вёрстки. Смотрите, под какую версию фреймворка написан скилл и когда его обновляли: инструкция под старый API вредит больше, чем её отсутствие. Проверять результат в браузере помогает MCP-сервер из этой подборки.

Ещё в NeVibeCode

Спонсоры проекта

Компании, которые помогают держать аналитику открытой