Magic UI — скилл
Скилл Magic UI: агент добавляет анимированные компоненты в React и Next.js через реестр shadcn и проверяет доступность
- 23 105 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Агент выполняет команды `npx shadcn@latest` и добавляет в проект чужой код компонентов
- Установка тянет зависимости из npm и может менять глобальные стили
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/magic-uiОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Агент выполняет команды `npx shadcn@latest` и добавляет в проект чужой код компонентов
- Установка тянет зависимости из npm и может менять глобальные стили
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл `magic-ui` лежит в репозитории библиотеки Magic UI и учит агента подбирать анимированные компоненты и ставить их в проект на React или Next.js с Tailwind CSS. Рабочий процесс короткий: определить, что нужно от интерфейса, убедиться, что в проекте есть shadcn, поставить компонент командой `npx shadcn@latest add @magicui/<имя>`, встроить его в нужный блок и проверить доступность, адаптивность и производительность. В скилле есть шпаргалка по выбору: `marquee` и `avatar-circles` для лент логотипов, `globe` и `warp-background` для первого экрана, `blur-fade` и `text-animate` для текста, `shiny-button` для призыва к действию. Правило автора: начать с одного основного компонента и одного вспомогательного эффекта. Подробности вынесены в `references/components.md` и `references/recipes.md`.
Для кого. Дизайнерам-верстальщикам и разработчикам лендингов на Next.js, которые оживляют страницу анимацией с помощью Claude Code, Cursor или Codex.
Подходит, если
- Первый экран лендинга нужно оживить глобусом или анимированной сеткой, а не тяжелым видео
- Лента логотипов клиентов должна плавно прокручиваться, и агент берет готовый `marquee`
- В проекте много самописной анимации, и ее хочется заменить компонентами из реестра
- После установки компонента пропал импорт или стиль, и надо найти причину по списку типичных проблем
Не подходит, если
- Проект не на React и без Tailwind CSS: скилл рассчитан на этот стек
- Нужна строгая и спокойная панель управления: анимированные эффекты там мешают
- Агенту нужен прямой доступ к реестру из редактора: для этого у Magic UI есть отдельный MCP-сервер
Пример запроса к агенту
Оживи первый экран лендинга: добавь Magic UI blur-fade для заголовка и marquee с логотипами клиентовОграничения
Скилл ставит компоненты через `shadcn`, поэтому в проекте должна пройти команда `npx shadcn@latest init`. Для некоторых компонентов добавляются зависимости и ключевые кадры CSS, и их агент вносит по документации компонента. Если псевдоним `@/` не настроен, импорты придется заменить на относительные. В README репозитория про скилл ничего нет, а команда `npx skills add magicuidesign/magicui --skill magic-ui` — общий способ skills CLI, не документированный проектом. Для MCP-сервера Magic UI понадобится отдельная настройка, скилл ее не выполняет.
Как отключить. Удалите папку `magic-ui` из каталога скиллов проекта. Уже добавленные компоненты остаются в `components/ui` и удаляются вручную.
Частые вопросы
Как поставить скилл Magic UI в Claude Code?
Скопируйте папку `skills/magic-ui` из репозитория в `.claude/skills/` проекта или выполните `npx skills add magicuidesign/magicui --skill magic-ui`. Отдельной команды проект не документирует.
Какие компоненты скилл советует для первого экрана?
Для заметного визуального эффекта он называет `globe`, `warp-background` и `animated-grid-pattern`, для фона еще `grid-pattern` и `particles`. Использовать советует один основной компонент и один вспомогательный.
Что делать, если команда добавления компонента падает?
Сначала выполните `npx shadcn@latest init` в корне проекта, потому что без `components.json` реестр не подключается. Затем проверьте псевдоним `@/` и зависимости из ручной установки компонента.
Чем скилл отличается от MCP-сервера Magic UI?
Скилл задает порядок работы и правила выбора компонентов, а MCP-сервер дает редактору прямой доступ к составу библиотеки. Сервер ставится командой `npx @magicuidesign/cli@latest install claude` или аналогом для вашего клиента.
На что скилл проверяет результат?
На доступность с семантической разметкой и клавиатурой, на адаптивность без переполнения на мобильных экранах, на производительность без нагромождения анимаций и на единый стиль кода.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл подбирает и ставит анимированные React-компоненты beUI через публичный MCP или реестр shadcn вместо самодельных виджетов
Скилл и MCP-сервер библиотеки Shaders: агент собирает фоны, стекло, градиенты и курсорные эффекты на WebGPU для React, Vue, Svelte, Solid и JS
Скиллы Material UI
Material UI agent skills
Четыре официальных скилла Material UI: стилизация, темы, интеграция с Next.js и совместная работа с Tailwind CSS
Скилл учит агента собирать чат ИИ-агента на 26 компонентах Agent Elements: карточки инструментов, ввод, стриминг
Скилл Nuxt UI v4: агент строит интерфейсы на Vue и Nuxt, подбирает компоненты, настраивает тему и верстает формы и дашборды
Три скилла по графикам Bklit UI для React: установка из реестра shadcn, стилизация под тему приложения и переход с Recharts.
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| Magic UI (эта карточка) | да | 23 105 | ||
| shadcn/ui | нет | 127 489 | скилл про базовые компоненты shadcn/ui без анимированных эффектов | |
| 21st MCP (Magic MCP) | да | API-ключ | 6 392 | MCP-сервер, который генерирует интерфейс по запросу, без своего реестра анимаций |
Коротко о README
README репозитория короткий: ссылка на документацию, приглашение к вкладу и ссылки на сообщество. О работе с агентами рассказывают документация и сам каталог: в папке `skills/magic-ui` лежит `SKILL.md` с процессом и две справочные страницы, а страница про MCP описывает установку сервера.
Бейдж для README
Исходный SKILL.md
--- name: magic-ui description: Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (`@magicui/*`), integration patterns, and practical quality checks for accessibility and maintainability. metadata: short-description: Build and customize UIs with Magic UI components --- # Magic UI Use this skill when the task involves Magic UI components, animated UI sections, or converting static sections into interactive UI using the Magic UI registry. ## When To Apply Apply this skill when users ask to: - Add a Magic UI component (for example: marquee, globe, blur-fade, shiny-button) - Build a section with Magic UI effects (hero, testimonials, CTA, feature grid) - Replace custom animation code with Magic UI components - Troubleshoot installation/import issues for `@magicui/*` ## Core Workflow 1. Define the UI outcome first. - Identify section type, tone, motion intensity, and responsive behavior. - Keep motion intentional; avoid stacking many high-motion effects in one viewport. 2. Confirm project prerequisites. - Project should be React/Next.js with Tailwind CSS. - shadcn must be initialized before adding registry components: ```bash npx shadcn@latest init ``` 3. Install the selected component(s). ```bash npx shadcn@latest add @magicui/<component-slug> ``` Example: ```bash npx shadcn@latest add @magicui/magic-card ``` 4. Integrate into the target section. - Import from the generated path (typically `@/components/ui/<component-slug>`). - Keep component APIs intact; prefer prop/className customization over rewriting internals.