vibeX — скилл

Скилл и CLI рисуют схемы архитектуры по Prisma, OpenAPI, GraphQL и коду, а документацию проверяют в CI на расхождение с кодом

  • 392 ★ репозитория
  • Последний коммит
  • MIT
Скилл

Расширенный доступ

Почему такой уровень

  • Скилл запускает локальный CLI на Node.js, читает исходный код проекта и записывает файлы спецификаций и HTML в каталог проекта
  • Команда `vibex workspace` готовит развертывание на сервере с паролем, который вы задаете сами
Все причины и проверки

raja0sama/vibex

Установка

В терминале, через 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-страницы: диаграммы, разбор диффов, ревью планов, таблицы и слайды

СкиллРасширенный доступ11,1 тыс.Звезды репозитория

Скилл рисует архитектурные схемы, блок-схемы и диаграммы последовательностей как размеченный вручную SVG в едином стиле

СкиллМинимальный доступ671Звезды репозитория

Больше 150 скиллов для приложений на платформе ibl.ai: вход, чат с агентом, профили, аналитика, сборки для десктопа и телефонов

ПлагинШирокий доступ229Звезды репозитория

CLI и скилл строят карту сервисов по коду: диаграммы, API и схемы БД лежат файлами в репозитории, просмотр локальный.

CLIРасширенный доступ83Звезды репозитория
Российский стек

Скилл для разработки на VibeCode Битрикс24: навигация по документации, ключи и авторизация, деплой на Black Hole и частые ошибки

СкиллМинимальный доступ3Звезды репозитория

Codex-скилл для проверки кода после вайбкодинга: объясняет блоки, называет файлы и строки, сверяет цель с доказательствами.

СкиллРасширенный доступ133Звезды репозитория

Сравнение с похожими

Карточки с тем же главным запросом: чем они отличаются.

ИнструментОфициальныйАвторизацияЗвезды репозиторияГлавное отличие
vibeX (эта карточка)нет392
MCP Mermaidнетне нужна649MCP-сервер, который по запросу рисует диаграммы 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`.

Сообщить о проблеме