SpotPatch skill
SpotPatch links a click on a page element to the exact JSX location and hands the editor or agent structured context.
- 127 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The initializer edits project configuration and installs dependencies.
- Built-in AI prepares code changes that are applied through diff review.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/spotpatchDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The initializer edits project configuration and installs dependencies.
- Built-in AI prepares code changes that are applied through diff review.
This is third-party code. Review the repository files before installing.
What it does
The plugin for Vite, Astro and Next.js collects context of a selected element: DOM, CSS, component and source coordinates. Pick one or several elements, describe a request for each and open the source in Cursor or VS Code, copy a structured prompt or switch on read-only questions and reviewed diff changes. The `spotpatch` skill teaches an agent to wire the tool in and troubleshoot it. External agents and MCP clients receive tasks through an Inbox, and Claude Code 2.1.283 or newer answers questions about the page. Everything works only in development mode.
Who it is for. React frontend developers who explain edits to an agent with phrases like "this button" and waste time hunting for the file.
Good fit when
- A designer pointed at a button on the page and its TSX must be found without searching the repository.
- An agent needs a structured prompt with DOM, styles and code location instead of a screenshot.
- Edits to eight page elements are gathered in one pass, each with its own request.
- You need to know which API fields a component actually reads.
Not a fit when
- The project runs React 19 or an old Vite: support is declared for React 18.2–18.3 and Vite 5–7.
- A production tool is needed, while SpotPatch is for development only.
- Changes must be applied without reviewing the diff.
Example request
Wire SpotPatch into this Vite and React project without changing anything before my confirmation, and explain how to pick an element on the page.Limitations
Vite 5–7 and React 18.2–18.3 on Node.js 20.19 or newer are officially supported. The Astro integration is validated on fixtures, Next.js stays a public preview, and external agents and Managed Codex carry the `local-validation` status. The npm release may lag behind `main`. Source mapping and component data flow come with a confidence rating, and the browser cannot see server execution. AI requests go through a configured key or an installed Codex or Claude Code, so project code may reach an external provider.
How to disable. Remove `spotPatch(...)` from the Vite config and delete the `@spotpatch/vite` package. Managed Codex project grants are revoked in the SpotPatch panel.
FAQ
How do I pick an element on the page?
Click **Select element** at the bottom right or press `Mod+Shift+S`, then click the target and describe what to do. Several elements can be chosen, up to eight by default.
Is AI required?
No. Element selection, source navigation and structured prompts work without AI. Questions and changes are enabled separately and go through diff review by default.
How do I connect Astro or Next.js?
Astro has the `@spotpatch/astro` package and Next.js the `@spotpatch/next` preview. The Astro initializer adds SpotPatch to `integrations`, not to `vite.plugins`.
How do I connect an external agent?
MCP clients and Cursor receive tasks through the Inbox of the `@spotpatch/bridge` package. Active Codex connections and Claude channels need their own versions and protocols, described in the documentation.
Does SpotPatch reach the production build?
It should not: the tool is built for development. The skill explicitly forbids carrying the Runtime, source markers and local endpoints into the production path.
Discussion
No questions or reviews yet.
Related
SkillsA Vite plugin with a skill that writes errors, requests and page snapshots to logs an agent reads to find the cause of a bug
Annotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
A Vite, Nuxt and Next.js plugin that exposes the state of a running Vue, React, Svelte or Solid app to an agent over MCP.
A CLI that sets up a canvas where an AI agent builds dashboards and reports as React artifacts, revised block by block
A skill that points the agent to ready VueUse composables for Vue 3 and Nuxt, with a usage and type reference for each function
A plugin of 30 skills for Vue, Nuxt and NuxtHub for Claude Code, Codex, Cursor and Copilot, with the Nuxt MCP server attached
README in short
The README gives a table of supported scope with boundaries, a Vite quick start, and sections on Astro, Next.js, the floating panel and the repository packages. It also warns that the npm version may lag behind the main branch.