skills.rest
mehdibha
mehdibhaCOMMUNITY
Explore all skills by this author →
Website𝕏@mehdibhaGitHub

react-grab

Processes browser UI element grabs from React Grab as a continuous agent task loop.

1.4k|34|Updated Mar 7, 2024
Search Tags:#react#browser automation#front-end development#agent loop#react-grab#ui element selection#clipboard watcher
One-click install
npx skills add https://github.com/mehdibha/dotUI --skill react-grab-mehdibha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-grab
Source: https://github.com/mehdibha/dotUI/tree/main/.claude/skills/react-grab
Command: npx skills add https://github.com/mehdibha/dotUI --skill react-grab-mehdibha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-grab.

What problem does it solve? Manually copying UI element references from the browser into an AI coding session requires constant copy-paste handoffs. This Skill runs a hands-free loop where elements grabbed in the browser with React Grab are automatically delivered to the agent as actionable tasks. ## Core Features & Use Cases - Continuous grab watcher: Runs npx react-grab@latest pull in a blocking loop so every grabbed element arrives as JSON with source references (file:line, component name). - Mid-task redirection: New grabs captured while the agent is working supersede the current task, with non-blocking peeks between steps and background execution for slow commands. - Prompt-driven actions: When a grab includes a user-typed prompt, the agent executes that instruction directly against the referenced source file. - Use Case: A developer points at a misaligned button in their running app, grabs it with the comment "make this full width", and the agent immediately edits the correct component file without any manual context transfer. ## Quick Start Ask the agent to watch your React Grab grabs and act on each element you select in the browser until you say stop.

Frequently Asked Questions about react-grab

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

FAQPage Schema
How do I set up a hands-free React Grab workflow with an AI agent?▼

Start the loop by having the agent run `npx react-grab@latest pull --max-age 0` repeatedly. Each grab you make in the browser prints as JSON with source references, and the agent acts on it automatically until you say stop.

How does React Grab send browser element selections to the agent?▼

React Grab watches the clipboard for copied UI elements and the pull command prints each grab as one JSON line containing the element's source references like file path, line number, and component name.

Can I redirect the agent while it is still working on a previous grab?▼

Yes. The watcher keeps capturing during active tasks, and the agent peeks for new grabs between steps. A new grab supersedes the current task, and any background processes started for it are cancelled.

Does React Grab work over SSH or in remote containers?▼

No. The watcher reads the clipboard on the machine it runs on, so it must run on the same machine as the browser. Remote SSH sessions or containers cannot see your local clipboard grabs.

Why are my older React Grab grabs being skipped?▼

By default, grabs older than about five minutes are treated as stale and skipped. Pass `--max-age 0` to the pull command so every grab is delivered regardless of age.

Related Skills

Explore More Software Engineering Skills→
supercent-iosupercent-io

react-grab

Capture React component context from browser UI elements for AI coding agents.

Official
Intermediate
srstompsrstomp
8

browser-verification

Automate browser verification of UI changes with Playwright to detect visual regressions and runtime errors.

Community
Intermediate
pd-phucpd-phuc

verification-before-completion

Enforces running verification commands before claiming work is complete or passing.

Community
Basic
Hello-QMHello-QM
181

atom-ops

Perform one-shot single-atom edits via the catgo_structure action.

Community
Intermediate