Item logo image for React Yank

React Yank

Item media 6 (screenshot) for React Yank
Item video thumbnail
Item media 2 (screenshot) for React Yank
Item media 3 (screenshot) for React Yank
Item media 4 (screenshot) for React Yank
Item media 5 (screenshot) for React Yank
Item media 6 (screenshot) for React Yank
Item video thumbnail
Item video thumbnail
Item media 2 (screenshot) for React Yank
Item media 3 (screenshot) for React Yank
Item media 4 (screenshot) for React Yank
Item media 5 (screenshot) for React Yank
Item media 6 (screenshot) for React Yank

Overview

Yank UI elements & send to AI agents like Cursor, Claude Code, Copilot & more

React Yank lets you grab any element on a webpage and copy its details to your clipboard - perfect for providing context to AI coding assistants. FEATURES: • Hold Cmd+C (Mac) or Ctrl+C (Windows) and hover to yank any element • Quick Actions Palette - Choose what to copy: HTML, CSS selectors, test selectors • Multi-Select Mode (Shift+M) - Select and copy multiple elements at once • Smart Component Detection - Detects React, Vue, Angular, Svelte components • Tailwind CSS Extraction - Extracts Tailwind classes from elements • Test Selector Generator - Generates Playwright and Testing Library selectors • Design Token Extraction - Colors, typography, spacing, borders • Network Context - Shows API endpoints that provided the data • Parent Chain View - See the full DOM hierarchy • Snippet Library - Save and reuse frequently yanked elements KEYBOARD SHORTCUTS: • Cmd/Ctrl + C (hold) - Yank element under cursor • Cmd/Ctrl + Shift + Y - Toggle extension on/off • Shift + M - Enter multi-select mode • Enter - Confirm multi-select • Esc - Cancel PERFECT FOR: • Cursor IDE users • Claude Code users • GitHub Copilot users • Any AI-assisted development workflow OUTPUT FORMATS: • JSON - Structured data format • Markdown - Documentation-friendly • Plain Text - Simple copy-paste Based on React Grab by Aiden Bai. Privacy: This extension runs entirely in your browser. No data is sent to external servers.

Details

  • Version
    0.3.0
  • Updated
    December 15, 2025
  • Size
    107KiB
  • Languages
    English (United States)
  • Developer
    Email
    gboyega.ofi@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

Skill Viewer

5.0

View AI coding skills on GitHub with AI-powered summaries. Supports Claude, Gemini, OpenCode, Codex, and Cursor.

Modify — AI Coding UI Editor | Edit Pages, Generate AI Prompts

5.0

The missing UI layer for AI coding — edit live pages, generate precise prompts for Cursor, Copilot & Claude.

Vibe Annotations - Visual Feedback for AI Coding Agents

5.0

Visual annotations for localhost dev projects. Send feedback to AI coding agents like Claude & Cursor via MCP.

Claude Bridge

5.0

Inspect React elements and send component context to Claude Code via MCP

onUI

5.0

Annotate UI elements for AI agents - no code integration required

React-DomPicker

5.0

Click any UI element to instantly jump to its React source code in VS Code. Perfect for React + Tailwind + ShadCN projects.

PromptStash - ChatGPT, Grok & Gemini veo AI Prompt Manager by lowtouch.ai

5.0

Organize & deploy AI prompts across ChatGPT, Perplexity, Copilot, Google AI Studio, Gemini and more

React code finder

5.0

Chrome extension for React Developer

Agentation Vue

5.0

Turn UI annotations into coding-agent instructions. Click any element, add a note, and paste into any AI tool.

Export Element

0.0

Extract HTML elements and transform them to React, Vue, Tailwind, or PHP

Web to MCP: Import any website components to Cursor or Claude Code

3.9

A Chrome extension that captures website components and sends them to AI coding assistants like Cursor, Claude Code, Codex, etc

Claude Code Companion

0.0

Essential toolkit for Claude Code developers. CLAUDE.md generator, token counter, prompt templates, and quick reference.

Skill Viewer

5.0

View AI coding skills on GitHub with AI-powered summaries. Supports Claude, Gemini, OpenCode, Codex, and Cursor.

Modify — AI Coding UI Editor | Edit Pages, Generate AI Prompts

5.0

The missing UI layer for AI coding — edit live pages, generate precise prompts for Cursor, Copilot & Claude.

Vibe Annotations - Visual Feedback for AI Coding Agents

5.0

Visual annotations for localhost dev projects. Send feedback to AI coding agents like Claude & Cursor via MCP.

Claude Bridge

5.0

Inspect React elements and send component context to Claude Code via MCP

onUI

5.0

Annotate UI elements for AI agents - no code integration required

React-DomPicker

5.0

Click any UI element to instantly jump to its React source code in VS Code. Perfect for React + Tailwind + ShadCN projects.

PromptStash - ChatGPT, Grok & Gemini veo AI Prompt Manager by lowtouch.ai

5.0

Organize & deploy AI prompts across ChatGPT, Perplexity, Copilot, Google AI Studio, Gemini and more

React code finder

5.0

Chrome extension for React Developer

Google apps