@react-grab/cli 0.1.0-beta.4 → 0.1.0-beta.5

package/dist/cli.cjs

@@ -2707,7 +2707,7 @@ var previewPackageJsonAgentRemoval = (projectRoot, agent) => {
 };
 
 // src/commands/add.ts
-var VERSION = "0.1.0-beta.3";
+var VERSION = "0.1.0-beta.4";
 var add = new commander.Command().name("add").alias("install").description("add an agent integration or MCP server").argument(
   "[agent]",
   `agent to add (${AGENTS.join(", ")}, mcp, skill)`
@@ -3385,30 +3385,42 @@ var createRefHelper = (getActivePage2) => {
   };
   const getSource = async (refId) => {
     const element = await getElement(refId);
-    const currentPage2 = getActivePage2();
-    return currentPage2.evaluate((el) => {
-      const g2 = globalThis;
-      if (!g2.__REACT_GRAB__) return null;
-      return g2.__REACT_GRAB__.getSource(el);
-    }, element);
+    try {
+      const currentPage2 = getActivePage2();
+      return await currentPage2.evaluate((el) => {
+        const g2 = globalThis;
+        if (!g2.__REACT_GRAB__) return null;
+        return g2.__REACT_GRAB__.getSource(el);
+      }, element);
+    } finally {
+      await element.dispose();
+    }
   };
   const getProps = async (refId) => {
     const element = await getElement(refId);
-    const currentPage2 = getActivePage2();
-    return currentPage2.evaluate((el) => {
-      const g2 = globalThis;
-      if (!g2.__REACT_GRAB_GET_PROPS__) return null;
-      return g2.__REACT_GRAB_GET_PROPS__(el);
-    }, element);
+    try {
+      const currentPage2 = getActivePage2();
+      return await currentPage2.evaluate((el) => {
+        const g2 = globalThis;
+        if (!g2.__REACT_GRAB_GET_PROPS__) return null;
+        return g2.__REACT_GRAB_GET_PROPS__(el);
+      }, element);
+    } finally {
+      await element.dispose();
+    }
   };
   const getState = async (refId) => {
     const element = await getElement(refId);
-    const currentPage2 = getActivePage2();
-    return currentPage2.evaluate((el) => {
-      const g2 = globalThis;
-      if (!g2.__REACT_GRAB_GET_STATE__) return null;
-      return g2.__REACT_GRAB_GET_STATE__(el);
-    }, element);
+    try {
+      const currentPage2 = getActivePage2();
+      return await currentPage2.evaluate((el) => {
+        const g2 = globalThis;
+        if (!g2.__REACT_GRAB_GET_STATE__) return null;
+        return g2.__REACT_GRAB_GET_STATE__(el);
+      }, element);
+    } finally {
+      await element.dispose();
+    }
   };
   return (refId) => {
     return new Proxy(
@@ -3428,13 +3440,23 @@ var createRefHelper = (getActivePage2) => {
             return () => getState(refId);
           }
           if (prop === "screenshot") {
-            return (options2) => getElement(refId).then(
-              (el) => el.screenshot({ scale: "css", ...options2 })
-            );
+            return async (options2) => {
+              const el = await getElement(refId);
+              try {
+                return await el.screenshot({ scale: "css", ...options2 });
+              } finally {
+                await el.dispose();
+              }
+            };
           }
-          return (...args) => getElement(refId).then(
-            (el) => el[prop](...args)
-          );
+          return async (...args) => {
+            const el = await getElement(refId);
+            try {
+              return await el[prop](...args);
+            } finally {
+              await el.dispose();
+            }
+          };
         }
       }
     );
@@ -3461,8 +3483,8 @@ var createComponentHelper = (getActivePage2) => {
       },
       { name: componentName, nth }
     );
-    const value = await elementHandles.jsonValue().catch(() => null);
-    if (value === null) {
+    const isNull = await currentPage2.evaluate((value) => value === null, elementHandles);
+    if (isNull) {
       await elementHandles.dispose();
       return null;
     }
@@ -3604,11 +3626,15 @@ var createGrabHelper = (ref, getActivePage2) => {
     copyElement: async (refId) => {
       const element = await ref(refId);
       if (!element) return false;
-      const currentPage2 = getActivePage2();
-      return currentPage2.evaluate((el) => {
-        const g2 = globalThis;
-        return g2.__REACT_GRAB__?.copyElement([el]) ?? false;
-      }, element);
+      try {
+        const currentPage2 = getActivePage2();
+        return await currentPage2.evaluate((el) => {
+          const g2 = globalThis;
+          return g2.__REACT_GRAB__?.copyElement([el]) ?? false;
+        }, element);
+      } finally {
+        await element.dispose();
+      }
     }
   };
 };
@@ -17455,7 +17481,6 @@ USE VIEWPORT screenshot=true ONLY FOR:
 
 PERFORMANCE:
 - interactableOnly:true = much smaller output (recommended)
-- format:'compact' = minimal ref:role:name@Component output
 - maxDepth = limit tree depth
 
 After getting refs, use browser_execute with: ref('e1').click()`,
@@ -17463,7 +17488,6 @@ After getting refs, use browser_execute with: ref('e1').click()`,
         page: external_exports.string().optional().default("default").describe("Named page context"),
         maxDepth: external_exports.number().optional().describe("Limit tree depth"),
         interactableOnly: external_exports.boolean().optional().describe("Only clickable/input elements (recommended)"),
-        format: external_exports.enum(["yaml", "compact"]).optional().default("yaml").describe("'yaml' or 'compact'"),
         screenshot: external_exports.boolean().optional().default(false).describe(
           "Viewport screenshot. For element screenshots (PREFERRED), use browser_execute: ref('eX').screenshot()"
         )
@@ -17473,7 +17497,6 @@ After getting refs, use browser_execute with: ref('e1').click()`,
       page: pageName,
       maxDepth,
       interactableOnly,
-      format,
       screenshot
     }) => {
       let browser2 = null;
@@ -17483,7 +17506,7 @@ After getting refs, use browser_execute with: ref('e1').click()`,
         const activePage = connection.page;
         const getActivePage2 = () => activePage;
         const snapshot = createSnapshotHelper(getActivePage2);
-        const snapshotResult = await snapshot({ maxDepth, interactableOnly, format });
+        const snapshotResult = await snapshot({ maxDepth, interactableOnly });
         if (screenshot) {
           const screenshotBuffer = await activePage.screenshot({
             fullPage: false,
@@ -17519,7 +17542,7 @@ IMPORTANT: Always call snapshot() first to get element refs from the a11y tree (
 
 AVAILABLE HELPERS:
 - page: Playwright Page object (https://playwright.dev/docs/api/class-page)
-- snapshot(opts?): Get ARIA tree with React component info. opts: {maxDepth, interactableOnly, format}
+- snapshot(opts?): Get ARIA tree with React component info. opts: {maxDepth, interactableOnly}
 - ref(id): Get element by ref ID, chainable with all ElementHandle methods
 - ref(id).source(): Get React component source {filePath, lineNumber, componentName}
 - ref(id).props(): Get React component props (serialized)
@@ -17722,7 +17745,7 @@ For interacting with elements, use browser_snapshot to get refs first.`,
 };
 
 // src/commands/browser.ts
-var VERSION2 = "0.1.0-beta.3";
+var VERSION2 = "0.1.0-beta.4";
 var printHeader = () => {
   console.log(
     `${pc__default.default.magenta("\u273F")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION2)}`
@@ -17745,6 +17768,10 @@ var rebuildNativeModuleAndRestart = async (browserPkgDir) => {
     stdio: "inherit",
     detached: false
   });
+  child.on("error", (error48) => {
+    console.error(`Failed to restart: ${error48.message}`);
+    process.exit(1);
+  });
   child.on("exit", (code) => process.exit(code ?? 0));
 };
 var isSupportedBrowser = (value) => {
@@ -17843,8 +17870,10 @@ var start = new commander.Command().name("start").description("start browser ser
       const playwrightCookies = browser$1.toPlaywrightCookies(cookies);
       const browser2 = await playwrightCore.chromium.connectOverCDP(browserServer.wsEndpoint);
       const contexts = browser2.contexts();
-      if (contexts.length > 0 && playwrightCookies.length > 0) {
-        await contexts[0].addCookies(playwrightCookies);
+      if (contexts.length > 0) {
+        if (playwrightCookies.length > 0) {
+          await contexts[0].addCookies(playwrightCookies);
+        }
         await browser$1.applyStealthScripts(contexts[0]);
       }
       await browser2.close();
@@ -17976,6 +18005,7 @@ var execute = new commander.Command().name("execute").description("run Playwrigh
     const dispatch = createDispatchHelper(getActivePage2);
     const grab = createGrabHelper(ref, getActivePage2);
     const waitFor = createWaitForHelper(getActivePage2);
+    const component = createComponentHelper(getActivePage2);
     const executeFunction = new Function(
       "page",
       "getActivePage",
@@ -17986,9 +18016,10 @@ var execute = new commander.Command().name("execute").description("run Playwrigh
       "dispatch",
       "grab",
       "waitFor",
+      "component",
       `return (async () => { ${code} })();`
     );
-    const result = await executeFunction(getActivePage2(), getActivePage2, snapshot, ref, fill, drag, dispatch, grab, waitFor);
+    const result = await executeFunction(getActivePage2(), getActivePage2, snapshot, ref, fill, drag, dispatch, grab, waitFor, component);
     console.log(JSON.stringify(await buildOutput(true, result)));
   } catch (error48) {
     console.log(JSON.stringify(await buildOutput(false, void 0, error48 instanceof Error ? error48.message : "Failed")));
@@ -18046,8 +18077,7 @@ PERFORMANCE TIPS
   1. Batch multiple actions in a single execute call to minimize round-trips.
      Each execute spawns a new connection, so combining actions is 3-5x faster.
 
-  2. Use compact format or limit depth for smaller snapshots (faster, fewer tokens).
-     - snapshot({format: 'compact'})      -> minimal ref:role:name output
+  2. Use interactableOnly or limit depth for smaller snapshots (faster, fewer tokens).
      - snapshot({interactableOnly: true}) -> only clickable/input elements
      - snapshot({maxDepth: 5})            -> limit tree depth
 
@@ -18056,22 +18086,28 @@ PERFORMANCE TIPS
   execute "await ref('e1').click()"
   execute "return await snapshot()"
 
-  # FAST: 1 round-trip, compact output
+  # FAST: 1 round-trip, interactable only
   execute "
     await page.goto('https://example.com');
     await ref('e1').click();
-    return await snapshot({format: 'compact'});
+    return await snapshot({interactableOnly: true});
   "
 
 HELPERS
   page              - Playwright Page object
   snapshot(opts?)   - Get ARIA accessibility tree with refs
                       opts.maxDepth: limit tree depth (e.g., 5)
-                      opts.interactableOnly: only show elements with refs
-                      opts.format: "yaml" (default) or "compact"
+                      opts.interactableOnly: only clickable/input elements
   ref(id)           - Get element by ref ID (chainable - supports all ElementHandle methods)
                       Example: await ref('e1').click()
                       Example: await ref('e1').getAttribute('data-foo')
+  ref(id).source()  - Get React component source file info for element
+                      Returns { filePath, lineNumber, componentName } or null
+  ref(id).props()   - Get React component props (serialized)
+  ref(id).state()   - Get React component state/hooks (serialized)
+  component(name, opts?) - Find elements by React component name
+                      opts.nth: get the nth matching element (0-indexed)
+                      Example: await component('Button', {nth: 0})
   fill(id, text)    - Clear and fill input (works with rich text editors)
   drag(opts)        - Drag with custom MIME types
                       opts.from: source selector or ref ID (e.g., "e1" or "text=src")
@@ -18087,21 +18123,16 @@ HELPERS
                       await waitFor('.btn')         - wait for selector
                       await waitFor('networkidle')  - wait for network idle
                       await waitFor('load')         - wait for page load
-  ref(id).source()  - Get React component source file info for element
-                      Returns { filePath, lineNumber, componentName } or null
   grab              - React Grab client API (activate, copyElement, etc)
 
-SNAPSHOT FORMATS
+SNAPSHOT OPTIONS
   # Full YAML tree (default, can be large)
   execute "return await snapshot()"
 
   # Interactable only (recommended - much smaller!)
   execute "return await snapshot({interactableOnly: true})"
 
-  # Compact format (minimal output: ref:role:name|ref:role:name)
-  execute "return await snapshot({format: 'compact'})"
-
-  # Combined options
+  # With depth limit
   execute "return await snapshot({interactableOnly: true, maxDepth: 6})"
 
 SCREENSHOTS - PREFER ELEMENT OVER FULL PAGE
@@ -18145,15 +18176,28 @@ COMMON PATTERNS
     dataTransfer: { 'application/x-custom': 'data' }
   })"
 
-  # Get React component source file
-  execute "return await ref('e1').source()"
-
   # Get page info
   execute "return {url: page.url(), title: await page.title()}"
 
   # CSS selector fallback (refs are now in DOM as aria-ref)
   execute "await page.click('[aria-ref="e1"]')"
 
+REACT-SPECIFIC PATTERNS
+  # Get React component source file
+  execute "return await ref('e1').source()"
+
+  # Get component props
+  execute "return await ref('e1').props()"
+
+  # Get component state
+  execute "return await ref('e1').state()"
+
+  # Find elements by React component name
+  execute "const buttons = await component('Button'); return buttons.length"
+
+  # Get the first Button component and click it
+  execute "const btn = await component('Button', {nth: 0}); await btn.click()"
+
 MULTI-PAGE SESSIONS
   execute "await page.goto('https://github.com')" --page github
   execute "return await snapshot({interactableOnly: true})" --page github
@@ -18210,7 +18254,7 @@ browser.addCommand(status);
 browser.addCommand(execute);
 browser.addCommand(pages);
 browser.addCommand(mcp);
-var VERSION3 = "0.1.0-beta.3";
+var VERSION3 = "0.1.0-beta.4";
 var isMac = process.platform === "darwin";
 var META_LABEL = isMac ? "Cmd" : "Win";
 var ALT_LABEL = isMac ? "Option" : "Alt";
@@ -18697,7 +18741,7 @@ var uninstallPackagesWithFeedback = (packages, packageManager, projectRoot) => {
     handleError(error48);
   }
 };
-var VERSION4 = "0.1.0-beta.3";
+var VERSION4 = "0.1.0-beta.4";
 var REPORT_URL = "https://react-grab.com/api/report-cli";
 var DOCS_URL = "https://github.com/aidenybai/react-grab";
 var promptAgentIntegration = async (cwd, customPkg) => {
@@ -18741,19 +18785,29 @@ var promptAgentIntegration = async (cwd, customPkg) => {
     }
   }
   if (integrationType === "skill" || integrationType === "both") {
-    logger.break();
-    const skillSpinner = spinner("Installing browser automation skill").start();
-    try {
-      child_process.execSync(`npx -y openskills install aidenybai/react-grab -y`, {
-        stdio: "inherit",
-        cwd
-      });
-      logger.break();
-      skillSpinner.succeed("Skill installed to .claude/skills/");
-    } catch {
+    const { skillTarget } = await prompts3__default.default({
+      type: "select",
+      name: "skillTarget",
+      message: `Which ${highlighter.info("agent")} would you like to install the skill for?`,
+      choices: SUPPORTED_TARGETS.map((target) => ({
+        title: target,
+        value: target
+      }))
+    });
+    if (skillTarget) {
       logger.break();
-      skillSpinner.fail("Failed to install skill");
-      logger.dim("Try manually: npx -y openskills install aidenybai/react-grab");
+      const skillSpinner = spinner("Installing browser automation skill").start();
+      try {
+        const skill = await fetchSkillFile();
+        const skillDir = path.join(cwd, AGENT_TARGETS[skillTarget]);
+        fs.rmSync(skillDir, { recursive: true, force: true });
+        fs.mkdirSync(skillDir, { recursive: true });
+        fs.writeFileSync(path.join(skillDir, "SKILL.md"), skill);
+        skillSpinner.succeed(`Skill installed to ${AGENT_TARGETS[skillTarget]}/`);
+      } catch {
+        skillSpinner.fail("Failed to install skill");
+        logger.dim("Try manually: npx -y openskills install aidenybai/react-grab");
+      }
     }
   }
   logger.break();
@@ -19389,7 +19443,7 @@ var init = new commander.Command().name("init").description("initialize React Gr
     await reportToCli("error", void 0, error48);
   }
 });
-var VERSION5 = "0.1.0-beta.3";
+var VERSION5 = "0.1.0-beta.4";
 var remove = new commander.Command().name("remove").description("remove an agent integration").argument(
   "[agent]",
   "agent to remove (claude-code, cursor, opencode, codex, gemini, amp, ami, visual-edit)"
@@ -19568,7 +19622,7 @@ var remove = new commander.Command().name("remove").description("remove an agent
 });
 
 // src/cli.ts
-var VERSION6 = "0.1.0-beta.3";
+var VERSION6 = "0.1.0-beta.4";
 var VERSION_API_URL = "https://www.react-grab.com/api/version";
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));

package/dist/cli.js

@@ -2697,7 +2697,7 @@ var previewPackageJsonAgentRemoval = (projectRoot, agent) => {
 };
 
 // src/commands/add.ts
-var VERSION = "0.1.0-beta.3";
+var VERSION = "0.1.0-beta.4";
 var add = new Command().name("add").alias("install").description("add an agent integration or MCP server").argument(
   "[agent]",
   `agent to add (${AGENTS.join(", ")}, mcp, skill)`
@@ -3375,30 +3375,42 @@ var createRefHelper = (getActivePage2) => {
   };
   const getSource = async (refId) => {
     const element = await getElement(refId);
-    const currentPage2 = getActivePage2();
-    return currentPage2.evaluate((el) => {
-      const g2 = globalThis;
-      if (!g2.__REACT_GRAB__) return null;
-      return g2.__REACT_GRAB__.getSource(el);
-    }, element);
+    try {
+      const currentPage2 = getActivePage2();
+      return await currentPage2.evaluate((el) => {
+        const g2 = globalThis;
+        if (!g2.__REACT_GRAB__) return null;
+        return g2.__REACT_GRAB__.getSource(el);
+      }, element);
+    } finally {
+      await element.dispose();
+    }
   };
   const getProps = async (refId) => {
     const element = await getElement(refId);
-    const currentPage2 = getActivePage2();
-    return currentPage2.evaluate((el) => {
-      const g2 = globalThis;
-      if (!g2.__REACT_GRAB_GET_PROPS__) return null;
-      return g2.__REACT_GRAB_GET_PROPS__(el);
-    }, element);
+    try {
+      const currentPage2 = getActivePage2();
+      return await currentPage2.evaluate((el) => {
+        const g2 = globalThis;
+        if (!g2.__REACT_GRAB_GET_PROPS__) return null;
+        return g2.__REACT_GRAB_GET_PROPS__(el);
+      }, element);
+    } finally {
+      await element.dispose();
+    }
   };
   const getState = async (refId) => {
     const element = await getElement(refId);
-    const currentPage2 = getActivePage2();
-    return currentPage2.evaluate((el) => {
-      const g2 = globalThis;
-      if (!g2.__REACT_GRAB_GET_STATE__) return null;
-      return g2.__REACT_GRAB_GET_STATE__(el);
-    }, element);
+    try {
+      const currentPage2 = getActivePage2();
+      return await currentPage2.evaluate((el) => {
+        const g2 = globalThis;
+        if (!g2.__REACT_GRAB_GET_STATE__) return null;
+        return g2.__REACT_GRAB_GET_STATE__(el);
+      }, element);
+    } finally {
+      await element.dispose();
+    }
   };
   return (refId) => {
     return new Proxy(
@@ -3418,13 +3430,23 @@ var createRefHelper = (getActivePage2) => {
             return () => getState(refId);
           }
           if (prop === "screenshot") {
-            return (options2) => getElement(refId).then(
-              (el) => el.screenshot({ scale: "css", ...options2 })
-            );
+            return async (options2) => {
+              const el = await getElement(refId);
+              try {
+                return await el.screenshot({ scale: "css", ...options2 });
+              } finally {
+                await el.dispose();
+              }
+            };
           }
-          return (...args) => getElement(refId).then(
-            (el) => el[prop](...args)
-          );
+          return async (...args) => {
+            const el = await getElement(refId);
+            try {
+              return await el[prop](...args);
+            } finally {
+              await el.dispose();
+            }
+          };
         }
       }
     );
@@ -3451,8 +3473,8 @@ var createComponentHelper = (getActivePage2) => {
       },
       { name: componentName, nth }
     );
-    const value = await elementHandles.jsonValue().catch(() => null);
-    if (value === null) {
+    const isNull = await currentPage2.evaluate((value) => value === null, elementHandles);
+    if (isNull) {
       await elementHandles.dispose();
       return null;
     }
@@ -3594,11 +3616,15 @@ var createGrabHelper = (ref, getActivePage2) => {
     copyElement: async (refId) => {
       const element = await ref(refId);
       if (!element) return false;
-      const currentPage2 = getActivePage2();
-      return currentPage2.evaluate((el) => {
-        const g2 = globalThis;
-        return g2.__REACT_GRAB__?.copyElement([el]) ?? false;
-      }, element);
+      try {
+        const currentPage2 = getActivePage2();
+        return await currentPage2.evaluate((el) => {
+          const g2 = globalThis;
+          return g2.__REACT_GRAB__?.copyElement([el]) ?? false;
+        }, element);
+      } finally {
+        await element.dispose();
+      }
     }
   };
 };
@@ -17445,7 +17471,6 @@ USE VIEWPORT screenshot=true ONLY FOR:
 
 PERFORMANCE:
 - interactableOnly:true = much smaller output (recommended)
-- format:'compact' = minimal ref:role:name@Component output
 - maxDepth = limit tree depth
 
 After getting refs, use browser_execute with: ref('e1').click()`,
@@ -17453,7 +17478,6 @@ After getting refs, use browser_execute with: ref('e1').click()`,
         page: external_exports.string().optional().default("default").describe("Named page context"),
         maxDepth: external_exports.number().optional().describe("Limit tree depth"),
         interactableOnly: external_exports.boolean().optional().describe("Only clickable/input elements (recommended)"),
-        format: external_exports.enum(["yaml", "compact"]).optional().default("yaml").describe("'yaml' or 'compact'"),
         screenshot: external_exports.boolean().optional().default(false).describe(
           "Viewport screenshot. For element screenshots (PREFERRED), use browser_execute: ref('eX').screenshot()"
         )
@@ -17463,7 +17487,6 @@ After getting refs, use browser_execute with: ref('e1').click()`,
       page: pageName,
       maxDepth,
       interactableOnly,
-      format,
       screenshot
     }) => {
       let browser2 = null;
@@ -17473,7 +17496,7 @@ After getting refs, use browser_execute with: ref('e1').click()`,
         const activePage = connection.page;
         const getActivePage2 = () => activePage;
         const snapshot = createSnapshotHelper(getActivePage2);
-        const snapshotResult = await snapshot({ maxDepth, interactableOnly, format });
+        const snapshotResult = await snapshot({ maxDepth, interactableOnly });
         if (screenshot) {
           const screenshotBuffer = await activePage.screenshot({
             fullPage: false,
@@ -17509,7 +17532,7 @@ IMPORTANT: Always call snapshot() first to get element refs from the a11y tree (
 
 AVAILABLE HELPERS:
 - page: Playwright Page object (https://playwright.dev/docs/api/class-page)
-- snapshot(opts?): Get ARIA tree with React component info. opts: {maxDepth, interactableOnly, format}
+- snapshot(opts?): Get ARIA tree with React component info. opts: {maxDepth, interactableOnly}
 - ref(id): Get element by ref ID, chainable with all ElementHandle methods
 - ref(id).source(): Get React component source {filePath, lineNumber, componentName}
 - ref(id).props(): Get React component props (serialized)
@@ -17712,7 +17735,7 @@ For interacting with elements, use browser_snapshot to get refs first.`,
 };
 
 // src/commands/browser.ts
-var VERSION2 = "0.1.0-beta.3";
+var VERSION2 = "0.1.0-beta.4";
 var printHeader = () => {
   console.log(
     `${pc.magenta("\u273F")} ${pc.bold("React Grab")} ${pc.gray(VERSION2)}`
@@ -17735,6 +17758,10 @@ var rebuildNativeModuleAndRestart = async (browserPkgDir) => {
     stdio: "inherit",
     detached: false
   });
+  child.on("error", (error48) => {
+    console.error(`Failed to restart: ${error48.message}`);
+    process.exit(1);
+  });
   child.on("exit", (code) => process.exit(code ?? 0));
 };
 var isSupportedBrowser = (value) => {
@@ -17833,8 +17860,10 @@ var start = new Command().name("start").description("start browser server manual
       const playwrightCookies = toPlaywrightCookies(cookies);
       const browser2 = await chromium.connectOverCDP(browserServer.wsEndpoint);
       const contexts = browser2.contexts();
-      if (contexts.length > 0 && playwrightCookies.length > 0) {
-        await contexts[0].addCookies(playwrightCookies);
+      if (contexts.length > 0) {
+        if (playwrightCookies.length > 0) {
+          await contexts[0].addCookies(playwrightCookies);
+        }
         await applyStealthScripts(contexts[0]);
       }
       await browser2.close();
@@ -17966,6 +17995,7 @@ var execute = new Command().name("execute").description("run Playwright code wit
     const dispatch = createDispatchHelper(getActivePage2);
     const grab = createGrabHelper(ref, getActivePage2);
     const waitFor = createWaitForHelper(getActivePage2);
+    const component = createComponentHelper(getActivePage2);
     const executeFunction = new Function(
       "page",
       "getActivePage",
@@ -17976,9 +18006,10 @@ var execute = new Command().name("execute").description("run Playwright code wit
       "dispatch",
       "grab",
       "waitFor",
+      "component",
       `return (async () => { ${code} })();`
     );
-    const result = await executeFunction(getActivePage2(), getActivePage2, snapshot, ref, fill, drag, dispatch, grab, waitFor);
+    const result = await executeFunction(getActivePage2(), getActivePage2, snapshot, ref, fill, drag, dispatch, grab, waitFor, component);
     console.log(JSON.stringify(await buildOutput(true, result)));
   } catch (error48) {
     console.log(JSON.stringify(await buildOutput(false, void 0, error48 instanceof Error ? error48.message : "Failed")));
@@ -18036,8 +18067,7 @@ PERFORMANCE TIPS
   1. Batch multiple actions in a single execute call to minimize round-trips.
      Each execute spawns a new connection, so combining actions is 3-5x faster.
 
-  2. Use compact format or limit depth for smaller snapshots (faster, fewer tokens).
-     - snapshot({format: 'compact'})      -> minimal ref:role:name output
+  2. Use interactableOnly or limit depth for smaller snapshots (faster, fewer tokens).
      - snapshot({interactableOnly: true}) -> only clickable/input elements
      - snapshot({maxDepth: 5})            -> limit tree depth
 
@@ -18046,22 +18076,28 @@ PERFORMANCE TIPS
   execute "await ref('e1').click()"
   execute "return await snapshot()"
 
-  # FAST: 1 round-trip, compact output
+  # FAST: 1 round-trip, interactable only
   execute "
     await page.goto('https://example.com');
     await ref('e1').click();
-    return await snapshot({format: 'compact'});
+    return await snapshot({interactableOnly: true});
   "
 
 HELPERS
   page              - Playwright Page object
   snapshot(opts?)   - Get ARIA accessibility tree with refs
                       opts.maxDepth: limit tree depth (e.g., 5)
-                      opts.interactableOnly: only show elements with refs
-                      opts.format: "yaml" (default) or "compact"
+                      opts.interactableOnly: only clickable/input elements
   ref(id)           - Get element by ref ID (chainable - supports all ElementHandle methods)
                       Example: await ref('e1').click()
                       Example: await ref('e1').getAttribute('data-foo')
+  ref(id).source()  - Get React component source file info for element
+                      Returns { filePath, lineNumber, componentName } or null
+  ref(id).props()   - Get React component props (serialized)
+  ref(id).state()   - Get React component state/hooks (serialized)
+  component(name, opts?) - Find elements by React component name
+                      opts.nth: get the nth matching element (0-indexed)
+                      Example: await component('Button', {nth: 0})
   fill(id, text)    - Clear and fill input (works with rich text editors)
   drag(opts)        - Drag with custom MIME types
                       opts.from: source selector or ref ID (e.g., "e1" or "text=src")
@@ -18077,21 +18113,16 @@ HELPERS
                       await waitFor('.btn')         - wait for selector
                       await waitFor('networkidle')  - wait for network idle
                       await waitFor('load')         - wait for page load
-  ref(id).source()  - Get React component source file info for element
-                      Returns { filePath, lineNumber, componentName } or null
   grab              - React Grab client API (activate, copyElement, etc)
 
-SNAPSHOT FORMATS
+SNAPSHOT OPTIONS
   # Full YAML tree (default, can be large)
   execute "return await snapshot()"
 
   # Interactable only (recommended - much smaller!)
   execute "return await snapshot({interactableOnly: true})"
 
-  # Compact format (minimal output: ref:role:name|ref:role:name)
-  execute "return await snapshot({format: 'compact'})"
-
-  # Combined options
+  # With depth limit
   execute "return await snapshot({interactableOnly: true, maxDepth: 6})"
 
 SCREENSHOTS - PREFER ELEMENT OVER FULL PAGE
@@ -18135,15 +18166,28 @@ COMMON PATTERNS
     dataTransfer: { 'application/x-custom': 'data' }
   })"
 
-  # Get React component source file
-  execute "return await ref('e1').source()"
-
   # Get page info
   execute "return {url: page.url(), title: await page.title()}"
 
   # CSS selector fallback (refs are now in DOM as aria-ref)
   execute "await page.click('[aria-ref="e1"]')"
 
+REACT-SPECIFIC PATTERNS
+  # Get React component source file
+  execute "return await ref('e1').source()"
+
+  # Get component props
+  execute "return await ref('e1').props()"
+
+  # Get component state
+  execute "return await ref('e1').state()"
+
+  # Find elements by React component name
+  execute "const buttons = await component('Button'); return buttons.length"
+
+  # Get the first Button component and click it
+  execute "const btn = await component('Button', {nth: 0}); await btn.click()"
+
 MULTI-PAGE SESSIONS
   execute "await page.goto('https://github.com')" --page github
   execute "return await snapshot({interactableOnly: true})" --page github
@@ -18200,7 +18244,7 @@ browser.addCommand(status);
 browser.addCommand(execute);
 browser.addCommand(pages);
 browser.addCommand(mcp);
-var VERSION3 = "0.1.0-beta.3";
+var VERSION3 = "0.1.0-beta.4";
 var isMac = process.platform === "darwin";
 var META_LABEL = isMac ? "Cmd" : "Win";
 var ALT_LABEL = isMac ? "Option" : "Alt";
@@ -18687,7 +18731,7 @@ var uninstallPackagesWithFeedback = (packages, packageManager, projectRoot) => {
     handleError(error48);
   }
 };
-var VERSION4 = "0.1.0-beta.3";
+var VERSION4 = "0.1.0-beta.4";
 var REPORT_URL = "https://react-grab.com/api/report-cli";
 var DOCS_URL = "https://github.com/aidenybai/react-grab";
 var promptAgentIntegration = async (cwd, customPkg) => {
@@ -18731,19 +18775,29 @@ var promptAgentIntegration = async (cwd, customPkg) => {
     }
   }
   if (integrationType === "skill" || integrationType === "both") {
-    logger.break();
-    const skillSpinner = spinner("Installing browser automation skill").start();
-    try {
-      execSync(`npx -y openskills install aidenybai/react-grab -y`, {
-        stdio: "inherit",
-        cwd
-      });
-      logger.break();
-      skillSpinner.succeed("Skill installed to .claude/skills/");
-    } catch {
+    const { skillTarget } = await prompts3({
+      type: "select",
+      name: "skillTarget",
+      message: `Which ${highlighter.info("agent")} would you like to install the skill for?`,
+      choices: SUPPORTED_TARGETS.map((target) => ({
+        title: target,
+        value: target
+      }))
+    });
+    if (skillTarget) {
       logger.break();
-      skillSpinner.fail("Failed to install skill");
-      logger.dim("Try manually: npx -y openskills install aidenybai/react-grab");
+      const skillSpinner = spinner("Installing browser automation skill").start();
+      try {
+        const skill = await fetchSkillFile();
+        const skillDir = join(cwd, AGENT_TARGETS[skillTarget]);
+        rmSync(skillDir, { recursive: true, force: true });
+        mkdirSync(skillDir, { recursive: true });
+        writeFileSync(join(skillDir, "SKILL.md"), skill);
+        skillSpinner.succeed(`Skill installed to ${AGENT_TARGETS[skillTarget]}/`);
+      } catch {
+        skillSpinner.fail("Failed to install skill");
+        logger.dim("Try manually: npx -y openskills install aidenybai/react-grab");
+      }
     }
   }
   logger.break();
@@ -19379,7 +19433,7 @@ var init = new Command().name("init").description("initialize React Grab in your
     await reportToCli("error", void 0, error48);
   }
 });
-var VERSION5 = "0.1.0-beta.3";
+var VERSION5 = "0.1.0-beta.4";
 var remove = new Command().name("remove").description("remove an agent integration").argument(
   "[agent]",
   "agent to remove (claude-code, cursor, opencode, codex, gemini, amp, ami, visual-edit)"
@@ -19558,7 +19612,7 @@ var remove = new Command().name("remove").description("remove an agent integrati
 });
 
 // src/cli.ts
-var VERSION6 = "0.1.0-beta.3";
+var VERSION6 = "0.1.0-beta.4";
 var VERSION_API_URL = "https://www.react-grab.com/api/version";
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-grab/cli",
-  "version": "0.1.0-beta.4",
+  "version": "0.1.0-beta.5",
   "type": "module",
   "bin": {
     "react-grab": "./dist/cli.js"
@@ -32,7 +32,7 @@
     "playwright-core": "^1.50.0",
     "prompts": "^2.4.2",
     "zod": "^4.3.5",
-    "@react-grab/browser": "0.1.0-beta.4"
+    "@react-grab/browser": "0.1.0-beta.5"
   },
   "scripts": {
     "dev": "tsup --watch",