Скиллы для фронтенда
Порядок — по числу установок из источника, без них — по звёздам репозитория на GitHub. В список входят только карточки с проверенным описанием.
-
1
986 201установок
prototype
Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом.
скилл · Matt Pocock · MIT
-
2
186 758установок
webapp-testing официальный
Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера.
скилл · anthropics · Apache-2.0
-
3
112 122установок
web-artifacts-builder официальный
Скилл собирает сложные HTML-артефакты для claude.ai на React, Tailwind CSS и shadcn/ui. Подходит для интерфейсов с состоянием и маршрутизацией.
скилл · anthropics · Apache-2.0
-
4
94 921установок
theme-factory официальный
Применяет готовые цветовые палитры и пары шрифтов к слайдам, документам и HTML-страницам. Подходит, когда материалу нужен единый стиль.
скилл · anthropics · Apache-2.0
-
5
89 081установок
algorithmic-art официальный
Создаёт генеративное искусство на p5.js с seed-случайностью и настройкой параметров. Подходит для flow fields, частиц и кодовых арт-экспериментов.
скилл · anthropics · Apache-2.0
-
6
70 180установок
tailwind-design-system
Помогает строить дизайн-системы на Tailwind CSS v4. Пригодится для библиотеки компонентов или унификации интерфейса в проекте.
скилл · Seth Hobson · MIT
-
7
39 476установок
brand-landingpage
Скилл проводит интервью о продукте и визуальном стиле, затем помогает создать лендинг через Stitch. Подойдёт, если у проекта пока нет готового дизайна.
скилл · Travis D. Elliott · MIT
-
8
32 529установок
nextjs-app-router-patterns
Помогает строить приложения на Next.js App Router: выбирать режим рендеринга, организовывать маршруты и получать данные. Подойдёт при миграции с Pages Router или работе с Server Components.
скилл · Seth Hobson · MIT
-
9
24 847установок
mobile-android-design
Скилл помогает проектировать нативные Android-интерфейсы на Material Design 3 и Jetpack Compose. Подойдёт для экранов, навигации и адаптивных раскладок.
скилл · Seth Hobson · MIT
-
10
23 659установок
mobile-ios-design
Помогает проектировать нативные интерфейсы iOS и писать SwiftUI-вью по Apple HIG. Пригодится для экранов, навигации и адаптивной вёрстки.
скилл · Seth Hobson · MIT
-
11
21 553установок
modern-javascript-patterns
Скилл помогает переводить JavaScript на современный синтаксис ES6+ и применять функциональные паттерны. Пригодится для рефакторинга и асинхронного кода.
скилл · Seth Hobson · MIT
-
12
20 956установок
responsive-design
Помогает строить адаптивные интерфейсы с mobile-first стилями, container queries и fluid-значениями. Нужен для компонентов и страниц, которые меняются вместе с доступным местом.
скилл · Seth Hobson · MIT
-
13
16 146установок
interaction-design
Скилл помогает проектировать микровзаимодействия, переходы и состояния обратной связи. Подойдёт для полировки интерфейса и загрузочных экранов.
скилл · Seth Hobson · MIT
-
14
15 953установок
design-system-patterns
Скилл помогает проектировать дизайн-системы: токены, темы и архитектуру компонентов. Подойдёт для UI-библиотек и систем с несколькими брендами.
скилл · Seth Hobson · MIT
-
15
15 522установок
react-native-design
Скилл помогает собирать React Native-приложения со стилями, навигацией и анимациями Reanimated. Пригодится для кроссплатформенной мобильной разработки.
скилл · Seth Hobson · MIT
-
16
15 286установок
react-state-management
Помогает выбрать и настроить управление состоянием в React: локальное, глобальное, серверное, URL и состояние форм.
скилл · Seth Hobson · MIT
-
17
15 258установок
chrome-devtools официальный
Управляет живым Chrome через Chrome DevTools MCP: открывает страницы, проверяет ошибки и пишет трассы производительности. Нужен для отладки интерфейса прямо из агента.
скилл · github · MIT
-
18
15 087установок
react-native-architecture
Скилл для Claude Code, Codex и Cursor: подсказывает структуру проекта, навигацию, нативные модули и офлайн-синхронизацию в React Native на Expo.
скилл · Seth Hobson · MIT
-
19
14 596установок
accessibility-compliance
Скилл помогает проверять доступность интерфейсов и исправлять проблемы с клавиатурной навигацией, экранными дикторами и формами. Подключайте его при работе с WCAG 2.2.
скилл · Seth Hobson · MIT
-
20
13 957установок
web-design-reviewer официальный
Скилл осматривает работающий сайт, находит проблемы с вёрсткой, адаптивностью и доступностью, а затем может исправить их в исходном коде. Подойдёт, когда нужно проверить интерфейс и довести исправления до повторной проверки.
скилл · github · MIT
-
21
13 566установок
visual-design-foundations
Скилл помогает задать типографику, цвета и интервалы для проекта. Подойдёт, когда вы создаёте дизайн-токены или приводите интерфейс к единому стилю.
скилл · Seth Hobson · MIT
-
22
13 167установок
web-component-design
Скилл помогает проектировать компоненты для React, Vue и Svelte. Подойдёт для библиотек UI, дизайн-систем и рефакторинга старых компонентов.
скилл · Seth Hobson · MIT
-
23
13 140установок
game-engine официальный
Помогает GitHub Copilot создавать браузерные игры и игровые движки на HTML5 и JavaScript. Подходит для 2D, 3D, физики, коллизий и управления.
скилл · github · MIT
-
24
12 782установок
penpot-uiux-design официальный
Скилл для создания интерфейсов в Penpot через MCP-инструменты: веб, мобайл, дашборды, дизайн-системы. Работает с API Penpot напрямую из редактора кода.
скилл · github · MIT
-
25
12 625установок
react-modernization
Скилл обновляет React-код, переносит классовые компоненты на хуки и помогает внедрять возможности React 18. Подойдёт для поэтапной модернизации старого приложения.
скилл · Seth Hobson · MIT
-
26
12 486установок
wcag-audit-patterns
Проверяет веб-интерфейс по WCAG 2.2, сочетая автотесты и ручную проверку. Нужен при поиске нарушений и внедрении доступных паттернов.
скилл · Seth Hobson · MIT
-
27
12 447установок
webapp-testing официальный
Тестирует локальные веб-приложения через Playwright: проверяет интерфейс, формы и сценарии в браузере. Пригодится для поиска ошибок UI и фиксации результатов скриншотами.
скилл · github · MIT
-
28
10 900установок
angular-migration
Помогает переносить приложения с AngularJS на Angular по частям или целиком. Пригодится для гибридных приложений, замены компонентов и обновления зависимостей.
скилл · Seth Hobson · MIT
-
29
9 899установок
markdown-to-html официальный
Скилл помогает превращать Markdown в HTML и писать скрипты для такой конвертации. Подойдёт для HTML-документации, статических сайтов и предпросмотра .md-файлов.
скилл · github · MIT
-
30
9 349установок
next-intl-add-language официальный
Добавляет язык в Next.js-приложение с next-intl: переводит en.json и обновляет маршрутизацию. Нужен, когда новая локаль должна появиться в интерфейсе.
скилл · github · MIT
Скиллы для фронтенда по популярности: звёзды GitHub и установки из источника. В подборке только единицы с проверенным описанием. Самое полезное при выборе: версия фреймворка, под которую написан скилл, и дата обновления. Скилл под React или Next.js двухлетней давности научит агента устаревшим приёмам. Хорошо, если в скилле есть примеры компонентов и проверка результата, а не только список пожеланий. Остальное по теме: фронтенд и UI.
