Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add CopilotKit/CopilotKit --skill inspector-docs -a claude-code
Open on GitHub

What 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-code

2Manually: put the files in place

~/.claude/skills/inspector-docs/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/inspector-docs/

From the same set6

The whole set →

Similar

customer-journey-map phuryn Builds an end-to-end customer journey map with stages, touchpoints, emotions, pain points, and opportunities. Useful for experience research and onboarding work. Claude Code CX Codex Cursor +1 3,100installs summarize-meeting phuryn Transforms meeting transcripts into organized notes with participants, decisions, key points, and action items assigned to owners. Use it to process meeting recordings or create meeting minutes quickly. Claude Code CX Codex Cursor +1 3,100installs resume-section-builder Paramchoudhary A skill that generates resume sections tailored to experience level and role. Builds professional summaries, organizes skills, formats work history and education with different rules for entry level, mid-career and senior. Claude Code CX Codex Cursor +1 9,800installs career-changer-translator Paramchoudhary Translates past work experience into target industry terminology and structures resumes around transferable skills during a career pivot. Claude Code CX Codex Cursor +1 9,500installs resume-version-manager Paramchoudhary Keeps a master resume as the single source of truth, then files tailored versions by role and company. Useful once you are applying widely and lose track of what went where. Claude Code CX Codex Cursor +1 9,500installs review-resume phuryn This skill reviews a product manager resume against 10 practices and tailors feedback to a job posting. Use it before applying. Claude Code CX Codex Cursor +1 3,000installs grill-with-docs Matt Pocock This skill interviews you about a plan or design and creates ADRs and a glossary along the way. Use it when decisions need sharper definition. Claude Code 1,219,756installs skill-creator official anthropics Creates and refines skills, then tests them with prompts, evaluations, and performance checks. Claude Code Claude.ai 414,180installs

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

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor