For AI agents

Connect an agent

What to give the agent in a product: DESIGN.md, the registry via MCP, llms.txt and a snippet

npx shadcn@latest add @umbra/skill-umbra-ui

AI agents get context in four ways: the rules (DESIGN.md), a skill with the working order, a snippet for the product’s CLAUDE.md and the registry, which the agent reads through the shadcn MCP. The registry, llms.txt and the skill are in Russian

llms.txt

  • /llms.txt: a table of contents with links to DESIGN.md and the docs for every item
  • /llms-full.txt: DESIGN.md and the docs for all items as one text
  • /DESIGN.md: the rules in the Google Stitch format, YAML header from tokens/

shadcn MCP in a product

pnpm dlx shadcn@latest mcp init --client claude

In the product’s components.json:

{
  "registries": {
    "@umbra": "https://aid-design-lovat.vercel.app/r/{name}.json"
  }
}

Now the agent installs components from a phrase: “add a tile and a button from @umbra”. The agent sees “what it is, when to use it and when not to” through MCP before installing. The whole registry: https://aid-design-lovat.vercel.app/r/registry.json

The umbra-ui skill

How to build a screen: structure, tiles, color roles, the two-tile rule, APCA, motion, a check at 1100 × 700. Install it in the product’s .claude/skills/umbra-ui/; details on the “Screen in Umbra” skill page

A snippet for the product’s CLAUDE.md

Paste the block below into the product’s CLAUDE.md (ShadeNotes, portfolio, a new product). It is short on purpose: the agent takes the details from DESIGN.md and the umbra-ui skill. The block is in Russian, like DESIGN.md and the skill

## Интерфейс: Umbra

Дизайн-система продукта: Umbra (https://umbra.aidbeisembin.com). Перед любой работой с интерфейсом:

1. Прочитать DESIGN.md: https://umbra.aidbeisembin.com/DESIGN.md (полный контекст с компонентами: /llms-full.txt). Навык `umbra-ui` (`.claude/skills/umbra-ui/SKILL.md`) задаёт порядок работы.
2. Компоненты брать из реестра `@umbra`: найти через shadcn MCP или /llms.txt, поставить `npx shadcn@latest add @umbra/<имя>`. Своё писать, только если в `@umbra` нет, и только из классов токенов (`bg-tile`, `text-muted`, `p-tile`, `rounded-tile`, `gap-tile`).
3. Не вводить без вопроса автору: новые цвета и токены, радиусы вне шкалы, кривые и длительности вне токенов, второй набор иконок, второе живое существо. Продукт меняет только акцент (`product.css`), логотип и одно живое существо.
4. Иконки только `@phosphor-icons/react` через `Icon` из `@umbra/icon` (вес выбирается сам).
5. Контраст по APCA: брать только пары из таблицы https://umbra.aidbeisembin.com/colors; новая пара текст / фон это вопрос автору.
6. Проверки перед сдачей: `eslint` (с `eslint.umbra.mjs`), `tsc --noEmit`, сборка, скриншоты 1100 × 700 в светлой и тёмной теме. В отчёте написать, что проверено.

To let the agent install components by phrase, add to the product’s components.json:

{
  "registries": {
    "@umbra": "https://umbra.aidbeisembin.com/r/{name}.json"
  }
}

and run pnpm dlx shadcn@latest mcp init --client claude once. The skill is installed with npx shadcn@latest add @umbra/skill-umbra-ui