react-grab — скилл для Claude Code: контекст React-элемента из браузера
Скилл учит агента забирать контекст выбранного React-элемента из живого браузера: имя компонента, файл, строку и HTML. Пригодится, когда правку нужно делать по реальному DOM, а не по догадкам.
npx skills add akillness/jeo-skills --skill react-grab -a claude-codeЧто делает react-grab
Скилл описывает три способа доставки контекста агенту. Первый — буфер обмена: наводите курсор на элемент в браузере, жмёте Cmd+C или Ctrl+C и вставляете результат в чат. Второй — MCP: после выбора элемента агент сам вызывает инструмент get_element_context и получает путь к файлу, компонент, стек и HTML. Третий — плагины и API, если нужны свои действия или хуки жизненного цикла.
Установка идёт через npx -y grab@latest init, для MCP-режима — npx -y grab@latest add mcp. Оверлей работает только в режиме разработки, в продакшене его быть не должно. Нужен Node.js 22 или новее: на более старой версии установка не пройдёт, это стоит проверить до запуска команд.
Скилл держит границы узко. Общая автоматизация браузера, переиспользование сессии с логинами, визуальная разметка интерфейса, аудит производительности React и работа с дизайн-системой — не его задачи, для них есть другие скиллы. Свои плагины собирают на примитивах вроде getElementContext(element), freeze(), openFile(filePath, lineNumber?) и registerPlugin(...).
Какие задачи решает
- передать агенту точный путь к компоненту вместо пересказа словами
- найти исходник элемента, который видно только в браузере
- вставить HTML-фрагмент в чат одним нажатием
- подключить выбор элемента к агенту через MCP-инструмент
- собрать свой плагин поверх API с хуками
Примеры запросов агенту
- Настрой react-grab в моём Next.js-проекте, чтобы я копировал компонент в Claude
- Поставь react-grab MCP, чтобы агент забирал контекст выбранной кнопки
- Покажи, как написать плагин react-grab со своим форматированием вывода
Как установить react-grab
1Через Skills CLI (Vercel)
npx skills add akillness/jeo-skills --skill react-grab -a claude-code2Вручную: положить файлы
~/.claude/skills/react-grab/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/react-grab/
1Через Skills CLI (Vercel)
npx skills add akillness/jeo-skills --skill react-grab -a codex2Вручную: положить файлы
.agents/skills/react-grab/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add akillness/jeo-skills --skill react-grab -a cursor2Вручную: положить файлы
.cursor/skills/react-grab/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install akillness/jeo-skills react-grab2Вручную: положить файлы
.github/skills/react-grab/SKILL.md1Через Skills CLI (Vercel)
npx skills add akillness/jeo-skills --skill react-grab -a gemini-cli2Командой платформы
gemini skills install https://github.com/akillness/jeo-skills --path .agent-skills/react-grabВручную: положить файлы
.devin/skills/react-grab/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add akillness/jeo-skills --skill react-grab -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о react-grab
Как установить react-grab в Claude Code?
Сначала добавьте скилл: npx skills add akillness/jeo-skills --skill react-grab -a claude-code. Файл скилла появится по пути ~/.claude/skills/react-grab/SKILL.md.
Что делает react-grab?
Помогает агенту получить контекст выбранного React-элемента: имя компонента, путь к файлу, строку и HTML. Есть ручной режим через буфер обмена и режим с MCP-инструментом.
Что нужно для работы react-grab?
Node.js 22 или новее. Оверлей в браузере предназначен только для разработки.
