skills.rest
curtismu7
curtismu7COMMUNITY
Explore all skills by this author →
GitHub

inspector-template

Build or convert three-column tool pages onto the shared InspectorShell React component set.

1|Updated Jun 25, 2026
Search Tags:#refactoring#layout#frontend#react#css#component-library#mcp-inspector
One-click install
npx skills add https://github.com/curtismu7/AI-DEMO2 --skill inspector-template-curtismu7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: inspector-template
Source: https://github.com/curtismu7/AI-DEMO2/tree/main/.claude/skills/inspector-template
Command: npx skills add https://github.com/curtismu7/AI-DEMO2 --skill inspector-template-curtismu7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Admin and dev-tool pages in this repo repeatedly hand-roll the same MCP Inspector layout — a topbar over a three-column grid of tool tree, parameter form, and tabbed output — leading to duplicated CSS, inconsistent markup, and conversion bugs. This Skill standardizes that layout onto the shared InspectorShell, InspectorListItem, and InspectorTabs components. ## Core Features & Use Cases - Component Reference: Documents every prop and CSS classname of InspectorShell, InspectorListItem, and InspectorTabs so pages compose the layout without inventing new topbar/grid rules. - Two Guided Paths: A conversion path for migrating existing pages (inventory content, swap markup, migrate classnames, preserve behavior) and a scaffolding path for building new pages from scratch. - Verification Checklist: Enforces the repo's regression-guard, worktree workflow, emoji allowlist, UI build gate, and manual click-through before work is considered done. - Use Case: When adding a new admin page that needs a tool list on the left, an action form in the middle, and tabbed JSON output on the right, compose it directly on InspectorShell instead of copying McpInspectorPage's markup. ## Quick Start Ask the AI to convert an existing tool page to the inspector template or scaffold a new inspector-style page using the shared InspectorShell components.

Frequently Asked Questions about inspector-template

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert an existing page to the InspectorShell layout?▼

Read the page fully and inventory its left, middle, and right content, then replace its topbar and grid markup with a single InspectorShell call. Map tree rows to InspectorListItem, tab bars to InspectorTabs, rename page-local classnames to inspector-shell equivalents, and delete duplicated CSS.

How do I scaffold a new inspector-style tool page in React?▼

Define the left list source, middle form fields, and right output tabs first, then compose directly on InspectorShell, InspectorListItem, and InspectorTabs. Do not copy an existing page as a starting point, and wire the route into an existing AdminSideNav group.

When should I use fullHeight={false} on InspectorShell?▼

Use fullHeight={false} when the shell is embedded mid-page, such as inside a tab of another route, rather than occupying the whole route. It renders a fixed 640px grid instead of calc(100vh - 45px), avoiding double scrollbars and page height blowout.

Can InspectorListItem show both write and sensitive badges?▼

Yes, a row can be both write and sensitive at once. InspectorListItem accepts a dot prop for one indicator and a badges array, and both badges render simultaneously on the button row.

What verification is required after converting a page to InspectorShell?▼

Invoke regression-guard before editing, work in an isolated git worktree, stay within the emoji allowlist, ensure demo_api_ui npm run build exits 0, and manually click through row selection, form fill, execute, and tabbed output.

Related Skills

Explore More Software Engineering Skills→
pnewsampnewsam
1

react-routing

Defines URL design and routing conventions for React applications.

Community
Intermediate
julianobarbosajulianobarbosa
7

using-git-worktrees

Create isolated Git worktrees with safety checks and setup.

Community
Advanced
skylarsaboskylarsabo

safety-net

Write characterization tests to lock down current code behavior before refactoring.

Community
Intermediate
ArnavPuriArnavPuri
3

layout-composition

Generate CSS code for Grid, Flexbox, and Bento grid layouts.

Community
Intermediate