vite-plugin-agent-eyes — скилл
Плагин Vite со скиллом: пишет ошибки, запросы и снимки страницы в журналы, по которым агент находит причину поломки
- 105 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Пишет на диск журналы запросов с заголовками Cookie и обезличенным профилем аккаунта, делает снимки экрана страницы
- Ставит хуки Git, которые блокируют коммит, и может вызывать ваши команды перед ним
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/vite-plugin-agent-eyesОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Пишет на диск журналы запросов с заголовками Cookie и обезличенным профилем аккаунта, делает снимки экрана страницы
- Ставит хуки Git, которые блокируют коммит, и может вызывать ваши команды перед ним
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Плагин работает только в режиме `vite dev`. Он подставляет в страницу клиентский код, который пишет в папку `log/<порт>/` структурированные журналы: ошибки, консоль, запросы к API с телами ответов, путь пользователя по интерфейсу и обезличенный профиль аккаунта, который приложение передает функцией `recordLoginSuccess`. Данные из полей ввода в журнал не попадают, туда идет метка `<redacted>`. Агент читает эти файлы и видит реальное поведение приложения без догадок по коду. Если браузер открыт для отладки по CDP, плагин делает снимки экрана с проектом, маршрутом и временем. Кроме журналов, плагин показывает на странице панель Agent Eyes и выводит при запуске сводку: окружение, адреса прокси, алиасы и стек. Обертка `agentProxy()` записывает заголовки Cookie и Set-Cookie и в локальной среде HTTP исправляет атрибуты Domain, Secure и SameSite. Второй блок касается коммитов: `agentGit` заменяет husky, `agentGuard` блокирует секреты, слишком длинные файлы и расхождение env-файлов, `agentSizeWatch` предупреждает о раздутых файлах во время разработки.
Для кого. Фронтенд-разработчикам на Vite, которые чинят и дописывают интерфейс вместе с агентом и устали пересказывать ему, что случилось в браузере.
Подходит, если
- Логин проходит, а следующий запрос возвращает 401, и надо увидеть реальную цепочку заголовков Cookie.
- Агент поправил компонент и сам проверяет результат: перезапускает dev-сервер, повторяет действие и читает `errors.log`.
- Ошибку воспроизводят кликами, и последовательность действий берется из `interaction.log`.
- Перед коммитом проверяются секреты, размер файлов и расхождение `.env.production` с `.env.test`.
- Нужно проверить, на месте ли `robots.txt`, `sitemap.xml` и `llms.txt` в проекте.
Не подходит, если
- Нужен мониторинг боевого сайта: журналы, панель и снимки работают только в `vite dev`.
- Проект собирается не на Vite: версии с 4 по 9 поддерживаются, другие сборщики нет.
- В команде запрещено писать заголовки Cookie и данные профиля на диск, даже в локальную папку `log/`.
Пример запроса к агенту
Подключи vite-plugin-agent-eyes к проекту, воспроизведи ошибку входа и по журналам в `log/` найди, почему после логина приходит 401Ограничения
Работает только во время `vite dev` и поддерживает Vite от 4 до 9 (в проверках CI версия 9 пока не участвует). Снимки экрана делаются только если браузер открыт для отладки по CDP и найдена единственная страница, подходящая под проект и маршрут. Наличие `robots.txt` или `sitemap.xml` в панели не означает, что сайт уже проиндексирован. Журналы с заголовками Cookie и профилем аккаунта лежат в папке `log/` проекта, ее стоит добавить в `.gitignore`. Хуки Git обновляются при запуске `pnpm dev` после смены конфигурации или версии. Документация и часть сообщений написаны по-китайски, есть английский README. Лицензия MIT.
Как отключить. Уберите `...agentEyes()` из `plugins` в конфигурации Vite и удалите пакет командой `pnpm remove vite-plugin-agent-eyes`. Отдельные возможности отключаются опциями: например, `agentEyes({ client: false })` отключает автоматическую вставку клиентского кода.
Частые вопросы
Как подключить vite-plugin-agent-eyes?
Командой `pnpm add -D vite-plugin-agent-eyes` и строкой `plugins: [...agentEyes()]` в `vite.config.ts`. После запуска `vite dev` в терминале появится сводка по проекту, а на странице панель Agent Eyes.
Что попадает в журналы?
Ошибки, вывод консоли, запросы к API с реальными ответами, путь пользователя по интерфейсу и обезличенный профиль аккаунта. Токены и значения полей ввода не сохраняются, в журнал идет метка `<redacted>`.
Работает ли плагин в боевой сборке?
Нет. Журналы, панель и снимки работают только в `vite dev`, в сборку для сервера плагин ничего не добавляет.
Нужен ли Chrome с отладкой?
Только для снимков экрана: браузер должен быть открыт для отладки по CDP. Остальные возможности работают без него.
Чем заменяет husky?
Плагин `agentGit` ставит хуки pre-commit и post-commit, запускает ваши команды перед коммитом и умеет встроить проверки `agentGuard`. Любая команда с ненулевым кодом блокирует коммит.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыНавык по плагину SVG-спрайтов для Vite: установка, настройка, компоненты для Vue и React, SSR и миграция со старого плагина.
CLI создает холст, где ИИ-агент строит дашборды, отчеты и макеты как React-артефакты, а правки привязаны к блокам страницы
Плагин Vite с MCP-сервером: агент видит компоненты, маршруты и хранилища Pinia запущенного Vue-приложения
SpotPatch связывает клик по элементу страницы с точным местом в JSX и передает редактору или агенту структурный контекст.
Скилл подсказывает агенту готовые composable-функции VueUse для Vue 3 и Nuxt и дает справку по использованию и типам каждой функции
56 сниппетов на JavaScript для замеров веб-производительности: агент запускает их через навыки, MCP или CLI и разбирает результат
Коротко о README
Проект подается как глаза агента для запущенного сайта: ошибки, интерфейс, маршруты и скриншоты превращаются в читаемые подсказки, а человеку те же данные показывает панель в браузере. В таблице сравнения описано, что агенту приходилось делать вручную раньше и что он видит теперь, отдельные разделы посвящены случаю с 401 и проверке цветов дизайн-токенов в коммитах.
Бейдж для README
Исходный SKILL.md
---
name: agent-eyes
description: "vite-plugin-agent-eyes 的 agent 使用手册。两块能力：① 自愈遥测——读结构化运行时日志（API/错误/控制台/交互/代理 header）+ 脱敏登录态 + 截图 + DOM 快照，不靠猜代码就诊断修复；② 提交治理——agentGit（去 husky，统一 pre-commit/post-commit + 飞书通知）、agentGuard（提交期硬拦 secret/超长文件/屎山）、agentSizeWatch（dev 期实时警告超长文件）。在 Vite/Astro 项目里配置 agentGit/agentGuard/agentSizeWatch 或排查 guard 拦截/误报时必读。"
version: 0.18.0
---
# Vite Agent Debugger
让在 Vite 项目里干活的 agent 拥有**运行时视野**，跑「读日志 → 定位 → 改 → 重启 dev → 再读验证」的自愈闭环。
配套 npm 包 `vite-plugin-agent-eyes`（源码在本目录 `src/`，可 `npm publish` 或 git 安装）。
如果只需要 agent 操作流程，优先读 `AGENT_GUIDE.md`；如果要让 Codex、Claude、Gemini、Hermes 主动发现并使用，读 `AGENT_BOOTSTRAP.md`；README 面向人类安装和评估。
**在线指南**（按问题查，含 401 案例、截图快照、交互轨迹、登录态画像等）：
https://webkubor.github.io/vite-plugin-agent-eyes/
## 何时用
- 用户报"页面坏了 / 登录不上 / 请求失败 / cookie 问题"，但你**不该靠猜代码**——先读遥测。
- 你自己改完要**验证**：重启 dev、触发操作、读日志确认行为对了。
- 需要还原已登录 UI 或浏览器控制时，先看 `log/<port>/auth-state.json` 确认当前账号画像，再看 `log/<port>/interaction.log` 还原最近交互路径。
- 用户提交被 guard 阻断或要求提前规避明显错误 / 屎山信号时，先读 `log/guard-report.json`。
- 给一个还没接入的 Vite 项目装上这套自愈能力。
## 接入（一次性，默认 1 步）
```ts
// vite.config.ts
import { agentEyes, agentProxy } from 'vite-plugin-agent-eyes'
export default defineConfig({
plugins: [...agentEyes()], // 默认：日志 + 自动客户端埋点 + 项目体检 + size watch + 提交 guard
server: { proxy: { '/api': agentProxy('https://your-api.example.com') } },
})
```
`agentEyes()` 只在 `vite dev` 生效，并会自动向 dev HTML 注入 `autoInstrument()`；普通项目不用再改应用入口。
**如果关闭了自动注入**（`agentEyes({ client: false })`），才需要在应用入口手动加：
```ts
import { autoInstrument } from 'vite-plugin-agent-eyes/client'
autoInstrument()