docs: restore react devtools advanced guidance

Author: thymikee

skills/react-devtools/SKILL.md

@@ -36,4 +36,4 @@ agent-device react-devtools profile rerenders --limit 5
 
 Rules:
 
-Keep reads bounded with `--depth`/`find`, treat `@c` refs as reload-local, profile only the investigated interaction, and run the same command in remote Android sessions; the CLI manages the companion tunnel.
+Keep reads bounded with `--depth`/`find`, treat `@c` refs as reload-local, profile only the investigated interaction, and run the same command in remote Android sessions; the CLI manages the needed local service tunnel.

src/utils/__tests__/args.test.ts

@@ -872,6 +872,26 @@ test('usageForCommand resolves dogfood help topic', () => {
   assert.match(help, /screenshot \.\/dogfood-output\/screenshots\/issue-001\.png --overlay-refs/);
 });
 
+test('usageForCommand resolves react-devtools help topic', () => {
+  const help = usageForCommand('react-devtools');
+  if (help === null) throw new Error('Expected react-devtools help text');
+  assert.match(help, /agent-device react-devtools start/);
+  assert.match(help, /agent-device react-devtools wait --component <ComponentName>/);
+  assert.match(help, /agent-device react-devtools find <ComponentName> --exact/);
+  assert.match(help, /agent-device react-devtools errors/);
+  assert.match(help, /agent-device react-devtools profile report @c5/);
+  assert.match(help, /agent-device react-devtools profile timeline --limit 20/);
+  assert.match(help, /agent-device react-devtools profile export profile\.json/);
+  assert.match(
+    help,
+    /agent-device react-devtools profile diff before\.json after\.json --limit 10/,
+  );
+  assert.match(help, /render causes and changed props\/state\/hooks/);
+  assert.match(help, /@c refs reset after reload\/remount/);
+  assert.match(help, /isolated --state-dir/);
+  assert.match(help, /local service tunnel/);
+});
+
 test('apps defaults to --all filter and allows overrides', () => {
   const defaultFilter = parseArgs(['apps'], { strictFlags: true });
   assert.equal(defaultFilter.command, 'apps');

src/utils/command-schema.ts

@@ -386,22 +386,40 @@ React Native internals:
 Use this for React Native performance/profiling and internals that the accessibility tree cannot expose: components, props, state, hooks, ownership, slow renders, and rerenders.
 
 Core commands:
+  agent-device react-devtools start
+  agent-device react-devtools stop
   agent-device react-devtools status
   agent-device react-devtools wait --connected
+  agent-device react-devtools wait --component <ComponentName>
+  agent-device react-devtools count
   agent-device react-devtools get tree --depth 3
   agent-device react-devtools find <ComponentName>
+  agent-device react-devtools find <ComponentName> --exact
   agent-device react-devtools get component @c5
+  agent-device react-devtools errors
   agent-device react-devtools profile start
   agent-device react-devtools profile stop
   agent-device react-devtools profile slow --limit 5
   agent-device react-devtools profile rerenders --limit 5
+  agent-device react-devtools profile report @c5
+  agent-device react-devtools profile timeline --limit 20
+  agent-device react-devtools profile export profile.json
+  agent-device react-devtools profile diff before.json after.json --limit 10
 
 Profiling loop:
   1. Verify the app is connected: react-devtools status, then wait --connected if needed.
   2. Start profiling immediately before the interaction.
   3. Drive the interaction with normal agent-device commands.
   4. Stop profiling.
   5. Inspect slow components and rerenders.
+  6. Use profile report @cN for render causes and changed props/state/hooks; use get component @cN for current props/state/hooks.
+
+Rules:
+  Start with get tree --depth 3 or find <name>; use find --exact when fuzzy results are noisy.
+  @c refs reset after reload/remount. After reload, wait --connected and inspect again.
+  Keep the profile window narrow; unrelated navigation makes render data noisy.
+  For cross-platform validation with explicit device selectors, prefer isolated --state-dir and restart react-devtools between platforms.
+  Remote Android runs normally through agent-device react-devtools; the CLI manages the needed local service tunnel. Expo support depends on the SDK's bundled React Native runtime.
 
 Example:
   agent-device react-devtools status
@@ -411,6 +429,7 @@ Example:
   agent-device react-devtools profile stop
   agent-device react-devtools profile slow --limit 5
   agent-device react-devtools profile rerenders --limit 5
+  agent-device react-devtools profile report @c5
 
 Use snapshot, screenshot, logs, network, and perf for device/app runtime evidence. Use react-devtools only when component internals or React rendering behavior matters.`,
   },

test/skillgym/suites/agent-device-smoke-suite.ts

@@ -710,6 +710,40 @@ const SKILL_GUIDANCE_CASES: TestCase[] = [
     ],
     forbiddenOutputs: [commandPattern('snapshot'), commandPattern('perf')],
   }),
+  makeCase({
+    id: 'react-devtools-exact-component-inspect',
+    contract: [
+      'App name: Agent Device Tester',
+      'React Native DevTools is connected',
+      'Need current props, state, and hooks for component SearchScreen',
+      'Fuzzy component search returns noisy matches unless exact matching is used',
+    ],
+    task: 'Plan bounded React DevTools commands to find the exact SearchScreen component and inspect it.',
+    outputs: [
+      commandPattern('react-devtools find'),
+      /SearchScreen/i,
+      /--exact/i,
+      commandPattern('react-devtools get component'),
+    ],
+    forbiddenOutputs: [commandPattern('snapshot'), commandPattern('perf')],
+  }),
+  makeCase({
+    id: 'react-devtools-render-cause-report',
+    contract: [
+      'App name: Agent Device Tester',
+      'React Native profile has already been stopped',
+      'Rerender suspect from profile output: @c12',
+      'Need render causes and changed props/state/hooks for that component',
+    ],
+    task: 'Plan the React DevTools command to inspect render causes for @c12.',
+    outputs: [commandPattern('react-devtools profile report'), /@c12/i],
+    forbiddenOutputs: [
+      commandPattern('snapshot'),
+      commandPattern('perf'),
+      commandPattern('react-devtools profile slow'),
+      commandPattern('react-devtools profile rerenders'),
+    ],
+  }),
   makeCase({
     id: 'gesture-swipe-carousel',
     contract: [