Domscribe — плагин
Связывает запущенный фронтенд с агентом: клик по элементу ведет к строке кода, а агент видит живой DOM, пропсы и состояние.
- 195 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- В dev-режиме плагин встраивается в сборку, а локальный демон открывает WebSocket и API на localhost.
- Агент получает живые пропсы, состояние и DOM работающего приложения.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/domscribeОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- В dev-режиме плагин встраивается в сборку, а локальный демон открывает WebSocket и API на localhost.
- Агент получает живые пропсы, состояние и DOM работающего приложения.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Плагин сборщика во время разработки вставляет в разметку стабильные идентификаторы `data-ds` и записывает карту в `.domscribe/manifest.jsonl`. Адаптеры React и Vue снимают живые пропсы, состояние и снимок DOM. Локальный демон на Fastify соединяет браузер и агента через WebSocket, а агент работает с ним через MCP: 12 инструментов и 4 промпта. В одну сторону пользователь кликает элемент в оверлее, описывает правку словами, и агент находит файл и строку. В другую агент вызывает `domscribe.query.bySource` по пути и строке и получает вид этого места в браузере. Заметки лежат в репозитории как JSON в `.domscribe/annotations/`, чувствительные шаблоны вроде почт и токенов вычищаются до выхода из браузера.
Для кого. Фронтенд-разработчикам на React, Vue, Next.js и Nuxt, которые правят интерфейс через агента и устали объяснять ему, где находится элемент.
Подходит, если
- Пользователь кликает по кнопке в браузере и просит поменять ее цвет, а агент сам открывает нужный файл.
- Агент перед правкой запрашивает у браузера классы CSS и пропсы компонента по пути и строке файла.
- В монорепозитории приложение лежит в `apps/web`, и нужен `--app-root` при `npx domscribe init`.
- Команда хранит заметки к интерфейсу рядом с кодом и делится ими через репозиторий.
Не подходит, если
- Приложение не на React, Vue, Next.js или Nuxt и поддержки сборщика нет.
- Нужен просмотр продакшен-сайта: инструментирование в боевых сборках отключено.
- Dev-сервер не запущен или страница не открыта в браузере.
Пример запроса к агенту
Поменяй цвет кнопки отправки, но сначала через Domscribe проверь, какие классы CSS у нее сейчас стоят в браузере.Ограничения
Агент не запрашивает состояние браузера по своей инициативе, ему надо прямо сказать, например проверить классы элемента через Domscribe до правки. Для запросов к браузеру нужны запущенный dev-сервер и открытая страница. Поддерживаются React 18–19, Vue 3, Next.js 15–16, Nuxt 3 и выше, сборщики Vite 5–8, Webpack 5 и Turbopack. Вне этих связок работает только сопоставление DOM с исходником без захвата состояния. Vite 8 требует Domscribe 0.7.0 или новее.
Как отключить. Удалите плагин сборщика и пакеты `@domscribe/*` из devDependencies, отключите MCP-запись и плагин агента, затем удалите `.domscribe/` и `domscribe.config.json`.
Частые вопросы
Как поставить для Claude Code?
Выполните `claude plugin marketplace add patchorbit/domscribe`, затем `claude plugin install domscribe@domscribe`. Мастер `npx domscribe init` делает это за вас.
Какие агенты поддерживаются?
Claude Code, GitHub Copilot (`copilot plugin install patchorbit/domscribe`), Gemini CLI, Amazon Kiro, Cursor и любой агент с MCP и скиллами.
Что попадает в продакшен?
Ничего: инструментирование вырезается из боевых сборок, а проверка в CI это обеспечивает.
Как подключить MCP вручную?
Добавьте в конфигурацию агента запись со stdio-командой `npx -y @domscribe/mcp` и поставьте скиллы командой `npx skills add patchorbit/domscribe`.
Где хранятся заметки к интерфейсу?
В каталоге `.domscribe/annotations/` как JSON-файлы в вашем репозитории. Их выдают REST-интерфейсы, которые оборачивает MCP.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныMCP-сервер и расширение Chrome: выбираете элемент DOM в браузере по Option+клику, агент видит его текст, стили и селектор
Подключает агента к запущенному dev-серверу Next.js 16+: ошибки, маршруты, логи и путь к документации нужной версии
Панель разметки для React-страниц: клик по элементу дает агенту селектор и контекст, скиллы настраивают подключение и сами ведут критику интерфейса
CLI создает холст, где ИИ-агент строит дашборды, отчеты и макеты как React-артефакты, а правки привязаны к блокам страницы
Плагин навыков Reactive Data Client учит Claude Code, Cursor и Codex подключать библиотеку и работать со схемами, REST и хуками.
CLI, который дает агенту смотреть работающее приложение на React: дерево компонентов, props, state, hooks и профилирование рендеров
Коротко о README
Работа делится на четыре шага: внедрение идентификаторов, захват контекста, ретрансляция через локальный демон и MCP для агента. Для других фреймворков есть интерфейс адаптера, а `@domscribe/transform` дает только сопоставление DOM с исходником.