react-grab
Installs and configures React Grab for visual UI element selection in React/Electron apps. Use when user wants to edit UI visually, select components by hovering, or capture element context.
Best use case
react-grab is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Installs and configures React Grab for visual UI element selection in React/Electron apps. Use when user wants to edit UI visually, select components by hovering, or capture element context.
Teams using react-grab should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/react-grab/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How react-grab Compares
| Feature / Agent | react-grab | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Installs and configures React Grab for visual UI element selection in React/Electron apps. Use when user wants to edit UI visually, select components by hovering, or capture element context.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# React Grab Integration
## Step 1: Detect Project Type
**IMPORTANT: Before installing, detect the project type by checking these files:**
| Check For | Project Type |
|-----------|--------------|
| `electron-vite.config.*` | electron-vite |
| `forge.config.*` + `vite.*.config.*` | Electron Forge + Vite |
| `forge.config.*` + `webpack.*.config.*` | Electron Forge + Webpack |
| `electron` in package.json + `webpack.config.*` | Electron + Webpack |
| `electron` in package.json + `vite.config.*` | Electron + Vite |
| `electron` in package.json (no bundler) | Plain Electron |
| `next.config.*` | Next.js |
| `vite.config.*` (no electron) | Vite |
| `webpack.config.*` (no electron) | Webpack |
**Detection Commands:**
```bash
# Check package.json for framework
cat package.json | grep -E "(electron|next|vite)"
# Check for config files
ls -la | grep -E "(electron-vite|forge|next|vite|webpack)\.config"
```
---
## Step 2: Install
```bash
# Use the project's package manager (check lockfile)
pnpm add -D react-grab # if pnpm-lock.yaml exists
npm install -D react-grab # if package-lock.json exists
yarn add -D react-grab # if yarn.lock exists
```
---
## Step 3: Configure Based on Project Type
### A. Next.js
**File to edit:** `app/layout.tsx` (App Router) or `pages/_app.tsx` (Pages Router)
**App Router - `app/layout.tsx`:**
```typescript
import Script from "next/script"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<head>
{process.env.NODE_ENV === "development" && (
<Script src="//unpkg.com/react-grab/dist/index.global.js" strategy="beforeInteractive" />
)}
</head>
<body>{children}</body>
</html>
)
}
```
**Pages Router - `pages/_app.tsx`:**
```typescript
import Script from "next/script"
import type { AppProps } from "next/app"
export default function App({ Component, pageProps }: AppProps) {
return (
<>
{process.env.NODE_ENV === "development" && (
<Script src="//unpkg.com/react-grab/dist/index.global.js" strategy="beforeInteractive" />
)}
<Component {...pageProps} />
</>
)
}
```
---
### B. Vite (Web Only)
**File to edit:** `src/main.tsx` or `src/index.tsx`
```typescript
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
// Add this block at the top, after imports
if (import.meta.env.DEV) {
import("react-grab").then(({ init }) => init())
}
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
```
---
### C. electron-vite
**Files to edit:**
1. `src/renderer/src/main.tsx` - Initialize react-grab
2. `src/main/index.ts` - Configure CSP
**Step C1 - `src/renderer/src/main.tsx`:**
```typescript
// Add at the top, after imports
if (import.meta.env.DEV) {
import("react-grab").then(({ init }) => init())
}
```
**Step C2 - `src/main/index.ts`:** Find the `BrowserWindow` creation and add CSP:
```typescript
import { app, BrowserWindow } from "electron"
import { join } from "path"
function createWindow() {
const mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
preload: join(__dirname, "../preload/index.js"),
sandbox: false // Required for react-grab source mapping
}
})
// Add this block for development CSP
if (process.env.NODE_ENV === "development") {
mainWindow.webContents.session.webRequest.onHeadersReceived((details, callback) => {
callback({
responseHeaders: {
...details.responseHeaders,
"Content-Security-Policy": [
"default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'"
]
}
})
})
}
// ... rest of window setup
}
```
---
### D. Electron Forge + Vite
**Files to edit:**
1. `src/renderer.ts` or `src/renderer/index.tsx` - Initialize react-grab
2. `src/main.ts` - Configure CSP
**Step D1 - Renderer entry:**
```typescript
// Add at the top, after imports
if (import.meta.env.DEV) {
import("react-grab").then(({ init }) => init())
}
```
**Step D2 - `src/main.ts`:** Add CSP configuration (same as electron-vite Step C2)
---
### E. Electron + Webpack
**Files to edit:**
1. `src/renderer/index.tsx` - Initialize react-grab
2. `src/main/main.ts` - Configure CSP
**Step E1 - `src/renderer/index.tsx`:**
```typescript
// Add at the top, after imports
if (process.env.NODE_ENV === "development") {
import("react-grab").then(({ init }) => init())
}
```
**Step E2 - Main process:** Add CSP configuration (same as electron-vite Step C2)
---
### F. Plain Electron (No Bundler)
**Files to edit:**
1. `index.html` - Add script tag
2. `main.js` - Configure BrowserWindow
3. `renderer.js` - Initialize react-grab
**Step F1 - `index.html`:**
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' 'unsafe-inline' unpkg.com; style-src 'self' 'unsafe-inline'" />
<script src="https://unpkg.com/react-grab/dist/index.global.js"></script>
</head>
<body>
<div id="root"></div>
<script src="./renderer.js"></script>
</body>
</html>
```
**Step F2 - `main.js`:**
```javascript
const { app, BrowserWindow } = require("electron")
const path = require("path")
function createWindow() {
const mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
contextIsolation: true,
nodeIntegration: false,
sandbox: false // Required for react-grab source mapping
}
})
mainWindow.loadFile("index.html")
if (process.env.NODE_ENV === "development") {
mainWindow.webContents.openDevTools()
}
}
app.whenReady().then(createWindow)
```
**Step F3 - `renderer.js`:**
```javascript
// Initialize react-grab (loaded globally via script tag)
if (window.ReactGrab) {
window.ReactGrab.init()
}
```
---
## Step 4: Verify Installation
**Run the dev server and check:**
1. Open browser DevTools console
2. Look for: `[react-grab] initialized` message
3. Hover over any element and press **Cmd+C** (Mac) or **Ctrl+C** (Windows)
4. Paste - you should see component info
**Expected output:**
```
<button class="btn">Submit</button>
in SubmitButton
components/button.tsx:42:19
```
---
## Troubleshooting
### All Projects
| Issue | Solution |
|-------|----------|
| "react-grab not defined" | Ensure script loads before React renders |
| Nothing copied on Cmd/Ctrl+C | Check browser console for errors |
| Wrong file paths | Enable source maps in bundler config |
### Electron-Specific
| Issue | Solution |
|-------|----------|
| CSP blocking script | Add `'unsafe-inline' 'unsafe-eval'` to CSP |
| Source maps not working | Set `sandbox: false` in webPreferences |
| Keyboard shortcut not working | Check for conflicting Menu accelerators |
| DevTools eval warning | Expected in dev - CSP needs `'unsafe-eval'` |
### CSP Reference for Electron
**Via Session Headers (Recommended):**
```typescript
// In main process after creating BrowserWindow
if (process.env.NODE_ENV === "development") {
mainWindow.webContents.session.webRequest.onHeadersReceived((details, callback) => {
callback({
responseHeaders: {
...details.responseHeaders,
"Content-Security-Policy": [
"default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'"
]
}
})
})
}
```
**Via Meta Tag:**
```html
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'" />
```
---
## Optional: Claude Code Integration
**Add to `package.json` scripts:**
| Project Type | Script |
|--------------|--------|
| Next.js | `"dev:grab": "npx @react-grab/claude-code@latest & next dev"` |
| Vite | `"dev:grab": "npx @react-grab/claude-code@latest & vite"` |
| electron-vite | `"dev:grab": "concurrently \"npx @react-grab/claude-code@latest\" \"electron-vite dev\""` |
| Electron Forge | `"dev:grab": "concurrently \"npx @react-grab/claude-code@latest\" \"electron-forge start\""` |
**Client-side (add after react-grab init):**
```typescript
if (import.meta.env.DEV) {
import("react-grab").then(() => {
const script = document.createElement("script")
script.src = "//unpkg.com/@react-grab/claude-code/dist/client.global.js"
document.head.appendChild(script)
})
}
```Related Skills
react
Full React 19 engineering, architecture, Server Components, hooks, Zustand, TanStack Query, forms, performance, testing, production deploy.
react-ui-patterns
Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
react-to-wx-miniprogram-migrator
Migrates a React + TailwindCSS H5 web application to a native WeChat Mini Program. Use when the user wants to convert their existing web project into a mini program, preserving structure, styling, and functionality.
react-synapse
A React state management library using Preact Signals with fine-grained reactivity. Use it when you need global state without providers, minimal re-renders, or immutable updates via draft mutations. Works with React 18+.
react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
react-observability
Logging, error messages, and debugging patterns for React. Use when adding logging, designing error messages, debugging production issues, or improving code observability. Works for both React web and React Native.
react-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
react-native-architecture
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecti...
react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to...
react-guidelines
React coding guidelines and best practices. MUST follow these rules. Use when reviewing or writing React code or tasks.
react-gradual-architecture
Incremental React code organization guidelines. Start small, then extract when scanning and responsibilities start to blur. Use when creating features, organizing files, refactoring components, or deciding when to extract hooks, UI, or utils.
react-frontend
React components for Chat, Evaluation, Report, Admin with TypeScript, Tailwind, hooks