AI: agent rules, MCP, skill and llms.txt

AI coding tools write better interfaces when they know what already exists and how it was meant to be used. Beautiful UI tells them in four ways, starting with the one that needs no setup at all.

Rules for your agent (opt-in)

Installing a component never writes agent files into your project. When you want your agent to know Beautiful UI, add the rules once: .beautiful-ui/AGENTS.md (library rules and a routing table of every component with its install command) and .cursor/rules/beautiful-ui.mdc pointing Cursor at it.

npx shadcn@latest add https://beautiful-ui.dev/r/beautiful-ui-ai.json

Claude Code: add one line to your CLAUDE.md so it always reads the rules:

@.beautiful-ui/AGENTS.md

Every component's page also has a Markdown version for agents (https://beautiful-ui.dev/r/<name>.md), and https://beautiful-ui.dev/llms.txt lists them all.

MCP server

The server exposes search_components, get_component, list_components and get_setup. Results include when to use each item, and when not to, so the agent picks the right one. get_component takes build: "base" or "radix" to match your components.json style, and returns that build's install command, file paths, npm and registry dependencies and tokens. Free items also come with their source and CSS. The install command itself brings everything, so agents should install rather than copy source.

claude mcp add --transport http beautiful-ui https://beautiful-ui.dev/api/mcp

{
  "mcpServers": {
    "beautiful-ui": {
      "url": "https://beautiful-ui.dev/api/mcp",
      "headers": { "Authorization": "Bearer ${BEAUTIFUL_UI_TOKEN}" }
    }
  }
}

The Authorization header is optional. With a Pro key, get_component also returns the source and CSS of the Pro items your plan covers.

Agent skill

The skill teaches Claude Code and compatible agents the workflow and the design, motion and copy rules, plus a review checklist they run before handing work back.

npx shadcn@latest add https://beautiful-ui.dev/r/beautiful-ui-skill.json

It installs into .claude/skills/beautiful-ui/ in your project, so everyone on the team gets it.

llms.txt

For tools without MCP, point them at plain text:

• /llms.txt: setup plus every item with a one-line description
• /llms-full.txt: full docs for every item in one file
• /md/<id>.md: one item's agent guide, including source and CSS for free items

A good first prompt

Add the Lumen Sidebar to our dashboard layout, wired to our routes,
with Lumen Command as the ⌘K palette. Read their docs at beautiful-ui.dev
first and keep the phone layout working.