beUI — скилл
Скилл подбирает и ставит анимированные React-компоненты beUI через публичный MCP или реестр shadcn вместо самодельных виджетов
- 1 874 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Копирует исходные файлы компонентов в проект и добавляет зависимости через менеджер пакетов
- Скачивает реестр и исходный код с сайта beui.dev и обращается к удаленному MCP на mcp.beui.dev
- Команды `npx shadcn@latest` загружают пакет из сети без фиксации версии
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/beuiОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Копирует исходные файлы компонентов в проект и добавляет зависимости через менеджер пакетов
- Скачивает реестр и исходный код с сайта beui.dev и обращается к удаленному MCP на mcp.beui.dev
- Команды `npx shadcn@latest` загружают пакет из сети без фиксации версии
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
beUI — библиотека анимированных компонентов для React и Next.js на TypeScript, Tailwind CSS и Motion: тосты, нижние панели, меню, слайдеры, чат-интерфейсы агентов, графики. Компоненты копируются в проект как исходный код, отдельного пакета среды выполнения у библиотеки нет. Скилл beui из папки skills/ учит агента подбирать нужный компонент и ставить его вместо написания виджета с нуля. Агент работает по пяти шагам. Сначала он ищет компонент в публичном MCP-сервере mcp.beui.dev через `list_components` или `search_components`, а без подключения скачивает реестр командой `curl` по адресу beui.dev/r/registry.json. Затем из списка в реестре выбирает установочный слаг, потому что названия страниц документации не всегда совпадают с ним. Потом смотрит состав компонента через `get_component` или `npx shadcn@latest view @beui/<слаг>`. Ставит его через MCP, перенося все файлы с учетом путей и алиасов проекта, или командой `npx shadcn@latest add @beui/<слаг>`. После установки читает добавленные файлы и собирает интерфейс из именованных экспортов. В скилле есть таблица подбора с десятками запросов, которая разводит похожие компоненты: тост и стопка уведомлений, нижняя панель и боковая, три вида выпадающего списка, шесть слайдеров. Файл evals.json хранит проверочные запросы с ожидаемыми и запрещенными слагами, например «показать тост при сохранении формы» должен вести к `animated-toast-stack`.
Для кого. Для фронтенд-разработчиков на React и Next.js, которые хотят получать от агента готовые анимированные компоненты по запросу вместо самодельных тоста или чата.
Подходит, если
- Нужен тост, нижняя панель, командная палитра или слайдер, и вы хотите готовый компонент с анимацией вместо кода с нуля
- Вы собираете интерфейс чата с агентом: поле ввода, поток сообщений, шаги рассуждения, подтверждение инструментов, цитаты
- Проект уже настроен под shadcn/ui, и компонент должен лечь в ваши пути и алиасы командой `npx shadcn@latest add`
- Агент выбирает между похожими компонентами, например тостом и стопкой уведомлений, и ему нужна таблица различий
- Нужны графики и календари на Motion: тепловая карта активности, воронка, прогнозный веер цены
Не подходит, если
- Проект не на React: компоненты написаны на React с Tailwind CSS и Motion, для Vue или Svelte они не подходят
- Нужен универсальный набор базовых компонентов без анимации: для этого в каталоге есть скилл shadcn/ui
- Вы хотите научить агента писать анимации самому на Framer Motion: скилл выбирает готовые компоненты и принципы анимации не объясняет
- Вам нужны платные блоки лендингов: для них отдельный скилл beui-pro и лицензионный ключ
- Вы не хотите копировать в проект чужой исходный код: компоненты ставятся только так
Пример запроса к агенту
Покажи тост при сохранении формы и поставь для этого готовый компонент beUIОграничения
Лицензия MIT. Скилл работает только с каталогом beUI, и источником правды для него служит живой реестр. Таблица подбора служит подсказкой для похожих компонентов.
Установка идет в проект, настроенный под shadcn/ui. Файлы копируются в ваши пути, зависимости добавляются через менеджер пакетов, поэтому изменения стоит смотреть в диффе. У библиотеки нет пакета среды выполнения: чужой код становится вашим и обновляется вручную.
Публичный MCP на Cloudflare Worker не требует ключа. Каждый запрос получает чистый сервер без сохраненного состояния, а транспорт только Streamable HTTP по адресу `/mcp`: старый путь `/sse` отдает 410. Платные блоки beUI Pro вынесены в скилл beui-pro с отдельным MCP, который просит лицензионный ключ.
Локальная разработка самого сайта библиотеки идет на Bun, но для использования компонентов он не нужен.
Как отключить. Удалите папку скилла beui из каталога скиллов агента и снимите подключение к `https://mcp.beui.dev/mcp` в настройках MCP. Установленные компоненты остаются в проекте как обычный исходный код: удалите их файлы и зависимости, которые добавил менеджер пакетов, если они больше не нужны.
Частые вопросы
Как поставить сам скилл?
Командой `npx skills add starc007/ui-components --skill beui`. Ключ `--skill` выбирает из репозитория только beui, платный beui-pro остается в стороне.
Нужен ли ключ для публичного MCP?
Нет, адрес `https://mcp.beui.dev/mcp` открыт без лицензионного ключа и авторизации. Платным блокам служит другой адрес `/pro/mcp` с OAuth и ключом.
Какие инструменты дает публичный MCP?
`list_components` с необязательной категорией, `search_components` по запросу, `get_component` с описанием, зависимостями, всеми файлами и командой установки, и `get_install_command` с командой shadcn для нужного менеджера пакетов.
Почему скилл проверяет слаги по реестру?
Название страницы документации в MCP иногда относится сразу к нескольким установочным вариантам, и не каждый из них годится для команды `shadcn add`. Поэтому скилл сверяет выбранный слаг с полем `items[].name` живого реестра и считает реестр источником правды.
Можно ли обойтись без MCP?
Да. Скилл скачивает реестр из `beui.dev/r/registry.json`, а исходники отдают адреса `/r/<слаг>.json` для shadcn и `/r/<слаг>/raw` для чистого файла. Для агентов есть и указатель `llms.txt`.
Как отличить тост от стопки уведомлений?
По таблице в скилле: для коротких сообщений вроде «форма сохранена» берут `animated-toast-stack`, для раскрывающегося ящика уведомлений `notification-stack`. Так же разведены нижняя панель и боковая, выпадающий список и поисковый список.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыОфициальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
shadcn-vue — скилл для агентов
shadcn-vue skill
Скилл shadcn-vue читает настройки вашего проекта и учит агента добавлять компоненты, формы и темы Vue-порта shadcn/ui по правилам библиотеки
Скилл и MCP-сервер библиотеки Shaders: агент собирает фоны, стекло, градиенты и курсорные эффекты на WebGPU для React, Vue, Svelte, Solid и JS
Скиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
shadcn-svelte — скилл для агентов
shadcn-svelte
Скилл по shadcn-svelte: агент читает components.json, ставит компоненты через CLI и собирает формы, диалоги и карточки по правилам библиотеки
MCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| beUI (эта запись) | да | 1 874 | |
| shadcn/ui | нет | 126 314 | официальный скилл и MCP shadcn/ui: базовые компоненты и общие реестры, а beUI добавляет анимированные |
| Framer Motion AI Skills | нет | 10 | шесть скиллов, которые учат писать анимации на Framer Motion самому, а не ставят готовые компоненты |
Коротко о README
Описание на английском представляет beUI как набор анимированных компонентов с живыми превью и примерами, которые копируются в проект. Таблица делит библиотеку на компоненты, блоки, интерфейсы агентов и графики. Отдельные разделы объясняют установку через shadcn, подключение публичного MCP, команду установки скилла и прямые адреса реестра, а также локальный запуск на Bun, проверки и правила вклада. Поддерживается набор тестов доступности.
Бейдж для README
Исходный SKILL.md
--- name: beui description: Pick and install beUI (@beui) animated React components through public MCP or the shadcn registry. Use when building motion UI, agent/chat interfaces, toasts, docks, bottom sheets, drawers, popovers, sliders, loaders, 404 pages, or any beui.dev component. Maps user intent to exact @beui install slugs instead of inventing custom widgets. --- # beUI Use beUI as copy-paste source through its public MCP or the `@beui` shadcn registry. See the [AI agents guide](https://beui.dev/docs/ai-agents) for current connection instructions and endpoints. The public MCP at `https://mcp.beui.dev/mcp` needs no license key or Pro authentication. For licensed components, use the separate `beui-pro` skill and Pro connection. ## Workflow 1. Discover current components with the public MCP's `list_components` or `search_components` when connected. Otherwise, fetch the live registry: ```bash curl -fsS https://beui.dev/r/registry.json ``` 2. For CLI installation, pick the closest install slug from `items[].name` in the live registry. Public MCP catalog slugs can name documentation pages with multiple installable variants. Do not assume every page slug is an install slug. 3. Inspect the selected component with MCP `get_component`, or inspect an installable item through the CLI: ```bash npx shadcn@latest view @beui/<slug> ``` 4. Install the complete files returned by MCP using the project's paths and aliases, then install the listed package dependencies. Preserve existing helpers and local modifications. Alternatively, install a verified registry slug with the user's package runner: ```bash npx shadcn@latest add @beui/<slug> # or pnpm dlx shadcn@latest add @beui/<slug> # or bunx --bun shadcn@latest add @beui/<slug> ``` 5. Read the files that were added, then compose with the named exports. There is no `beui` runtime package. Validate any CLI command returned by MCP against the live install slugs before running it.