SkillFoxx

Начните вводить название, задачу или сервис

21st MCP (Magic MCP)

MCP-сервер и плагин 21st.dev: поиск готовых React/Tailwind компонентов, логотипов и генерация интерфейса прямо из агента

MCP-серверСредний риск

21st-dev/magic-mcpАвтор: 21st.dev

Установка

npx @21st-dev/cli@latest init --client cursor

Вместо cursor можно указать claude, vscode, windsurf или codex.

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Сервер подключает агента к каталогу компонентов 21st.dev, совместимых с shadcn. Агент ищет компоненты, темы и шаблоны, забирает код, ищет логотипы брендов в виде SVG и берет примеры для вдохновения. При включенном AI-доступе в аккаунте работает генерация нового интерфейса по описанию с вариантами. Репозиторий также оформлен как плагин со скиллом 21st-ui, который подсказывает агенту, когда и как пользоваться этими инструментами. Старый пакет @21st-dev/magic теперь просто пересылает запросы на новый сервер, чтобы прежние конфигурации не сломались.

Для кого. Для фронтенд-разработчиков на React и Tailwind, которые хотят собирать интерфейс из готовых компонентов через агента.

Подходит, если

  • Нужен готовый блок: таблица цен, шапка, навигация, форма
  • Нужен логотип бренда в виде SVG-компонента
  • Хочется сгенерировать несколько вариантов экрана по описанию

Не подходит, если

  • Проект не на React и Tailwind
  • Нельзя подключать внешние сервисы с ключом

Пример запроса к агенту

Найди в 21st компонент таблицы цен с тремя тарифами и добавь его на страницу /pricing

Ограничения

Нужен ключ 21st.dev, старые ключи Magic сброшены. Генерация интерфейса доступна только при включенном AI-доступе, часть кода компонентов платная. Доступность сервиса из России без VPN не проверена.

Как отключить. Удалите сервер 21st из конфигурации MCP или плагин 21st через /plugin.

MCP

Транспорт
http, stdio
Авторизация
API-ключ
Переменные окружения
API_KEY_21ST
обязательная, секрет		Ключ API 21st.dev для плагина и прокси

Проверка безопасности

  • Передает запросы во внешний сервис с ключом
  • Вставляет сторонний код компонентов в проект

Коротко о README

README сообщает, что Magic MCP заменен единым 21st MCP, и показывает установку через 21st CLI или ручную HTTP-конфигурацию с заголовком ключа. Объяснено, что пакет @21st-dev/magic стал прокси, приведена таблица соответствия старых и новых инструментов. Описана установка плагина в Claude Code, Codex, Cursor и Grok Build с переменной API_KEY_21ST. Лицензия ISC.

Частые вопросы

Почему перестал работать старый Magic MCP?

Бэкенд Magic заменен на 21st MCP, а старые ключи сброшены. Нужен новый ключ, после этого прежняя конфигурация заработает через прокси.

Работают ли старые названия инструментов?

Да, сервер переводит их в новые, но лучше использовать новые имена.

Скиллы Next.js

Next.js skills

Выбор редакции

Официальный плагин Claude Code из репозитория Next.js: переход на Cache Components, Partial Prefetching и проверка изменений на живом dev-сервере

ПлагинСредний риск142,3 тыс.
Выбор редакции

Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки

СкиллСредний риск123,8 тыс.
Выбор редакции

Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов

СкиллВысокий риск68,1 тыс.
Выбор редакции

Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой

СкиллСредний риск31,2 тыс.