skills.rest
AirMile
AirMileCOMMUNITY
Explore all skills by this author →
GitHub

frontend-tool

Install and configure a browser inspect overlay for Vite and Next.js projects.

Updated Jan 1, 2026
Search Tags:#debugging#frontend#nextjs#vite#inspect-overlay#element-inspector
One-click install
npx skills add https://github.com/AirMile/claude-config --skill frontend-tool
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-tool
Source: https://github.com/AirMile/claude-config/tree/main/skills/frontend-tool
Command: npx skills add https://github.com/AirMile/claude-config --skill frontend-tool

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

One-time setup of an in-browser inspect overlay for Vite and Next.js projects, enabling visual element picking and quick reference copying during development.

Core Features & Use Cases

  • Install and configure an inspect overlay that highlights DOM elements and provides file:line references where available.
  • Works with Vite (SWC or Babel) and Next.js development setups, with fallback degraded mode if Babel is not used.
  • Use Case: A frontend developer needs to quickly identify a component's source file and props by copying a reference for debugging or design handoff.

Quick Start

Run the frontend-tool to install the inspect overlay for the current project; run again to teardown and remove overlay.

Frequently Asked Questions about frontend-tool

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

FAQPage Schema
How do I set up an inspect overlay for a Vite or Next.js project?▼

The inspect overlay highlights DOM elements and provides file:line references during development, allowing you to quickly identify a component's source file and copy references for debugging or design handoff.

Do I need Babel to use the inspect overlay with Next.js?▼

The inspect overlay requires a Vite plugin integration or an optional Babel plugin for Next.js full mode, and supports teardown to safely remove the overlay configuration when no longer needed.

Can I remove the inspect overlay safely after development?▼

The inspect overlay provides a post-setup report after installation that outlines common dev-server workflows, helping you navigate the visual element picking and reference copying features within your development environment.

What is an inspect overlay used for in frontend development?▼

Installing the inspect overlay configures your Vite or Next.js project by detecting the framework, installing overlay assets, updating configuration files, and generating a post-setup report for dev-server workflows.

Related Skills

Explore More Software Engineering Skills→
PostHogPostHog
58

instrument-integration

Instrument PostHog SDKs across popular web and mobile frameworks with verified configuration.

Official
Advanced
ivalsarajivalsaraj
7

highlight

Highlight matching DOM elements with a CSS outline and clear them.

Community
Basic
HorusGoulHorusGoul
8

swc-plugin-compatibility

Diagnose Lingui SWC plugin compatibility issues with SWC runtimes like Next.js and Rspack.

Community
Intermediate
zaid-khan-codezaid-khan-code
3

react-debugging

Map React DOM elements to owning components and inspect their props.

Community
Intermediate