Для ИИ-агентов

Как подключить агента

Что дать агенту в продукте: DESIGN.md, реестр через MCP, llms.txt и сниппет

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

Контекст для ИИ-агентов отдаётся четырьмя путями: правила (DESIGN.md), навык с порядком работы, сниппет для CLAUDE.md продукта и реестр, который агент читает через shadcn MCP

llms.txt

  • /llms.txt: оглавление со ссылками на DESIGN.md и документацию каждого элемента
  • /llms-full.txt: DESIGN.md и документация всех элементов одним текстом
  • /DESIGN.md: правила в формате Google Stitch, YAML-шапка из tokens/

shadcn MCP в продукте

pnpm dlx shadcn@latest mcp init --client claude

В components.json продукта:

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

После этого агент ставит компоненты фразой: «добавь плитку и кнопку из @umbra». Описание «что это, когда брать и когда нет» агент видит через MCP до установки. Реестр целиком: https://aid-design-lovat.vercel.app/r/registry.json

Навык umbra-ui

Порядок сборки экрана: каркас, плитки, роли цвета, правило двух плиток, APCA, движение, проверка в 1100 × 700. Ставится в .claude/skills/umbra-ui/ продукта, подробности на странице «Навык «Экран по Umbra»»

Сниппет для CLAUDE.md продукта

Вставить блок ниже в CLAUDE.md продукта (ShadeNotes, портфолио, новый продукт). Он короткий намеренно: подробности агент берёт из DESIGN.md и навыка umbra-ui

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

Дизайн-система продукта: Umbra (https://aid-design-lovat.vercel.app). Перед любой работой с интерфейсом:

1. Прочитать DESIGN.md: https://aid-design-lovat.vercel.app/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://aid-design-lovat.vercel.app/colors; новая пара текст / фон это вопрос автору.
6. Проверки перед сдачей: `eslint` (с `eslint.umbra.mjs`), `tsc --noEmit`, сборка, скриншоты 1100 × 700 в светлой и тёмной теме. В отчёте написать, что проверено.

Чтобы агент ставил компоненты фразой, в components.json продукта:

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

и один раз pnpm dlx shadcn@latest mcp init --client claude. Навык ставится командой npx shadcn@latest add @umbra/skill-umbra-ui