Agent skill · copilotkit
inspector-workbench
Runs Inspector UI work on the standalone Threads state lab so the agent can see the overlay. Use when a CopilotKit employee asks an agent to fix, polish, add, or debug Inspector UI, chrome, panes, overlay actions, launcher, Home, Threads, Playground, Memory, or any visual behavior in @copilotkit/web-inspector. Don't use for docs-only Callout updates (load inspector-docs), runtime or core changes with no Inspector UI, showcase cell work, or reading Inspector as a consumer inside an app.
What it needs
About 4k tokens when loaded.
What this skill does
Inspector Workbench The Inspector overlay is a visual product. Code that compiles is not proof. The agent must run the standalone workbench and look at screenshots after each visual change. This skill does not replace inspector-docs. If a pane is added, renamed, or removed, load inspector-docs as well. When To Use Load this skill at the start of any task that changes packages/web-inspector UI, chrome, or overlay behavior. Do not load it for docs-only Callout work. Do not load it for showcase cells. If the host app is the bug (z-index against host CSS, CopilotChat layout), use that host, then still take screenshots. Default host The default host is the standalone Threads state lab: Command, from the repo root: nx run @copilotkit/web-inspector:dev:standalone URL: http://127.0.0.1:5177/?scenario=pro-enabled-existing&reset=1 The lab mounts the real cpk-web-inspector and opens the overlay. Do not start a showcase app, an example app, or Storybook as the default host. Those are slower and hide Inspector-only faults. The Nx target runs Vite and the CSS watch together. Do not run Vite alone. Do not run pnpm --filter @copilotkit/web-inspector run dev. That watch serves consumers, not this lab. Procedures Procedure 1: Start the workbench 1. If the change adds, renames, or removes a pane, load inspector-docs too. 2. From the repo root, start nx run @copilotkit/web-inspector:dev:standalone. 3. Wait until http://127.0.0.1:5177 serves. 4. Open the browser tool this session has (Playwright MCP, Claude browser, or Codex computer use). 5. Go to http://127.0.0.1:5177/?scenario=pro-enabled-existing&reset=1. 6. If the bug is an empty, locked, error, or unread state, pick that scenario in the lab dropdown, then reload. 7. Wait until the overlay is open on Home or Threads. The lab clicks the launcher. 8. Take a baseline screenshot. Look at it before any edit. Procedure 2: Edit, screenshot, look 1. Edit Inspector source under packages/web-inspector/src. 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills copilotkit/inspector-workbench