SpotPatch — скилл
SpotPatch связывает клик по элементу страницы с точным местом в JSX и передает редактору или агенту структурный контекст.
- 127 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Инициализатор правит конфигурацию проекта и ставит зависимости.
- Встроенный ИИ готовит изменения кода, их применение идет через просмотр diff.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/spotpatchОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Инициализатор правит конфигурацию проекта и ставит зависимости.
- Встроенный ИИ готовит изменения кода, их применение идет через просмотр diff.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Плагин для Vite, Astro и Next.js собирает контекст выбранного элемента: DOM, CSS, компонент и координаты в исходном коде. Выберите один или несколько элементов, опишите запрос к каждому и откройте источник в Cursor или VS Code, скопируйте структурный промпт либо включите вопросы только на чтение и правки с проверкой diff. Скилл `spotpatch` учит агента подключать инструмент и разбирать проблемы. Внешние агенты и MCP-клиенты получают задачи через Inbox, Claude Code от версии 2.1.283 отвечает на вопросы по странице. Все работает только в режиме разработки.
Для кого. Фронтенд-разработчикам на React, которые объясняют агенту правки словами вроде «эта кнопка» и теряют время на поиск файла.
Подходит, если
- Дизайнер показал на странице кнопку, и надо найти ее TSX без поиска по репозиторию.
- Агенту нужен структурный промпт с DOM, стилями и местом в коде вместо скриншота.
- Одним проходом собирают правки к восьми элементам страницы, у каждого свой запрос.
- Надо понять, какие поля API реально читает компонент.
Не подходит, если
- Проект на React 19 или на старой версии Vite: поддержка заявлена для React 18.2–18.3 и Vite 5–7.
- Нужен инструмент для продакшена: SpotPatch предназначен только для разработки.
- Правки нужно применять без просмотра diff.
Пример запроса к агенту
Подключи SpotPatch к этому проекту на Vite и React, ничего не меняя без моего подтверждения, и объясни, как выбрать элемент на странице.Ограничения
Официально поддержаны Vite 5–7 и React 18.2–18.3 на Node.js 20.19 и новее. Интеграция с Astro проверена на фикстурах, Next.js остается публичным превью, а внешние агенты и Managed Codex имеют статус `local-validation`. Версия на npm может отставать от ветки `main`. Привязка к исходникам и данные по цепочке компонента приводятся с оценкой уверенности, серверное выполнение браузер не видит. Запросы к ИИ идут через настроенный ключ либо установленные Codex и Claude Code, поэтому код проекта может уходить внешнему провайдеру.
Как отключить. Уберите `spotPatch(...)` из конфигурации Vite и удалите пакет `@spotpatch/vite`. Выданные Managed Codex права проекта отзываются в панели SpotPatch.
Частые вопросы
Как выбрать элемент на странице?
Нажмите **Select element** справа внизу или `Mod+Shift+S`, затем кликните цель и опишите, что с ней сделать. Можно выбрать несколько элементов, по умолчанию до восьми.
Нужен ли ИИ для работы?
Нет. Выбор элемента, переход к исходнику и структурные промпты работают без ИИ. Вопросы и правки включаются отдельно и по умолчанию идут через просмотр diff.
Как подключить Astro или Next.js?
Для Astro есть пакет `@spotpatch/astro`, для Next.js превью `@spotpatch/next`. Инициализатор Astro дописывает SpotPatch в `integrations`, а не в `vite.plugins`.
Как подключить внешнего агента?
MCP-клиенты и Cursor получают задачи через Inbox пакета `@spotpatch/bridge`. Активные подключения Codex и каналы Claude требуют своих версий и протоколов, их условия описаны в документации.
Попадает ли SpotPatch в продакшен-сборку?
Не должен: инструмент рассчитан на разработку. Скилл прямо требует не переносить Runtime, маркеры исходников и локальные эндпоинты в путь продакшена.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыПлагин Vite со скиллом: пишет ошибки, запросы и снимки страницы в журналы, по которым агент находит причину поломки
Панель разметки для React-страниц: клик по элементу дает агенту селектор и контекст, скиллы настраивают подключение и сами ведут критику интерфейса
Плагин для Vite, Nuxt и Next.js открывает агенту состояние запущенного приложения на Vue, React, Svelte или Solid через MCP.
CLI создает холст, где ИИ-агент строит дашборды, отчеты и макеты как React-артефакты, а правки привязаны к блокам страницы
Скилл подсказывает агенту готовые composable-функции VueUse для Vue 3 и Nuxt и дает справку по использованию и типам каждой функции
Плагин из 30 скиллов по Vue, Nuxt и NuxtHub для Claude Code, Codex, Cursor и Copilot с подключением MCP-сервера Nuxt
Коротко о README
README дает таблицу поддерживаемых областей с границами, быстрый старт для Vite, разделы про Astro, Next.js, плавающую панель и пакеты репозитория. Отдельно предупреждает, что версия на npm может отставать от основной ветки.