inspector-overlay

Integrate a development-only DOM inspection overlay into React and Next.js applications.

2|Updated Apr 11, 2026

Search Tags:#ui #debugging #react #llm #nextjs #dom #inspector

Ready to run

npx skills add https://github.com/motionharvest/agent-skills --skill inspector-overlay

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: inspector-overlay
Source: https://github.com/motionharvest/agent-skills/tree/main/inspector-overlay
Command: npx skills add https://github.com/motionharvest/agent-skills --skill inspector-overlay

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the difficulty of identifying specific UI components and their underlying code structure, enabling developers to generate precise, context-aware payloads for AI coding agents.

Core Features & Use Cases

Visual DOM Inspection: Provides a real-time, interactive overlay to highlight and select elements directly in the browser.
Payload Generation: Captures element metadata, including selectors, XPaths, and custom data attributes, for immediate use in LLM prompts.
Multi-Selection: Supports complex selection workflows, allowing users to group multiple UI components into a single context payload.
Use Case: When building a new feature, use the inspector to select the exact button and container elements you want to modify, then copy the generated payload to your clipboard to give your AI agent perfect context.

Quick Start

Install the inspector overlay into my project and wire it into the root layout file.

Frequently Asked Questions about inspector-overlay

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

FAQPage Schema

How do I extract DOM metadata for AI coding agents in React?▼

Extract DOM metadata for AI agents by integrating a development-only interactive overlay into your React application, allowing you to visually highlight and select UI elements to generate precise, context-aware LLM payloads.

What is interactive DOM inspection for AI-assisted development?▼

Interactive DOM inspection is a real-time overlay mechanism that highlights browser elements, captures their selectors and custom data attributes, and groups them into context payloads for AI coding prompts.

How do I set up an inspector overlay in Next.js?▼

Set up the inspector overlay in Next.js by installing the package and wrapping your root layout with the required client-side component to enable event-based element highlighting and selection logic.

Does the DOM inspector support multi-element selection for LLM context?▼

Yes, the DOM inspector supports multi-element selection, allowing you to group multiple UI components into a single clipboard payload with mapped data attributes for improved AI context.

Can I map custom data attributes to the clipboard payload for AI prompts?▼

Yes, you can map custom data attributes into the generated clipboard payload, ensuring your AI coding agents receive precise metadata including selectors and XPaths for the selected elements.

Is a client-side wrapper required to use the inspector overlay?▼

Yes, a client-side component wrapper is required to enable interactive element highlighting and event-based selection logic within your React or Next.js development environment.