inspector-docs — Claude Code skill: what it does, how to install
Keeps CopilotKit documentation aligned with shipped Inspector overlay panes. Use it when adding, editing, or deleting tabs in @copilotkit/web-inspector.
npx skills add CopilotKit/CopilotKit --skill inspector-docs -a claude-codeWhat inspector-docs does
The skill ensures docs point readers only to shipped localhost Inspector panes, such as Threads or Agents. Every documented pane must exist in references/pane-map.md. If a pane has not shipped yet, the skill halts and forbids adding a Callout, preventing docs from describing unreleased features.
Workflows follow strict procedures. When a pane changes, the agent verifies the exact label, maps the Callout to shared docs, and records updates in references/pane-map.md. On React Native and Channels, it explicitly stops you from writing instructions to open the web overlay because that UI does not exist there.
What it helps with
- map shipped Inspector panes to docs Callouts
- keep references/pane-map.md up to date
- remove obsolete Callouts when Inspector panes are deleted
- prevent invalid overlay instructions in React Native docs
Example prompts for the agent
- I added a new tab in @copilotkit/web-inspector, update the docs and pane-map.md
- Remove the deprecated Inspector pane from the docs and references/pane-map.md
- Check the Inspector verification step in the web quickstart guide
How to install inspector-docs
1Skills CLI (Vercel)
npx skills add CopilotKit/CopilotKit --skill inspector-docs -a claude-code2Manually: put the files in place
~/.claude/skills/inspector-docs/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/inspector-docs/
1Skills CLI (Vercel)
npx skills add CopilotKit/CopilotKit --skill inspector-docs -a codex2Manually: put the files in place
.agents/skills/inspector-docs/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add CopilotKit/CopilotKit --skill inspector-docs -a cursor2Manually: put the files in place
.cursor/skills/inspector-docs/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install CopilotKit/CopilotKit inspector-docs2Manually: put the files in place
.github/skills/inspector-docs/SKILL.md1Skills CLI (Vercel)
npx skills add CopilotKit/CopilotKit --skill inspector-docs -a gemini-cli2Platform CLI
gemini skills install https://github.com/CopilotKit/CopilotKit --path skills/inspector-docsManually: put the files in place
.devin/skills/inspector-docs/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add CopilotKit/CopilotKit --skill inspector-docs -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set6
The whole set →Similar
Questions about inspector-docs
How to install inspector-docs in Claude Code?
Run npx skills add CopilotKit/CopilotKit --skill inspector-docs -a claude-code.
What does inspector-docs do?
It verifies that docs only reference shipped Inspector overlay panes and maintains references/pane-map.md.
When should inspector-docs not be used?
Avoid using it for layout, icon, or styling tweaks that do not add a pane, as well as unshipped concepts like Playground or Fork. For UI work, use inspector-workbench.
Source text
SKILL.md · MIT
--- name: inspector-docs description: > Keeps CopilotKit docs pointing at shipped Inspector panes so readers open the overlay. Use when adding, changing, renaming, or removing an Inspector pane, tab, or overlay action in @copilotkit/web-inspector, or when editing docs that mention Inspector. Don't use for Inspector UI polish that does not add a pane, for CLI or agent-prompt copy, or for unshipped Inspector ideas. version: 1.0.1 --- # Inspector Docs Callouts Inspector is the localhost overlay that shows Threads, Agents, and Learning. Every shipped pane that a reader can use must have a docs pointer. The pointer tells the reader to open Inspector and look at that pane. ## When To Use Load this skill when: - A pane, tab, or overlay action is added, renamed, or removed in Inspector - A docs page teaches a feature that Inspector already shows - A PR touches both Inspector source and product docs Do not load it for icon, ping, layout, or copy-only Inspector changes that do not add a pane. Those UI changes use `inspector-workbench`. If the same change also edits Inspector UI, load `inspector-workbench` as well and start the standalone lab. ## Procedures ### Procedure 1: Map a shipped pane to docs 1. Name the shipped pane using the label the reader sees in Inspector. 2. If mapping a pane, read `references/pane-map.md` before proceeding. 3. If the pane is not shipped, stop. Do not add a Callout. 4. If the map already has a page, open that page and confirm the Callout names this pane and what success looks like. 5. If the map has no page, add a Callout on the matching shared root docs page, or write `no page yet` in the map. Do not invent a page. 6. Update `references/pane-map.md` in the same change. ### Procedure 2: Remove a pane 1. If removing a pane, read `references/pane-map.md` before proceeding. 2. Remove the Callout from the mapped page. 3. Delete the map row. ### Procedure 3: Quickstart sanity-check step The default web quickstart includes a numbered step after the first chat: 1. **Agents** then **Agent**: the agent is listed. 2. Send a chat message. **Agents** then **AG-UI Events**: events are moving. 3. **Threads**: unlocked, or locked with Enable Intelligence. Angular uses the shared step snippet, like every other web frontend: `@copilotkit/angular` auto-mounts a pinned `@copilotkit/web-inspector`, so there is no install step to link (OSS-948). React Native and Channels do not get this step at all. ## Decision Tree - Inspector pane added, renamed, or changed: - If the pane is not shipped: stop - Else: Procedure 1 - Inspector pane removed: Procedure 2 - Quickstart or first-run docs: Procedure 3 - If a pane is also new: Procedure 1 ## Red Flags | Signal | What it means | Do instead | | ---------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------- | | Callout names Playground, Fork, emit events, or another unshipped idea | Docs would advertise work that is not in the overlay | Stop. Record the idea under Unshipped in `references/pane-map.md` | | "Click the Inspector button" on React Native or Channels | Those surfaces have no web overlay | Skip the Open Inspector step | | Callout names a pane the overlay does not show | The pointer is a lie | Rewrite the Callout to a shipped pane, or remove it | ## Error Handling - **Pane is not shipped**: halt. Do not add a Callout for Playground, Fork, emit events, or other unshipped work. - **No matching docs page**: record `no page yet` in the map. Do not create a new docs section unless the user asked for one. - **Non-web surface** (React Native, Channels): do not add "click the Inspector button". - **Callout names a pane the overlay does not show**: rewrite the Callout or remove it.
© CopilotKit · MIT · CopilotKit/CopilotKit