ИИ-агенты для разработки, такие как Claude Code, Codex, Cursor или GitHub Copilot, лучше строят интерфейсы на Koobiq, когда читают его документацию, а не угадывают. Навыки (Agent Skills) учат их работать с Koobiq и подсказывают, где читать, MCP-сервер отвечает по пакетам, установленным в вашем проекте, а каждая страница этой документации доступна и в Markdown, который они читают. Навыки не хранят копию документации: они читают сайт той версии, что стоит в вашем проекте, поэтому остаются актуальными без обновлений. Если сайт расходится с типами установленной у вас версии, правы типы.
Навык - это папка с инструкциями в открытом формате Agent Skills. Агент читает краткое описание каждого своего навыка и загружает навык, когда задача ему подходит. У Koobiq три навыка для Koobiq 21 и новее:
| Навык | Для чего | Пример запроса |
|---|---|---|
koobiq-angular-setup | Подключение Koobiq к Angular-проекту: ng add, а затем стили, тема, локаль и шрифты | «Подключи Koobiq к этому проекту» |
koobiq-angular | Интерфейсы на @koobiq/components: компонент под задачу, его импорты, входные параметры и примеры, формы, темизация дизайн-токенами и иконки | «Добавь форму создания пользователя: имя, роль из списка, переключатель отправки приглашения» |
koobiq-angular-upgrade | Переход на новую версию Koobiq: ng update, а затем предупреждения и ручные шаги, которые он оставляет | «Обнови Koobiq до последней версии и исправь то, что сломается» |
koobiq-angular не выбирает компонент по названию. Он находит задачу в гайде по выбору компонента, который называет нужный компонент, соседа, с которым его часто путают, и причину, а затем читает страницу компонента, ближайший к задаче пример и API его точки входа.
Навык узнаёт версию @koobiq/components в вашем проекте и читает сайт этой версии: koobiq.io для последней мажорной версии, v<major>.koobiq.io для более старой. Нужные файлы он скачивает через curl, если может запускать команды: инструмент, который пересказывает страницы, может исказить код в них. Если сайт недоступен, навык сообщает об этом и работает по типам из node_modules.
CLI skills устанавливает навыки в папки выбранных агентов, например .claude/skills или .agents/skills:
npx skills add koobiq/angular-components/packages/skillsЧтобы установить только один навык, добавьте --skill koobiq-angular. Установить их можно и через GitHub CLI:
gh skill install koobiq/angular-components angular/koobiq-angularНавыки меняются, только когда меняется способ чтения документации; обновит их npx skills update или gh skill update. Из какого бы релиза ни были навыки, они читают сайт той версии, что стоит в вашем проекте; чтобы установить навыки определённого релиза, добавьте его тег: npx skills add koobiq/angular-components/packages/skills#<version> или gh skill install koobiq/angular-components angular/koobiq-angular@<version>.
Навыкам нужен доступ к koobiq.io и его поддоменам. В Claude Code разрешите их в .claude/settings.json:
{
"permissions": {
"allow": ["WebFetch(domain:koobiq.io)", "WebFetch(domain:*.koobiq.io)"]
}
}При включённой песочнице эти правила открывают сайт и для команд, таких как curl; без неё Claude Code спрашивает разрешение перед каждым curl, который запускают навыки, если вы не разрешите эту команду. Codex в облаке и Copilot coding agent по умолчанию закрывают доступ в интернет: добавьте koobiq.io и нужный вам v<major>.koobiq.io в список разрешённых доменов окружения Codex или Copilot coding agent.
Агент сам загружает навык, когда запрос подходит под его описание. Чтобы навык точно сработал, назовите его в запросе: «С помощью навыка koobiq-angular добавь в таблицу панель фильтров».
Навыки состоят только из инструкций: они не запускают своих скриптов и не читают ничего, кроме сайта Koobiq. Устанавливайте их из koobiq/angular-components и проверяйте изменения агента так же, как код коллеги.
MCP-сервер @koobiq/mcp отвечает агенту по пакетам, установленным в вашем проекте: API компонентов, иконки, дизайн-токены, примеры, гайды и какой компонент подходит для задачи. Установите его в проект:
npm install -D @koobiq/mcpЗатем подключите его к агенту, для Claude Code - в .mcp.json в корне проекта:
{
"mcpServers": {
"koobiq": { "command": "npx", "args": ["koobiq-mcp"] }
}
}Сервер запускается внутри проекта и читает его node_modules, поэтому его ответы соответствуют установленным у вас версиям. Он работает вместе с навыками.
| Инструмент | Что отвечает |
|---|---|
search | Находит точки входа, символы, примеры, иконки и дизайн-токены по словам на русском или английском |
get_component | API точки входа: входные и выходные параметры, селекторы и exportAs |
get_example | Исходный код примера из документации |
get_icon | Имя и разметка иконки |
get_token | CSS-переменная дизайн-токена и её значение в каждой теме |
get_guide | Гайд или его раздел: установка, темизация, локализация, миграция и другие |
migrate | Что изменилось между двумя версиями и какие точки входа потеряли API |
which_component_when | Какой компонент подходит для задачи, а какой соседний нет, и почему |
list_components | Все точки входа @koobiq/components в виде id, которые принимают остальные инструменты |
Каждая страница этой документации доступна и в Markdown - достаточно короткая, чтобы агент, который читает веб, прочитал её целиком:
| Файл | Что в нём |
|---|---|
| llms.txt | Оглавление: правила для кода на Koobiq и ссылка на Markdown каждой страницы с её кратким описанием |
| which-component-when.md | Слова из запроса, сопоставленные с компонентом под задачу и соседом, с которым его путают |
Адрес страницы с .md на конце, например select.md | Текст страницы со ссылками на каждый пример, на API её точки входа и на токены её компонента |
/examples/<id>.md, например select-multiple.md | Один пример со всеми его файлами |
/api/<entry-point>.md, например api/select.md | API точки входа, как на вкладке API |
| llms-full.txt | Все страницы с примерами и API в одном файле примерно на 4 МБ: для инструментов, которые его индексируют, а не для чата |
Дайте агенту адрес llms.txt, и он сам откроет нужные файлы. Ссылки в каждом файле ведут на тот же сайт, поэтому файлы next.koobiq.io ссылаются на файлы next.koobiq.io. Markdown написан на английском для всех языков сайта: модель читает его так же хорошо и отвечает на языке вашего запроса.
Агенты, включая Claude Code, читают инструкции проекта из AGENTS.md в его корне; если в проекте есть и CLAUDE.md, подключите в нём AGENTS.md строкой @AGENTS.md. Несколько строк там заставят агента использовать Koobiq, даже если в запросе он не упомянут:
## UI
This project uses the Koobiq design system, `@koobiq/components`.
- Build UI with the `koobiq-angular` skill; upgrade Koobiq with the `koobiq-angular-upgrade` skill.
- Without the skills, read https://koobiq.io/llms.txt and the Markdown of a component before writing code with it.
- Import from the secondary entry points only, such as `@koobiq/components/button`.
- Style with the `--kbq-*` design tokens; never hard-code colors, sizes or fonts.