vibeX — скилл
Скилл и CLI рисуют схемы архитектуры по Prisma, OpenAPI, GraphQL и коду, а документацию проверяют в CI на расхождение с кодом
- 392 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скилл запускает локальный CLI на Node.js, читает исходный код проекта и записывает файлы спецификаций и HTML в каталог проекта
- Команда `vibex workspace` готовит развертывание на сервере с паролем, который вы задаете сами
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/vibexОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл запускает локальный CLI на Node.js, читает исходный код проекта и записывает файлы спецификаций и HTML в каталог проекта
- Команда `vibex workspace` готовит развертывание на сервере с паролем, который вы задаете сами
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
vibeX строит диаграммы по тому, что точно не врет: схеме Prisma, документу OpenAPI, описанию GraphQL или самому коду. На выходе два файла: спецификация в JSON, которая считается источником истины, и одна HTML-страница для просмотра с масштабом, поиском, темной и светлой темой и экспортом в SVG и PNG. Сервера нет, и данные не покидают вашу машину. Типов диаграмм шесть: ER-схема таблиц, уровни C4, каталог конечных точек API, жизненный цикл с допустимыми переходами, диаграмма последовательности и карта вызовов между сервисами. Каждую можно выгрузить в Mermaid. Когда готовой схемы нет, скилл читает контроллеры NestJS, резолверы GraphQL, сущности TypeORM, маршруты Express и миграции SQL и сам записывает спецификацию. Отдельная команда `vibex docs` пишет описание системы в виде утверждений, у каждого из которых есть источник: привязка к файлу и символу по хешу, расчет по диаграмме или решение человека с датой. С флагом `--check` команда завершается ошибкой, если код ушел из-под утверждения, так что устаревшее описание падает в CI. Проверка идет без модели, только по файлам, хешам и git.
Для кого. Для разработчиков и тимлидов, которым нужны актуальные схемы данных, API и сервисов и документация, которая не отстает от кода, и они работают в Claude Code или Codex.
Подходит, если
- Нужна ER-схема базы данных по файлу prisma/schema.prisma, и просьба звучит как «покажи модель данных»
- Требуется каталог конечных точек из документа OpenAPI или схемы GraphQL, сгруппированный по ресурсам, с методами и кодами ответов
- Нужно понять, какие состояния проходит заказ или заявка и кто и по какому событию переводит их дальше
- Документацию по сервису нужно привязать к коду, чтобы CI падал, когда описание устарело
- В нескольких репозиториях нужно собрать карту вызовов между сервисами с проверкой, что клиент и обработчик на месте
Не подходит, если
- Нужна красивая схема для презентации с ручной раскладкой: vibeX строит проверяемые диаграммы по источникам, слайды он не оформляет
- У проекта нет ни схемы, ни понятного кода, из которого можно прочитать структуру: для C4, жизненного цикла и последовательности придется писать спецификацию вручную
- Нужна проверка первоначальной правильности описания: vibeX замечает расхождение с кодом, но ошибку в первом черновике не найдет, ее ловит человек при первом чтении
- Нужна онлайн-доска для совместного редактирования: результат это файл, у которого нет сервера
Пример запроса к агенту
Покажи модель данных по prisma/schema.prisma, потом нарисуй каталог конечных точек из openapi.yaml и собери документацию по сервису оплаты с проверкой на устаревание.Ограничения
Нужен Node.js 18 или новее. Зависимостей у проекта нет, YAML-версии OpenAPI требуют выполнить `npm install` в папке скилла, если ставить его через skills add или плагин, потому что они копируют репозиторий и не берут пакет npm.
Проверка `vibex docs --check` ловит расхождение, первоначальную ошибку не замечает: если первый черновик неверно прочитал код, хеш совпадет и CI останется зеленым. Автор советует один раз прочитать спецификацию глазами. Для диаграмм C4, жизненного цикла и последовательности исходной схемы нет, их записывают вручную или по коду.
При установке через npm глобально и ссылку в каталог скиллов смена версии Node в nvm ломает и бинарный файл, и ссылку без сообщения об ошибке. Команда skills add такой проблемы не знает. Чтобы утверждения, привязанные к коду, проверялись при сборке панели, передавайте параметр `--repo`, иначе они показываются как непроверяемые.
Как отключить. Удалите папку vibex из ~/.claude/skills/ и ~/.agents/skills/ либо отключите плагин командой /plugin. Созданные файлы со спецификациями и HTML остаются в проекте, их можно удалить отдельно. Для глобального пакета выполните `npm uninstall -g @vibex/vibex`.
Частые вопросы
Как поставить vibeX в Claude Code?
Выполните npx skills add Raja0sama/vibex -g -a claude-code -a codex -y, это ставит скилл для Claude Code и Codex. Второй путь: /plugin marketplace add Raja0sama/vibex, затем /plugin install vibex@vibex. После установки перезапустите агента.
Какие диаграммы умеет строить vibeX?
ER-схему, уровни C4, каталог конечных точек, жизненный цикл, диаграмму последовательности и карту вызовов между сервисами. Из Prisma и GraphQL строится ER-схема, из OpenAPI и GraphQL каталог конечных точек, остальные типы описывают вручную или по коду.
Отправляет ли vibeX данные на сервер?
Нет. В просмотрщике нет сетевых запросов, внешних шрифтов, аналитики и телеметрии, а результат открывается как обычный файл. Команда `vibex host` только готовит файлы nginx и Docker, чтобы вы выложили страницы на своем сервере под логином.
Как vibeX проверяет документацию на устаревание?
Команда `vibex docs --check` пересчитывает каждое утверждение по источнику: хешу участка кода, расчету по диаграмме или сроку решения человека. Если код сдвинулся, команда завершается с кодом 1 и CI падает. Модель в проверке не участвует.
Можно ли получить схему в Mermaid?
Да. Команда `vibex mermaid` с путем к спецификации печатает диаграмму, а `vibex render` кладет файл .mmd рядом с HTML. Кнопка экспорта есть и в самом просмотрщике. Такой текст отображают GitHub, GitLab и Notion.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл, который вместо ASCII-схем в терминале собирает самодостаточные HTML-страницы: диаграммы, разбор диффов, ревью планов, таблицы и слайды
Скилл рисует архитектурные схемы, блок-схемы и диаграммы последовательностей как размеченный вручную SVG в едином стиле
Больше 150 скиллов для приложений на платформе ibl.ai: вход, чат с агентом, профили, аналитика, сборки для десктопа и телефонов
CLI и скилл строят карту сервисов по коду: диаграммы, API и схемы БД лежат файлами в репозитории, просмотр локальный.
Скилл для разработки на VibeCode Битрикс24: навигация по документации, ключи и авторизация, деплой на Black Hole и частые ошибки
Codex-скилл для проверки кода после вайбкодинга: объясняет блоки, называет файлы и строки, сверяет цель с доказательствами.
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| vibeX (эта карточка) | нет | 392 | ||
| MCP Mermaid | нет | не нужна | 649 | MCP-сервер, который по запросу рисует диаграммы Mermaid, но не читает схему проекта |
| TerraVision | нет | 1 688 | рисует схемы облачной инфраструктуры AWS, Azure и GCP, данные и API приложения не рисует |
Коротко о README
README доказывает идею на примерах: три команды без файла настроек (импорт схемы, проверка, отрисовка), панель со всеми спецификациями проекта и режим для нескольких репозиториев. Подробно описаны устройство утверждений в документации, пять состояний доверия к ним, цикл исправления через заранее заполненное обращение в трекере и генерация списка изменений из истории коммитов.
Бейдж для README
Исходный SKILL.md
---
name: vibex
description: 'Diagrams and checkable docs from a codebase. Draws ERDs, C4 context/container/component views, API endpoint catalogues, lifecycle/state machines, sequence diagrams, and service-to-service call maps as a validated JSON spec plus a standalone HTML viewer, with Mermaid export. Imports OpenAPI, GraphQL SDL and Prisma; otherwise reads the code (NestJS, TypeORM, Express) and writes the spec. Use for: database diagram, ERD, data model, table relationships, C4 or architecture diagram, system context, API map, endpoint list, "show me the endpoints", status flow, state machine, allowed transitions, "what happens after X is approved", sequence diagram, request flow, how services call each other, microservice map, Mermaid diagram. Also writes documentation as a fact graph: each statement carries its source and a computed confidence, and a drift check fails CI when the code moves. Use to document a system, write architecture or onboarding docs, or explain how a system works.'
license: MIT
metadata:
version: "0.8.1"
cli: node bin/vibex.mjs
repository: https://github.com/Raja0sama/vibex
---
# vibeX
*You vibed it into existence. vibeX shows you what you actually built.*
Output is always two files: `<name>.<type>.json` (the spec, the source of truth) and `<name>.<type>.html` (self-contained viewer: pan/zoom, search, click-for-details, dark/light, SVG/PNG export). Not fancy. Correct and readable.
Skill root: the directory containing this file. Every command below is `node <skill-root>/bin/vibex.mjs …`.
## Steps
1. **Pick the type** from the ask. One diagram per type per question; do not mix.
| Ask | Type | Spec file |
|---|---|---|
| tables, models, schema, relations, FKs, data model | `erd` | `schemas/erd.schema.json` |
| context, containers, components, who talks to what, system boundary | `c4` | `schemas/c4.schema.json` |
| endpoints, routes, API surface, GraphQL operations, events/topics | `endpoints` | `schemas/endpoints.schema.json` |
| statuses, state machine, lifecycle, what happens after X, allowed transitions | `lifecycle` | `schemas/lifecycle.schema.json` |
| sequence diagram, request flow, what happens when the user clicks X, who calls whom and in what order | `sequence` | `schemas/sequence.schema.json` |
2. **Find a machine-readable source first.** Search the repo before reading code:
- `endpoints`: `openapi.*`, `swagger.*`, `*.graphql`, `schema.gql`, or a generated schema endpoint dump. Run `import openapi` or `import graphql`.
- `erd`: `schema.prisma` → `import prisma`. A GraphQL SDL can also seed an ERD with `import graphql <file> out.json --erd`.
- `c4`: never importable. Author it (step 3).
```bash
node bin/vibex.mjs import openapi path/to/openapi.yaml out/api.endpoints.json
node bin/vibex.mjs import graphql path/to/schema.graphql out/api.endpoints.json
node bin/vibex.mjs import prisma prisma/schema.prisma out/db.erd.json
```
After an import, open the JSON and edit it like a human would: rename groups, drop noise endpoints (health, metrics), add `entities` links on endpoints, add `sources`. The import is a starting point, not the deliverable.
3. **No source file? Dig in the code.** Read the schema file for your type once, then read one example in `examples/`. Author the JSON fresh. Where to look:
- **NestJS REST**: `@Controller('prefix')` + `@Get/@Post/@Put/@Patch/@Delete('path')` → one endpoint each, path = prefix + path with `:id` rewritten as `{id}`. `@UseGuards(...)`/`@Roles(...)` → `auth`. `@Body()` DTO class → `request`. Return type / `@ApiOkResponse` → `response`. One group per controller. Put `sources: [{path, line}]` on every endpoint pointing at the handler method. Prepend `app.setGlobalPrefix()` and `@Version()`/`VersioningType.URI` segments to every path. `@Param()` → `params[].in: "path"`, `@Query()` → `"query"`, `@Headers()` → `"header"`; a DTO class in `@Query()` becomes one param per property.
- **NestJS GraphQL**: `@Query()`, `@Mutation()`, `@Subscription()` in `*.resolver.ts` → method QUERY/MUTATION/SUBSCRIPTION, path = `name(arg: Type)`. `@ObjectType`/`@InputType` classes → `types`.
- **Express/Fastify**: `router.get('/x', …)`, `app.post(...)`, `fastify.route({method, url})`.
- **TypeORM**: `@Entity('table')` classes; `@PrimaryGeneratedColumn`/`@PrimaryColumn` → `pk`; `@Column({nullable, unique, type})`; `@ManyToOne` + `@JoinColumn` → FK on this side, relationship `from` this entity `to` target with `from_cardinality: many`; `@OneToOne` → `one`/`zero-or-one`; `@ManyToMany` + `@JoinTable` → a join entity or a many↔many relationship.
- **Prisma**: prefer the importer. The importer already fills `sources` (path + model line); add `description` and `groups` by hand. It names entities by the lowercased model name (`OrderItem` → `orderitem`; `@@map` only changes the label).
- **SQL migrations**: `CREATE TABLE`, `REFERENCES`, `PRIMARY KEY`, `UNIQUE`.