About this skill

Problem

When building front-end pages, an agent or developer often has to infer UI behavior from code alone. A login button may not respond, a modal may not render, checkbox state may be wrong, or Vue/React v-model bindings may fail because no input event fired. These issues need to be observed in a real browser. vite-plugin-pilot fills that gap between source code and live page state.

How It Works

It executes browser-side JavaScript over HTTP and SSE, returning page state, interaction results, and console logs to the session. Key capabilities include:
- run 'code' returns a code preview, result, logs, and page snapshot by default
- page shows a compact snapshot where elements are listed as tag#idx
- text-based helpers such as __pilot_clickByText, __pilot_typeByPlaceholder, and __pilot_waitFor
- index-based helpers such as __pilot_click, __pilot_setValue, and __pilot_getRect
- multi-tab instance selection, instance listing, and PILOT_INSTANCE switching

Boundaries

It is best suited to Vite projects or debugging contexts where a browser console can be connected. For Vue/React, prefer __pilot_typeByPlaceholder or __pilot_setValueByPlaceholder so input events fire. Multiple executions can drop state, so related actions should stay in one exec. For duplicate buttons, v-if modals, and checkbox updates, use snapshot #idx or wait for target text before operating.

Screenshots

Use Cases

A Vite page button appears unresponsive; run browser JS to inspect DOM, logs, and a page snapshot to isolate the issue.
A login form input does not submit; trigger input with __pilot_typeByPlaceholder and check console logs to verify behavior.
Multiple tabs open the same page; switch to the target tab with instance or PILOT_INSTANCE before clicking elements.
Select a complex button with Alt+Click, copy its tag, component, and DOM path prompt, then use it to generate a fix.

Best For

Front-end engineers maintaining Vite + React or Vite + Vue pages who need to verify forms, modals, and button behavior quickly.
Engineers debugging front-end issues with Claude Code who need to turn selected element details into actionable fix prompts.
Front-end testers running UI smoke checks who need to inspect login, search, and submit flows in a real browser.
Full-stack engineers integrating agents for page debugging who need page state and logs without heavy E2E frameworks.