# domscribe

Кликните по элементу на странице и опишите правку словами — агент найдёт файл и строку. Или пусть агент сам спросит, как элемент выглядит вживую.

- плагин · `type=plugin` · Claude Code · ★ 195
- Автор: patchorbit
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/patchorbit/domscribe
- Обновлён: 2026-08-09
- HTML: https://affpapa.org/nevibecode/plugins/domscribe

## Что делает

Domscribe работает в две стороны. Со стороны интерфейса вы кликаете по элементу в браузерном оверлее, пишете, что поменять, и отправляете. Плагин сохраняет исходную локацию элемента, его рантайм-контекст и вашу инструкцию как аннотацию в `.domscribe/annotations/`, а агент забирает её, открывает нужный файл и правит. Ответ агента прилетает в оверлей по WebSocket. Со стороны кода агент вызывает `domscribe.query.bySource` с путём и номером строки и получает живой DOM, текущие пропсы и состояние компонента прямо из запущенного приложения.

Стабильные `data-ds`-атрибуты вставляются на этапе сборки через AST, поэтому переживают HMR и fast refresh. Поддержка React 18-19, Vue 3, Next.js 15-16, Nuxt 3+, бандлеры Vite 5-7, Webpack 5 и Turbopack. Глубокий захват идёт через обход React fiber и инспекцию Vue VNode. Есть редактирование персональных данных: почты, токены и чувствительные шаблоны вычищаются до того, как данные покинут браузер.

Агент не полезет смотреть рантайм сам по себе — ему нужно сказать об этом прямо. И dev-сервер должен быть запущен, а нужная страница открыта в браузере: без этого запрос по исходнику ничего не вернёт. Вся инструментация вырезается из продакшен-сборки, это проверяется в CI.

## Установка

### Claude Code (родная платформа)

**Через маркетплейс плагинов**
В чате агента (не в терминале):
```text
/plugin marketplace add anthropics/claude-plugins-community
```
В чате агента (не в терминале):
```text
/plugin install domscribe@claude-community
```

## Когда брать
- найти файл и строку элемента, по которому кликнули в браузере
- посмотреть живые пропсы и состояние компонента перед правкой
- передать агенту правку словами прямо из интерфейса
- проверить, какие CSS-классы реально висят на элементе
- вычистить почты и токены из контекста до отправки агенту

## Примеры запросов агенту
- Поправь цвет кнопки — сначала через domscribe посмотри, какие CSS-классы на ней сейчас
- Открой `src/components/Header.tsx` на строке 42 и покажи, что там рендерится вживую
- Посмотри аннотацию в `.domscribe/annotations/` и внеси правку по ней

## Похожие
- [stitch::code-to-design](https://affpapa.org/nevibecode/skills/stitchcode-to-design.md) — скилл · 10200 установок
- [internationalization-i18n](https://affpapa.org/nevibecode/skills/internationalization-i18n.md) — скилл · 978 установок
- [i18n-expert](https://affpapa.org/nevibecode/skills/i18n-expert.md) — скилл · 2700 установок
- [vueuse-functions](https://affpapa.org/nevibecode/skills/vueuse-functions.md) — скилл · 3700 установок
- [markstream-install](https://affpapa.org/nevibecode/skills/markstream-install.md) — скилл · 18 установок
- [nuxt-core](https://affpapa.org/nevibecode/skills/nuxt-core.md) — скилл · 390 установок

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md