beUI skill
A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
- 1,874 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Copies component source files into the project and adds dependencies through the package manager
- Downloads the registry and source code from beui.dev and calls the remote MCP at mcp.beui.dev
- `npx shadcn@latest` commands fetch a package from the network without pinning a version
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/beuiDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Copies component source files into the project and adds dependencies through the package manager
- Downloads the registry and source code from beui.dev and calls the remote MCP at mcp.beui.dev
- `npx shadcn@latest` commands fetch a package from the network without pinning a version
This is third-party code. Review the repository files before installing.
What it does
beUI is a library of animated components for React and Next.js on TypeScript, Tailwind CSS and Motion: toasts, bottom sheets, menus, sliders, agent chat interfaces, charts. Components are copied into the project as source code, and the library has no runtime package. The beui skill in the skills/ folder teaches the agent to pick the right component and install it rather than write a widget from scratch. The agent works in five steps. First it looks for a component in the public MCP server at mcp.beui.dev through `list_components` or `search_components`, and without a connection it downloads the registry with `curl` from beui.dev/r/registry.json. Then it picks an install slug from the registry list, because documentation page names do not always match it. Next it inspects the component through `get_component` or `npx shadcn@latest view @beui/<slug>`. It installs it through MCP, carrying over all files with the project's paths and aliases, or with `npx shadcn@latest add @beui/<slug>`. After installing it reads the added files and builds the interface from the named exports. The skill includes a picker table with dozens of requests that tells similar components apart: a toast and a notification stack, a bottom sheet and a side drawer, three kinds of dropdown, six sliders. The evals.json file keeps test prompts with expected and forbidden slugs, for example 'show a toast when the form saves' should lead to `animated-toast-stack`.
Who it is for. For React and Next.js frontend developers who want the agent to deliver ready animated components on request instead of yet another hand-rolled toast or chat.
Good fit when
- You need a toast, bottom sheet, command palette or slider and want a ready animated component instead of code from scratch
- You are building an agent chat interface: a prompt box, a message stream, reasoning steps, tool approval, citations
- The project is already set up for shadcn/ui and the component should land in your paths and aliases with `npx shadcn@latest add`
- The agent is choosing between similar components, such as a toast and a notification stack, and needs a table of differences
- You need charts and calendars on Motion: an activity heatmap, a funnel, a price-target fan
Not a fit when
- The project is not React: the components are written in React with Tailwind CSS and Motion and do not fit Vue or Svelte
- You need a general set of base components without animation: the catalog has the shadcn/ui skill for that
- You want to teach the agent to write animations itself in Framer Motion: the skill picks ready components rather than explaining principles
- You need paid landing page blocks: those have a separate beui-pro skill and a license key
- You do not want to copy someone else's source code into the project: the library works exactly that way
Example request
Show a toast when the form saves and install a ready beUI component for itLimitations
The license is MIT. The skill works with the beUI catalog rather than an arbitrary library: it treats the live registry as the source of truth rather than slugs from memory. The picker table is a hint for similar components.
Installation goes into a project set up for shadcn/ui. Files are copied into your paths and dependencies are added through the package manager, so the changes are worth reviewing in the diff. The library has no runtime package: the code becomes yours and is updated by hand.
The public MCP on a Cloudflare Worker needs no key. Each request gets a fresh server with no stored state, and the only transport is Streamable HTTP at `/mcp`: the old `/sse` path returns 410. The paid beUI Pro blocks live in the beui-pro skill with a separate MCP that asks for a license key.
Local development of the library's own site runs on Bun, but you do not need it to use the components.
How to disable. Delete the beui skill folder from the agent's skills directory and remove the `https://mcp.beui.dev/mcp` connection in the MCP settings. Installed components stay in the project as ordinary source code: delete their files and the dependencies the package manager added if you no longer need them.
FAQ
How do I install the skill itself?
With `npx skills add starc007/ui-components --skill beui`. The `--skill` flag picks only beui from the repository and leaves the paid beui-pro aside.
Does the public MCP need a key?
No, `https://mcp.beui.dev/mcp` is open without a license key or sign-in. The paid blocks use another address, `/pro/mcp`, with OAuth and a key.
What tools does the public MCP give?
`list_components` with an optional category, `search_components` by query, `get_component` with the description, dependencies, all files and the install command, and `get_install_command` with the shadcn command for your package manager.
Why does the skill check slugs against the registry?
Documentation page slugs in the MCP sometimes name a page with several installable variants, and not every one fits a `shadcn add` command. So the skill matches the chosen slug against `items[].name` of the live registry and treats the registry as the source of truth.
Can I work without the MCP?
Yes. The skill downloads the registry from `beui.dev/r/registry.json`, and the sources come from `/r/<slug>.json` for shadcn and `/r/<slug>/raw` for the plain file. For agents there is also an `llms.txt` index.
How do I tell a toast from a notification stack?
By the table in the skill: for short messages like 'form saved' it uses `animated-toast-stack`, for an expanding notification inbox `notification-stack`. A bottom sheet and a side drawer, and a plain select and a searchable one, are told apart the same way.
Discussion
No questions or reviews yet.
Related
SkillsOfficial shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
shadcn-vue skill for agents
shadcn-vue skill
The shadcn-vue skill reads your project settings and teaches an agent to add components, forms and themes of the Vue port of shadcn/ui by its rules
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
shadcn-svelte skill for agents
shadcn-svelte
A shadcn-svelte skill: the agent reads components.json, adds components with the CLI and builds forms, dialogs and cards by the library's rules
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| beUI (this entry) | yes | 1,874 | |
| shadcn/ui | no | 126,314 | the official shadcn/ui skill and MCP: base components and general registries, while beUI adds animated ones |
| Framer Motion AI Skills | no | 10 | six skills that teach writing Framer Motion animations yourself rather than installing ready components |
README in short
The English description presents beUI as a set of animated components with live previews and examples that you copy into the project. A table splits the library into components, blocks, agent interfaces and charts. Separate sections explain installing through shadcn, connecting the public MCP, the skill install command and the direct registry addresses, plus running locally on Bun, checks and contributing rules. An accessibility test suite is maintained.
README badge
Original 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.