AIKraft/AI/Войти
AIKraft/Skills/inspector-workbench

inspector-workbench

Запускает Inspector UI для отладки и исправления визуальных элементов @copilotkit/web-inspector, включая overlay, launcher, Home, Threads и Playground. Применяется, когда требуется починить или улучшить интерфейс, но не для работы с документацией или ядром.

COCopilotKit official Разработка ★ 37.8k

Что делает навык

Навык запускает изолированную среду разработки (workbench) для визуальной отладки и исправления элементов интерфейса @copilotkit/web-inspector, таких как overlay, launcher и паны. Он требует обязательного сравнения скриншотов до и после изменений, чтобы подтвердить визуальные правки, не заменяя при этом работу с документацией.

Когда применять

  • Исправление визуальных багов в интерфейсе Inspector, таких как проблемы с z-index, макетом или состояниями (пустое, заблокированное, ошибка).
  • Изменение поведения или внешнего вида элементов chrome, overlay, launcher, Home, Threads и Playground.
  • Улучшение контрастности, тем оформления или адаптивной верстки (включая узкие экраны) в интерфейсе инспектора.
  • Добавление, переименование или удаление панелей в интерфейсе Inspector (в этом случае требуется параллельная загрузка inspector-docs).

Как работает

  1. Запустить команду nx run @copilotkit/web-inspector:dev:standalone из корня репозитория и дождаться загрузки http://127.0.0.1:5177.
  2. Открыть браузером URL http://127.0.0.1:5177/?scenario=pro-enabled-existing&reset=1, дождаться открытия overlay и сделать базовый скриншот.
  3. Внести изменения в исходный код packages/web-inspector/src, дождаться перезагрузки Vite и сделать скриншот измененной области.
  4. Сохранить скриншоты в папку .inspector-workbench/<task>/ и визуально проверить их; при необходимости сделать дополнительные снимки (узкий вьюпорт, светлая/темная тема).
  5. После завершения задачи остановить процесс dev:standalone, не оставляя Vite или CSS watch запущенными, и не коммитить файлы из .inspector-workbench/.

Примеры запросов агенту

Исправь визуальную ошибку в overlay инспектора, когда он перекрывает контент из-за z-index.
Улучши контрастность текста в темной теме для панелей Threads и Home.
Добавь новую панель в интерфейс Inspector и убедись, что она корректно отображается.

Что понадобится

  • Доступ к браузерному инструменту (Playwright MCP, Claude browser или Codex computer use) для создания скриншотов.
  • Свободный порт 5177 для запуска лаба.
  • Возможность запуска команды nx run @copilotkit/web-inspector:dev:standalone из корня репозитория.

Описание составлено по SKILL.md навыка, сверено 08.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «inspector-workbench» из репозитория: # https://github.com/copilotkit/copilotkit
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r inspector-workbench/ ~/.claude/skills/inspector-workbench/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.