skills.rest
akillness
akillnessCOMMUNITY
Explore all skills by this author →
Website𝕏@akillness0308GitHub

react-grab

Capture React component names, file paths, and HTML from browser UI elements.

40|9|Updated Jan 4, 2026
Search Tags:#ai-agent#browser#dev-tools#clipboard#react-grab#element-context#component-inspector
One-click install
npx skills add https://github.com/akillness/oh-my-skills --skill react-grab-akillness
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-grab
Source: https://github.com/akillness/oh-my-skills/tree/main/.agent-skills/react-grab
Command: npx skills add https://github.com/akillness/oh-my-skills --skill react-grab-akillness

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Install and configure react-grab to capture React component context (file path, component name, HTML markup) from any browser UI element for AI coding agents. Use when you want to point at a UI element in the browser and instantly copy its React component name, source file path, and HTML to clipboard for Claude Code, Cursor, Copilot, Gemini, or Codex. Triggers on: react-grab, grab, grab element context, copy component to ai, point and copy to claude, ui context clipboard, element to ai, click component copy, grab ui component, react component inspector, browser element context, component source file, copy element context, feed element to ai, element picker, grab react component, inspect element ai, component to clipboard, react devtools ai.

Core Features & Use Cases

  • Capture element context (componentName, filePath, stack) and clipboard-ready HTML
  • Work with multiple AI agents (Claude Code, Cursor, Copilot, Gemini, Codex) and MCP
  • Provide programmatic access via primitives API and MCP tool; supports plugin system
  • Use in development to attach precise UI context to AI prompts for automated code changes

Quick Start

Install react-grab in development mode and connect it to an AI agent using the provided scripts.

Frequently Asked Questions about react-grab

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

FAQPage Schema
How do I copy React component context from a browser UI element to an AI agent?▼

Capturing React component context requires a browser overlay that lets you click a UI element to extract its component name, source file path, and HTML markup directly to your clipboard for AI coding agents.

Does react-grab work with Cursor and Claude Code for AI-assisted coding?▼

Yes, react-grab works with Claude Code, Cursor, Copilot, Gemini, and Codex. It formats the captured element context so these AI agents can process precise UI details for automated code changes.

What React component metadata can I send to my AI coding assistant?▼

You can send the React component name, source file path, and clipboard-ready HTML markup. This element context provides AI coding assistants with the exact UI structure needed for precise, context-aware code modifications.

How do I install and configure a React component inspector for AI workflows?▼

Installation uses the provided scripts directory to set up a development guard and connect the browser overlay to your AI agent, enabling programmatic MCP access for capturing element context.

Can I programmatically access captured UI element context through an API?▼

Yes, programmatic access is available through a primitives API and MCP integration, allowing automated workflows to capture element context and customize behavior using the built-in plugin system.

When should I not use a browser element picker for AI code generation?▼

You should avoid using this element picker in production environments because it operates under a development guard, restricting its use to development workflows that feed UI context to AI coding agents.

Related Skills

Explore More Software Engineering Skills→
kos3nzkos3nz

shopify-onboarding-dev

Guide Shopify development setup with CLI and AI toolkit installation.

Community
Intermediate
jerelvelardejerelvelarde
6

create-review

Bootstrap a local AI review pipeline and generate a paste-ready review prompt.

Community
Advanced
mynameistitomynameistito

next-browser

Inspect React component trees and Next.js dev server diagnostics.

Community
Advanced
iamhenryiamhenry
5

react-grab

Captures file name, component code, and HTML of clicked UI elements.

Community
Advanced