Skip to main content
affpapa.org
RU EN
skill CX Codex

react-grab — Claude Code skill: React element context from the browser

This skill lets an agent pull context for a React element you pick in a live browser: component name, file, line and HTML. Useful when a fix has to match the real DOM.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add akillness/jeo-skills --skill react-grab -a claude-code
Open on GitHub

What react-grab does

Three delivery paths are covered. The clipboard route is manual: hover an element, hit Cmd+C or Ctrl+C, paste the result into your agent. The MCP route is tool-based — once something is selected, the agent calls get_element_context and gets back the file path, component, stack and HTML. A plugin and API route exists for custom actions and lifecycle hooks.

Setup starts with npx -y grab@latest init; for the MCP path run npx -y grab@latest add mcp. The browser overlay is a development-only tool and has no place in production. Node.js 22 or newer is required, so check your version before running anything — older runtimes will not work.

The skill stays inside its lane. General browser automation, session reuse with existing logins, visual UI annotation, React performance work and design-system tasks belong to other skills. Custom plugins are built on primitives such as getElementContext(element), freeze(), openFile(filePath, lineNumber?) and registerPlugin(...).

What it helps with

  • hand an agent the real component path instead of a description
  • locate the source of an element you can only see in the browser
  • copy an HTML snippet into chat with one keystroke
  • wire element selection to an agent through an MCP tool
  • build a custom plugin on top of the API hooks

Example prompts for the agent

  • Install react-grab MCP so the agent can pull the selected button context
  • Show me how to write a react-grab plugin with custom output formatting

How to install react-grab

1Skills CLI (Vercel)

npx skills add akillness/jeo-skills --skill react-grab -a claude-code

2Manually: put the files in place

~/.claude/skills/react-grab/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/react-grab/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about react-grab

How do I install react-grab in Claude Code?

Add the skill with npx skills add akillness/jeo-skills --skill react-grab -a claude-code. The skill file lands at ~/.claude/skills/react-grab/SKILL.md.

What does react-grab do?

It gives an agent the context of a React element you select: component name, file path, line and HTML. There is a manual clipboard flow and an MCP tool flow.

What does react-grab need to run?

Node.js 22 or newer. The browser overlay is meant for development only.

Similar skills

Everything for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set29

sprint-retrospective Runs a sprint or milestone retrospective and turns it into a few owned actions instead of another template ritual. CX Codex +1 364installs debugging A skill that walks the agent through a reproduce → isolate → verify loop for concrete bugs, regressions and flaky failures. Useful once you already have a failing test or request. CX Codex +1 361installs git-submodule A skill that first asks whether a submodule is the right boundary, then walks you through one safe workflow. Useful when your project pulls in outside code through .gitmodules. CX Codex +1 360installs environment-setup A skill for app configuration: which values belong in .env, what gets committed, how to validate required variables, and where secrets stop being your problem. CX Codex +1 353installs system-environment-setup A skill that makes a repo runnable on any machine: pinned runtimes, local services, containers, bootstrap scripts and setup diagnosis. CX Codex +1 351installs npm-git-install Picks a safe delivery path for a Node package coming from a branch, commit, fork or private repo. Useful when the question is whether to pull from Git at all. CX Codex +1 350installs bmad Reads your current project state and names the next BMAD artifact or gate. Useful when you are stuck after idea notes, a PRD or an architecture draft. CX Codex +1 334installs skill-autoresearch Runs edits to skills, prompts and SOPs through a frozen local benchmark: one change per run, then keep or revert. CX Codex +1 322installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor