[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-callstack-react-devtools":3,"mdc-dnpsen-key":37,"related-org-callstack-react-devtools":1836,"related-repo-callstack-react-devtools":2019},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":35,"mdContent":36},"react-devtools","debug React apps at runtime","React DevTools CLI for AI agents. Use when the user asks you to debug a React or React Native app at runtime, inspect component props\u002Fstate\u002Fhooks, diagnose render performance, profile re-renders, find slow components, or understand why something re-renders. Triggers include \"why does this re-render\", \"inspect the component\", \"what props does X have\", \"profile the app\", \"find slow components\", \"debug the UI\", \"check component state\", \"the app feels slow\", or any React runtime debugging task.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"callstack","Callstack","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fcallstack.png","callstackincubator",[13,17,20,23],{"name":14,"slug":15,"type":16},"Performance","performance","tag",{"name":18,"slug":19,"type":16},"React Native","react-native",{"name":21,"slug":22,"type":16},"React","react",{"name":24,"slug":25,"type":16},"Debugging","debugging",234,"https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-react-devtools","2026-04-06T18:06:51.183546",null,9,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":34},[],"Gives AI agents access to React DevTools ⚛️🤖","https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-react-devtools\u002Ftree\u002FHEAD\u002Fpackages\u002Fagent-react-devtools\u002Fskills\u002Freact-devtools","---\nname: react-devtools\ndescription: React DevTools CLI for AI agents. Use when the user asks you to debug a React or React Native app at runtime, inspect component props\u002Fstate\u002Fhooks, diagnose render performance, profile re-renders, find slow components, or understand why something re-renders. Triggers include \"why does this re-render\", \"inspect the component\", \"what props does X have\", \"profile the app\", \"find slow components\", \"debug the UI\", \"check component state\", \"the app feels slow\", or any React runtime debugging task.\nallowed-tools: Bash(agent-react-devtools:*)\n---\n\n# agent-react-devtools\n\nCLI that connects to a running React or React Native app via the React DevTools protocol and exposes the component tree, props, state, hooks, and profiling data in a token-efficient format.\n\n## Core Workflow\n\n1. **Ensure connection** — check `agent-react-devtools status`. If the daemon is not running, start it with `agent-react-devtools start`. Use `agent-react-devtools wait --connected` to block until a React app connects.\n2. **Inspect** — get the component tree, search for components, inspect props\u002Fstate\u002Fhooks.\n3. **Profile** — start profiling, trigger the interaction (or ask the user to), stop profiling, analyze results.\n4. **Act** — use the data to fix the bug, optimize performance, or explain what's happening.\n\n## Essential Commands\n\n### Daemon\n\n```bash\nagent-react-devtools start              # Start daemon (auto-starts on first command)\nagent-react-devtools stop               # Stop daemon\nagent-react-devtools status             # Check connection, component count, last event\nagent-react-devtools wait --connected   # Block until a React app connects\nagent-react-devtools wait --component App # Block until a component appears\n```\n\n### Component Inspection\n\n```bash\nagent-react-devtools get tree           # Full component hierarchy (labels: @c1, @c2, ...)\nagent-react-devtools get tree --depth 3 # Limit depth\nagent-react-devtools get component @c5  # Props, state, hooks for a specific component\nagent-react-devtools find Button        # Search by display name (fuzzy)\nagent-react-devtools find Button --exact # Exact match\nagent-react-devtools count              # Count by type: fn, cls, host, memo, ...\nagent-react-devtools errors             # List components with errors or warnings\n```\n\n### Performance Profiling\n\n```bash\nagent-react-devtools profile start              # Start recording\nagent-react-devtools profile stop               # Stop and collect data\nagent-react-devtools profile slow               # Slowest components by avg render time\nagent-react-devtools profile slow --limit 10    # Top 10\nagent-react-devtools profile rerenders          # Most re-rendered components\nagent-react-devtools profile report @c5         # Detailed report for one component\nagent-react-devtools profile timeline --limit 10                        # First 10 commits (use --limit; uncapped can dump 300+ lines)\nagent-react-devtools profile timeline --limit 10 --offset 10           # Next 10 (pagination)\nagent-react-devtools profile timeline --sort duration --limit 5        # Top 5 most expensive commits\nagent-react-devtools profile timeline --sort timeline --limit 5        # Explicit chronological order (same as default)\nagent-react-devtools profile commit 3           # Detail for commit #3\nagent-react-devtools profile export profile.json # Export as React DevTools Profiler JSON\nagent-react-devtools profile diff before.json after.json  # Compare two exports\n```\n\n## Understanding the Output\n\n### Component Labels\n\nEvery component gets a stable label like `@c1`, `@c2`. Use these to reference components in follow-up commands:\n\n```\n@c1 [fn] App\n├─ @c2 [fn] Header\n├─ @c3 [fn] TodoList\n│  ├─ @c4 [fn] TodoItem key=1\n│  └─ @c5 [fn] TodoItem key=2\n└─ @c6 [host] div\n```\n\nType abbreviations: `fn` = function, `cls` = class, `host` = DOM element, `memo` = React.memo, `fRef` = forwardRef, `susp` = Suspense, `ctx` = context.\n\nComponents with errors or warnings show annotations: `⚠2` = 2 warnings, `✗1` = 1 error. Use `agent-react-devtools errors` to list only affected components.\n\n### Inspected Component\n\n```\n@c3 [fn] TodoList\nprops:\n  items: [{\"id\":1,\"text\":\"Buy milk\"},{\"id\":2,\"text\":\"Walk dog\"}]\n  onDelete: ƒ\nstate:\n  filter: \"all\"\nhooks:\n  useState: \"all\"\n  useMemo: [...]\n  useCallback: ƒ\n```\n\n`ƒ` = function value. Values over 60 chars are truncated.\n\n### Profiling Output\n\n```\nSlowest (by avg render time):\n  @c3 [fn] ExpensiveList  avg:12.3ms  max:18.1ms  renders:47  causes:props-changed  changed: props: items, filter\n  @c4 [fn] TodoItem  avg:2.1ms  max:5.0ms  renders:94  causes:parent-rendered, props-changed  changed: props: onToggle\n```\n\nRender causes: `props-changed`, `state-changed`, `hooks-changed`, `parent-rendered`, `force-update`, `first-mount`.\n\nWhen specific changed keys are available, a `changed:` suffix shows exactly which props, state keys, or hooks triggered the render (e.g. `changed: props: onClick, className  state: count  hooks: #0`).\n\n## Common Patterns\n\n### Wait for the app to connect after a reload\n\n```bash\nagent-react-devtools wait --connected --timeout 10\nagent-react-devtools get tree\n```\n\nUse this after triggering a page reload or HMR update to avoid querying empty state.\n\n### Diagnose slow interactions\n\n```bash\nagent-react-devtools profile start\n# User interacts with the app (or use agent-browser to drive the UI)\nagent-react-devtools profile stop\nagent-react-devtools profile slow --limit 5\nagent-react-devtools profile rerenders --limit 5\n```\n\nThen inspect the worst offenders with `get component @cN` and `profile report @cN`.\n\n### Browse a long timeline in chunks\n\n```bash\nagent-react-devtools profile timeline --limit 20               # commits 0–19\nagent-react-devtools profile timeline --limit 20 --offset 20   # commits 20–39\nagent-react-devtools profile timeline --offset 30 --limit 10   # skip warm-up, show 30–39\n```\n\nUse `profile commit \u003CN>` to drill into a specific commit once you spot a spike.\n\n### Find a component and check its state\n\n```bash\nagent-react-devtools find SearchBar\nagent-react-devtools get component @c12\n```\n\n### Verify a fix worked\n\n```bash\nagent-react-devtools profile start\n# Repeat the interaction\nagent-react-devtools profile stop\nagent-react-devtools profile slow --limit 5\n# Compare render counts and durations to the previous run\n```\n\n## Using with agent-browser\n\nWhen using `agent-browser` to drive the app while profiling or debugging, you **must use headed mode** (`--headed`). Headless Chromium does not execute ES module scripts the same way as a real browser, which prevents the devtools connect script from running properly.\n\n```bash\nagent-browser --session devtools --headed open http:\u002F\u002Flocalhost:5173\u002F\nagent-react-devtools status  # Should show 1 connected app\n```\n\n## Important Rules\n\n- **Labels reset** when the app reloads or components unmount\u002Fremount. After a reload, use `wait --connected` then re-check with `get tree` or `find`.\n- **`status` first** — if status shows 0 connected apps, the React app is not connected. The user may need to run `npx agent-react-devtools init` in their project first.\n- **Headed browser required** — if using `agent-browser`, always use `--headed` mode. Headless Chromium does not properly load the devtools connect script.\n- **Profile while interacting** — profiling only captures renders that happen between `profile start` and `profile stop`. Make sure the relevant interaction happens during that window.\n- **Use `--depth`** on large trees — a deep tree can produce a lot of output. Start with `--depth 3` or `--depth 4` and go deeper only on the subtree you care about.\n\n## References\n\n| File | When to read |\n|------|-------------|\n| [commands.md](references\u002Fcommands.md) | Full command reference with all flags and edge cases |\n| [profiling-guide.md](references\u002Fprofiling-guide.md) | Step-by-step profiling workflows and interpreting results |\n| [setup.md](references\u002Fsetup.md) | How to connect different frameworks (Vite, Next.js, Expo, CRA) |\n",{"data":38,"body":40},{"name":4,"description":6,"allowed-tools":39},"Bash(agent-react-devtools:*)",{"type":41,"children":42},"root",[43,51,57,64,135,141,148,268,274,443,449,822,828,834,855,865,926,955,961,970,981,987,996,1044,1065,1071,1077,1125,1130,1136,1230,1250,1256,1365,1378,1384,1427,1433,1509,1515,1543,1598,1604,1744,1750,1830],{"type":44,"tag":45,"props":46,"children":48},"element","h1",{"id":47},"agent-react-devtools",[49],{"type":50,"value":47},"text",{"type":44,"tag":52,"props":53,"children":54},"p",{},[55],{"type":50,"value":56},"CLI that connects to a running React or React Native app via the React DevTools protocol and exposes the component tree, props, state, hooks, and profiling data in a token-efficient format.",{"type":44,"tag":58,"props":59,"children":61},"h2",{"id":60},"core-workflow",[62],{"type":50,"value":63},"Core Workflow",{"type":44,"tag":65,"props":66,"children":67},"ol",{},[68,105,115,125],{"type":44,"tag":69,"props":70,"children":71},"li",{},[72,78,80,87,89,95,97,103],{"type":44,"tag":73,"props":74,"children":75},"strong",{},[76],{"type":50,"value":77},"Ensure connection",{"type":50,"value":79}," — check ",{"type":44,"tag":81,"props":82,"children":84},"code",{"className":83},[],[85],{"type":50,"value":86},"agent-react-devtools status",{"type":50,"value":88},". If the daemon is not running, start it with ",{"type":44,"tag":81,"props":90,"children":92},{"className":91},[],[93],{"type":50,"value":94},"agent-react-devtools start",{"type":50,"value":96},". Use ",{"type":44,"tag":81,"props":98,"children":100},{"className":99},[],[101],{"type":50,"value":102},"agent-react-devtools wait --connected",{"type":50,"value":104}," to block until a React app connects.",{"type":44,"tag":69,"props":106,"children":107},{},[108,113],{"type":44,"tag":73,"props":109,"children":110},{},[111],{"type":50,"value":112},"Inspect",{"type":50,"value":114}," — get the component tree, search for components, inspect props\u002Fstate\u002Fhooks.",{"type":44,"tag":69,"props":116,"children":117},{},[118,123],{"type":44,"tag":73,"props":119,"children":120},{},[121],{"type":50,"value":122},"Profile",{"type":50,"value":124}," — start profiling, trigger the interaction (or ask the user to), stop profiling, analyze results.",{"type":44,"tag":69,"props":126,"children":127},{},[128,133],{"type":44,"tag":73,"props":129,"children":130},{},[131],{"type":50,"value":132},"Act",{"type":50,"value":134}," — use the data to fix the bug, optimize performance, or explain what's happening.",{"type":44,"tag":58,"props":136,"children":138},{"id":137},"essential-commands",[139],{"type":50,"value":140},"Essential Commands",{"type":44,"tag":142,"props":143,"children":145},"h3",{"id":144},"daemon",[146],{"type":50,"value":147},"Daemon",{"type":44,"tag":149,"props":150,"children":155},"pre",{"className":151,"code":152,"language":153,"meta":154,"style":154},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","agent-react-devtools start              # Start daemon (auto-starts on first command)\nagent-react-devtools stop               # Stop daemon\nagent-react-devtools status             # Check connection, component count, last event\nagent-react-devtools wait --connected   # Block until a React app connects\nagent-react-devtools wait --component App # Block until a component appears\n","bash","",[156],{"type":44,"tag":81,"props":157,"children":158},{"__ignoreMap":154},[159,182,200,218,241],{"type":44,"tag":160,"props":161,"children":164},"span",{"class":162,"line":163},"line",1,[165,170,176],{"type":44,"tag":160,"props":166,"children":168},{"style":167},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[169],{"type":50,"value":47},{"type":44,"tag":160,"props":171,"children":173},{"style":172},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[174],{"type":50,"value":175}," start",{"type":44,"tag":160,"props":177,"children":179},{"style":178},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[180],{"type":50,"value":181},"              # Start daemon (auto-starts on first command)\n",{"type":44,"tag":160,"props":183,"children":185},{"class":162,"line":184},2,[186,190,195],{"type":44,"tag":160,"props":187,"children":188},{"style":167},[189],{"type":50,"value":47},{"type":44,"tag":160,"props":191,"children":192},{"style":172},[193],{"type":50,"value":194}," stop",{"type":44,"tag":160,"props":196,"children":197},{"style":178},[198],{"type":50,"value":199},"               # Stop daemon\n",{"type":44,"tag":160,"props":201,"children":203},{"class":162,"line":202},3,[204,208,213],{"type":44,"tag":160,"props":205,"children":206},{"style":167},[207],{"type":50,"value":47},{"type":44,"tag":160,"props":209,"children":210},{"style":172},[211],{"type":50,"value":212}," status",{"type":44,"tag":160,"props":214,"children":215},{"style":178},[216],{"type":50,"value":217},"             # Check connection, component count, last event\n",{"type":44,"tag":160,"props":219,"children":221},{"class":162,"line":220},4,[222,226,231,236],{"type":44,"tag":160,"props":223,"children":224},{"style":167},[225],{"type":50,"value":47},{"type":44,"tag":160,"props":227,"children":228},{"style":172},[229],{"type":50,"value":230}," wait",{"type":44,"tag":160,"props":232,"children":233},{"style":172},[234],{"type":50,"value":235}," --connected",{"type":44,"tag":160,"props":237,"children":238},{"style":178},[239],{"type":50,"value":240},"   # Block until a React app connects\n",{"type":44,"tag":160,"props":242,"children":244},{"class":162,"line":243},5,[245,249,253,258,263],{"type":44,"tag":160,"props":246,"children":247},{"style":167},[248],{"type":50,"value":47},{"type":44,"tag":160,"props":250,"children":251},{"style":172},[252],{"type":50,"value":230},{"type":44,"tag":160,"props":254,"children":255},{"style":172},[256],{"type":50,"value":257}," --component",{"type":44,"tag":160,"props":259,"children":260},{"style":172},[261],{"type":50,"value":262}," App",{"type":44,"tag":160,"props":264,"children":265},{"style":178},[266],{"type":50,"value":267}," # Block until a component appears\n",{"type":44,"tag":142,"props":269,"children":271},{"id":270},"component-inspection",[272],{"type":50,"value":273},"Component Inspection",{"type":44,"tag":149,"props":275,"children":277},{"className":151,"code":276,"language":153,"meta":154,"style":154},"agent-react-devtools get tree           # Full component hierarchy (labels: @c1, @c2, ...)\nagent-react-devtools get tree --depth 3 # Limit depth\nagent-react-devtools get component @c5  # Props, state, hooks for a specific component\nagent-react-devtools find Button        # Search by display name (fuzzy)\nagent-react-devtools find Button --exact # Exact match\nagent-react-devtools count              # Count by type: fn, cls, host, memo, ...\nagent-react-devtools errors             # List components with errors or warnings\n",[278],{"type":44,"tag":81,"props":279,"children":280},{"__ignoreMap":154},[281,303,334,360,382,407,425],{"type":44,"tag":160,"props":282,"children":283},{"class":162,"line":163},[284,288,293,298],{"type":44,"tag":160,"props":285,"children":286},{"style":167},[287],{"type":50,"value":47},{"type":44,"tag":160,"props":289,"children":290},{"style":172},[291],{"type":50,"value":292}," get",{"type":44,"tag":160,"props":294,"children":295},{"style":172},[296],{"type":50,"value":297}," tree",{"type":44,"tag":160,"props":299,"children":300},{"style":178},[301],{"type":50,"value":302},"           # Full component hierarchy (labels: @c1, @c2, ...)\n",{"type":44,"tag":160,"props":304,"children":305},{"class":162,"line":184},[306,310,314,318,323,329],{"type":44,"tag":160,"props":307,"children":308},{"style":167},[309],{"type":50,"value":47},{"type":44,"tag":160,"props":311,"children":312},{"style":172},[313],{"type":50,"value":292},{"type":44,"tag":160,"props":315,"children":316},{"style":172},[317],{"type":50,"value":297},{"type":44,"tag":160,"props":319,"children":320},{"style":172},[321],{"type":50,"value":322}," --depth",{"type":44,"tag":160,"props":324,"children":326},{"style":325},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[327],{"type":50,"value":328}," 3",{"type":44,"tag":160,"props":330,"children":331},{"style":178},[332],{"type":50,"value":333}," # Limit depth\n",{"type":44,"tag":160,"props":335,"children":336},{"class":162,"line":202},[337,341,345,350,355],{"type":44,"tag":160,"props":338,"children":339},{"style":167},[340],{"type":50,"value":47},{"type":44,"tag":160,"props":342,"children":343},{"style":172},[344],{"type":50,"value":292},{"type":44,"tag":160,"props":346,"children":347},{"style":172},[348],{"type":50,"value":349}," component",{"type":44,"tag":160,"props":351,"children":352},{"style":172},[353],{"type":50,"value":354}," @c5",{"type":44,"tag":160,"props":356,"children":357},{"style":178},[358],{"type":50,"value":359},"  # Props, state, hooks for a specific component\n",{"type":44,"tag":160,"props":361,"children":362},{"class":162,"line":220},[363,367,372,377],{"type":44,"tag":160,"props":364,"children":365},{"style":167},[366],{"type":50,"value":47},{"type":44,"tag":160,"props":368,"children":369},{"style":172},[370],{"type":50,"value":371}," find",{"type":44,"tag":160,"props":373,"children":374},{"style":172},[375],{"type":50,"value":376}," Button",{"type":44,"tag":160,"props":378,"children":379},{"style":178},[380],{"type":50,"value":381},"        # Search by display name (fuzzy)\n",{"type":44,"tag":160,"props":383,"children":384},{"class":162,"line":243},[385,389,393,397,402],{"type":44,"tag":160,"props":386,"children":387},{"style":167},[388],{"type":50,"value":47},{"type":44,"tag":160,"props":390,"children":391},{"style":172},[392],{"type":50,"value":371},{"type":44,"tag":160,"props":394,"children":395},{"style":172},[396],{"type":50,"value":376},{"type":44,"tag":160,"props":398,"children":399},{"style":172},[400],{"type":50,"value":401}," --exact",{"type":44,"tag":160,"props":403,"children":404},{"style":178},[405],{"type":50,"value":406}," # Exact match\n",{"type":44,"tag":160,"props":408,"children":410},{"class":162,"line":409},6,[411,415,420],{"type":44,"tag":160,"props":412,"children":413},{"style":167},[414],{"type":50,"value":47},{"type":44,"tag":160,"props":416,"children":417},{"style":172},[418],{"type":50,"value":419}," count",{"type":44,"tag":160,"props":421,"children":422},{"style":178},[423],{"type":50,"value":424},"              # Count by type: fn, cls, host, memo, ...\n",{"type":44,"tag":160,"props":426,"children":428},{"class":162,"line":427},7,[429,433,438],{"type":44,"tag":160,"props":430,"children":431},{"style":167},[432],{"type":50,"value":47},{"type":44,"tag":160,"props":434,"children":435},{"style":172},[436],{"type":50,"value":437}," errors",{"type":44,"tag":160,"props":439,"children":440},{"style":178},[441],{"type":50,"value":442},"             # List components with errors or warnings\n",{"type":44,"tag":142,"props":444,"children":446},{"id":445},"performance-profiling",[447],{"type":50,"value":448},"Performance Profiling",{"type":44,"tag":149,"props":450,"children":452},{"className":151,"code":451,"language":153,"meta":154,"style":154},"agent-react-devtools profile start              # Start recording\nagent-react-devtools profile stop               # Stop and collect data\nagent-react-devtools profile slow               # Slowest components by avg render time\nagent-react-devtools profile slow --limit 10    # Top 10\nagent-react-devtools profile rerenders          # Most re-rendered components\nagent-react-devtools profile report @c5         # Detailed report for one component\nagent-react-devtools profile timeline --limit 10                        # First 10 commits (use --limit; uncapped can dump 300+ lines)\nagent-react-devtools profile timeline --limit 10 --offset 10           # Next 10 (pagination)\nagent-react-devtools profile timeline --sort duration --limit 5        # Top 5 most expensive commits\nagent-react-devtools profile timeline --sort timeline --limit 5        # Explicit chronological order (same as default)\nagent-react-devtools profile commit 3           # Detail for commit #3\nagent-react-devtools profile export profile.json # Export as React DevTools Profiler JSON\nagent-react-devtools profile diff before.json after.json  # Compare two exports\n",[453],{"type":44,"tag":81,"props":454,"children":455},{"__ignoreMap":154},[456,477,497,518,548,569,594,623,661,700,737,763,790],{"type":44,"tag":160,"props":457,"children":458},{"class":162,"line":163},[459,463,468,472],{"type":44,"tag":160,"props":460,"children":461},{"style":167},[462],{"type":50,"value":47},{"type":44,"tag":160,"props":464,"children":465},{"style":172},[466],{"type":50,"value":467}," profile",{"type":44,"tag":160,"props":469,"children":470},{"style":172},[471],{"type":50,"value":175},{"type":44,"tag":160,"props":473,"children":474},{"style":178},[475],{"type":50,"value":476},"              # Start recording\n",{"type":44,"tag":160,"props":478,"children":479},{"class":162,"line":184},[480,484,488,492],{"type":44,"tag":160,"props":481,"children":482},{"style":167},[483],{"type":50,"value":47},{"type":44,"tag":160,"props":485,"children":486},{"style":172},[487],{"type":50,"value":467},{"type":44,"tag":160,"props":489,"children":490},{"style":172},[491],{"type":50,"value":194},{"type":44,"tag":160,"props":493,"children":494},{"style":178},[495],{"type":50,"value":496},"               # Stop and collect data\n",{"type":44,"tag":160,"props":498,"children":499},{"class":162,"line":202},[500,504,508,513],{"type":44,"tag":160,"props":501,"children":502},{"style":167},[503],{"type":50,"value":47},{"type":44,"tag":160,"props":505,"children":506},{"style":172},[507],{"type":50,"value":467},{"type":44,"tag":160,"props":509,"children":510},{"style":172},[511],{"type":50,"value":512}," slow",{"type":44,"tag":160,"props":514,"children":515},{"style":178},[516],{"type":50,"value":517},"               # Slowest components by avg render time\n",{"type":44,"tag":160,"props":519,"children":520},{"class":162,"line":220},[521,525,529,533,538,543],{"type":44,"tag":160,"props":522,"children":523},{"style":167},[524],{"type":50,"value":47},{"type":44,"tag":160,"props":526,"children":527},{"style":172},[528],{"type":50,"value":467},{"type":44,"tag":160,"props":530,"children":531},{"style":172},[532],{"type":50,"value":512},{"type":44,"tag":160,"props":534,"children":535},{"style":172},[536],{"type":50,"value":537}," --limit",{"type":44,"tag":160,"props":539,"children":540},{"style":325},[541],{"type":50,"value":542}," 10",{"type":44,"tag":160,"props":544,"children":545},{"style":178},[546],{"type":50,"value":547},"    # Top 10\n",{"type":44,"tag":160,"props":549,"children":550},{"class":162,"line":243},[551,555,559,564],{"type":44,"tag":160,"props":552,"children":553},{"style":167},[554],{"type":50,"value":47},{"type":44,"tag":160,"props":556,"children":557},{"style":172},[558],{"type":50,"value":467},{"type":44,"tag":160,"props":560,"children":561},{"style":172},[562],{"type":50,"value":563}," rerenders",{"type":44,"tag":160,"props":565,"children":566},{"style":178},[567],{"type":50,"value":568},"          # Most re-rendered components\n",{"type":44,"tag":160,"props":570,"children":571},{"class":162,"line":409},[572,576,580,585,589],{"type":44,"tag":160,"props":573,"children":574},{"style":167},[575],{"type":50,"value":47},{"type":44,"tag":160,"props":577,"children":578},{"style":172},[579],{"type":50,"value":467},{"type":44,"tag":160,"props":581,"children":582},{"style":172},[583],{"type":50,"value":584}," report",{"type":44,"tag":160,"props":586,"children":587},{"style":172},[588],{"type":50,"value":354},{"type":44,"tag":160,"props":590,"children":591},{"style":178},[592],{"type":50,"value":593},"         # Detailed report for one component\n",{"type":44,"tag":160,"props":595,"children":596},{"class":162,"line":427},[597,601,605,610,614,618],{"type":44,"tag":160,"props":598,"children":599},{"style":167},[600],{"type":50,"value":47},{"type":44,"tag":160,"props":602,"children":603},{"style":172},[604],{"type":50,"value":467},{"type":44,"tag":160,"props":606,"children":607},{"style":172},[608],{"type":50,"value":609}," timeline",{"type":44,"tag":160,"props":611,"children":612},{"style":172},[613],{"type":50,"value":537},{"type":44,"tag":160,"props":615,"children":616},{"style":325},[617],{"type":50,"value":542},{"type":44,"tag":160,"props":619,"children":620},{"style":178},[621],{"type":50,"value":622},"                        # First 10 commits (use --limit; uncapped can dump 300+ lines)\n",{"type":44,"tag":160,"props":624,"children":626},{"class":162,"line":625},8,[627,631,635,639,643,647,652,656],{"type":44,"tag":160,"props":628,"children":629},{"style":167},[630],{"type":50,"value":47},{"type":44,"tag":160,"props":632,"children":633},{"style":172},[634],{"type":50,"value":467},{"type":44,"tag":160,"props":636,"children":637},{"style":172},[638],{"type":50,"value":609},{"type":44,"tag":160,"props":640,"children":641},{"style":172},[642],{"type":50,"value":537},{"type":44,"tag":160,"props":644,"children":645},{"style":325},[646],{"type":50,"value":542},{"type":44,"tag":160,"props":648,"children":649},{"style":172},[650],{"type":50,"value":651}," --offset",{"type":44,"tag":160,"props":653,"children":654},{"style":325},[655],{"type":50,"value":542},{"type":44,"tag":160,"props":657,"children":658},{"style":178},[659],{"type":50,"value":660},"           # Next 10 (pagination)\n",{"type":44,"tag":160,"props":662,"children":663},{"class":162,"line":30},[664,668,672,676,681,686,690,695],{"type":44,"tag":160,"props":665,"children":666},{"style":167},[667],{"type":50,"value":47},{"type":44,"tag":160,"props":669,"children":670},{"style":172},[671],{"type":50,"value":467},{"type":44,"tag":160,"props":673,"children":674},{"style":172},[675],{"type":50,"value":609},{"type":44,"tag":160,"props":677,"children":678},{"style":172},[679],{"type":50,"value":680}," --sort",{"type":44,"tag":160,"props":682,"children":683},{"style":172},[684],{"type":50,"value":685}," duration",{"type":44,"tag":160,"props":687,"children":688},{"style":172},[689],{"type":50,"value":537},{"type":44,"tag":160,"props":691,"children":692},{"style":325},[693],{"type":50,"value":694}," 5",{"type":44,"tag":160,"props":696,"children":697},{"style":178},[698],{"type":50,"value":699},"        # Top 5 most expensive commits\n",{"type":44,"tag":160,"props":701,"children":703},{"class":162,"line":702},10,[704,708,712,716,720,724,728,732],{"type":44,"tag":160,"props":705,"children":706},{"style":167},[707],{"type":50,"value":47},{"type":44,"tag":160,"props":709,"children":710},{"style":172},[711],{"type":50,"value":467},{"type":44,"tag":160,"props":713,"children":714},{"style":172},[715],{"type":50,"value":609},{"type":44,"tag":160,"props":717,"children":718},{"style":172},[719],{"type":50,"value":680},{"type":44,"tag":160,"props":721,"children":722},{"style":172},[723],{"type":50,"value":609},{"type":44,"tag":160,"props":725,"children":726},{"style":172},[727],{"type":50,"value":537},{"type":44,"tag":160,"props":729,"children":730},{"style":325},[731],{"type":50,"value":694},{"type":44,"tag":160,"props":733,"children":734},{"style":178},[735],{"type":50,"value":736},"        # Explicit chronological order (same as default)\n",{"type":44,"tag":160,"props":738,"children":740},{"class":162,"line":739},11,[741,745,749,754,758],{"type":44,"tag":160,"props":742,"children":743},{"style":167},[744],{"type":50,"value":47},{"type":44,"tag":160,"props":746,"children":747},{"style":172},[748],{"type":50,"value":467},{"type":44,"tag":160,"props":750,"children":751},{"style":172},[752],{"type":50,"value":753}," commit",{"type":44,"tag":160,"props":755,"children":756},{"style":325},[757],{"type":50,"value":328},{"type":44,"tag":160,"props":759,"children":760},{"style":178},[761],{"type":50,"value":762},"           # Detail for commit #3\n",{"type":44,"tag":160,"props":764,"children":766},{"class":162,"line":765},12,[767,771,775,780,785],{"type":44,"tag":160,"props":768,"children":769},{"style":167},[770],{"type":50,"value":47},{"type":44,"tag":160,"props":772,"children":773},{"style":172},[774],{"type":50,"value":467},{"type":44,"tag":160,"props":776,"children":777},{"style":172},[778],{"type":50,"value":779}," export",{"type":44,"tag":160,"props":781,"children":782},{"style":172},[783],{"type":50,"value":784}," profile.json",{"type":44,"tag":160,"props":786,"children":787},{"style":178},[788],{"type":50,"value":789}," # Export as React DevTools Profiler JSON\n",{"type":44,"tag":160,"props":791,"children":793},{"class":162,"line":792},13,[794,798,802,807,812,817],{"type":44,"tag":160,"props":795,"children":796},{"style":167},[797],{"type":50,"value":47},{"type":44,"tag":160,"props":799,"children":800},{"style":172},[801],{"type":50,"value":467},{"type":44,"tag":160,"props":803,"children":804},{"style":172},[805],{"type":50,"value":806}," diff",{"type":44,"tag":160,"props":808,"children":809},{"style":172},[810],{"type":50,"value":811}," before.json",{"type":44,"tag":160,"props":813,"children":814},{"style":172},[815],{"type":50,"value":816}," after.json",{"type":44,"tag":160,"props":818,"children":819},{"style":178},[820],{"type":50,"value":821},"  # Compare two exports\n",{"type":44,"tag":58,"props":823,"children":825},{"id":824},"understanding-the-output",[826],{"type":50,"value":827},"Understanding the Output",{"type":44,"tag":142,"props":829,"children":831},{"id":830},"component-labels",[832],{"type":50,"value":833},"Component Labels",{"type":44,"tag":52,"props":835,"children":836},{},[837,839,845,847,853],{"type":50,"value":838},"Every component gets a stable label like ",{"type":44,"tag":81,"props":840,"children":842},{"className":841},[],[843],{"type":50,"value":844},"@c1",{"type":50,"value":846},", ",{"type":44,"tag":81,"props":848,"children":850},{"className":849},[],[851],{"type":50,"value":852},"@c2",{"type":50,"value":854},". Use these to reference components in follow-up commands:",{"type":44,"tag":149,"props":856,"children":860},{"className":857,"code":859,"language":50},[858],"language-text","@c1 [fn] App\n├─ @c2 [fn] Header\n├─ @c3 [fn] TodoList\n│  ├─ @c4 [fn] TodoItem key=1\n│  └─ @c5 [fn] TodoItem key=2\n└─ @c6 [host] div\n",[861],{"type":44,"tag":81,"props":862,"children":863},{"__ignoreMap":154},[864],{"type":50,"value":859},{"type":44,"tag":52,"props":866,"children":867},{},[868,870,876,878,884,886,892,894,900,902,908,910,916,918,924],{"type":50,"value":869},"Type abbreviations: ",{"type":44,"tag":81,"props":871,"children":873},{"className":872},[],[874],{"type":50,"value":875},"fn",{"type":50,"value":877}," = function, ",{"type":44,"tag":81,"props":879,"children":881},{"className":880},[],[882],{"type":50,"value":883},"cls",{"type":50,"value":885}," = class, ",{"type":44,"tag":81,"props":887,"children":889},{"className":888},[],[890],{"type":50,"value":891},"host",{"type":50,"value":893}," = DOM element, ",{"type":44,"tag":81,"props":895,"children":897},{"className":896},[],[898],{"type":50,"value":899},"memo",{"type":50,"value":901}," = React.memo, ",{"type":44,"tag":81,"props":903,"children":905},{"className":904},[],[906],{"type":50,"value":907},"fRef",{"type":50,"value":909}," = forwardRef, ",{"type":44,"tag":81,"props":911,"children":913},{"className":912},[],[914],{"type":50,"value":915},"susp",{"type":50,"value":917}," = Suspense, ",{"type":44,"tag":81,"props":919,"children":921},{"className":920},[],[922],{"type":50,"value":923},"ctx",{"type":50,"value":925}," = context.",{"type":44,"tag":52,"props":927,"children":928},{},[929,931,937,939,945,947,953],{"type":50,"value":930},"Components with errors or warnings show annotations: ",{"type":44,"tag":81,"props":932,"children":934},{"className":933},[],[935],{"type":50,"value":936},"⚠2",{"type":50,"value":938}," = 2 warnings, ",{"type":44,"tag":81,"props":940,"children":942},{"className":941},[],[943],{"type":50,"value":944},"✗1",{"type":50,"value":946}," = 1 error. Use ",{"type":44,"tag":81,"props":948,"children":950},{"className":949},[],[951],{"type":50,"value":952},"agent-react-devtools errors",{"type":50,"value":954}," to list only affected components.",{"type":44,"tag":142,"props":956,"children":958},{"id":957},"inspected-component",[959],{"type":50,"value":960},"Inspected Component",{"type":44,"tag":149,"props":962,"children":965},{"className":963,"code":964,"language":50},[858],"@c3 [fn] TodoList\nprops:\n  items: [{\"id\":1,\"text\":\"Buy milk\"},{\"id\":2,\"text\":\"Walk dog\"}]\n  onDelete: ƒ\nstate:\n  filter: \"all\"\nhooks:\n  useState: \"all\"\n  useMemo: [...]\n  useCallback: ƒ\n",[966],{"type":44,"tag":81,"props":967,"children":968},{"__ignoreMap":154},[969],{"type":50,"value":964},{"type":44,"tag":52,"props":971,"children":972},{},[973,979],{"type":44,"tag":81,"props":974,"children":976},{"className":975},[],[977],{"type":50,"value":978},"ƒ",{"type":50,"value":980}," = function value. Values over 60 chars are truncated.",{"type":44,"tag":142,"props":982,"children":984},{"id":983},"profiling-output",[985],{"type":50,"value":986},"Profiling Output",{"type":44,"tag":149,"props":988,"children":991},{"className":989,"code":990,"language":50},[858],"Slowest (by avg render time):\n  @c3 [fn] ExpensiveList  avg:12.3ms  max:18.1ms  renders:47  causes:props-changed  changed: props: items, filter\n  @c4 [fn] TodoItem  avg:2.1ms  max:5.0ms  renders:94  causes:parent-rendered, props-changed  changed: props: onToggle\n",[992],{"type":44,"tag":81,"props":993,"children":994},{"__ignoreMap":154},[995],{"type":50,"value":990},{"type":44,"tag":52,"props":997,"children":998},{},[999,1001,1007,1008,1014,1015,1021,1022,1028,1029,1035,1036,1042],{"type":50,"value":1000},"Render causes: ",{"type":44,"tag":81,"props":1002,"children":1004},{"className":1003},[],[1005],{"type":50,"value":1006},"props-changed",{"type":50,"value":846},{"type":44,"tag":81,"props":1009,"children":1011},{"className":1010},[],[1012],{"type":50,"value":1013},"state-changed",{"type":50,"value":846},{"type":44,"tag":81,"props":1016,"children":1018},{"className":1017},[],[1019],{"type":50,"value":1020},"hooks-changed",{"type":50,"value":846},{"type":44,"tag":81,"props":1023,"children":1025},{"className":1024},[],[1026],{"type":50,"value":1027},"parent-rendered",{"type":50,"value":846},{"type":44,"tag":81,"props":1030,"children":1032},{"className":1031},[],[1033],{"type":50,"value":1034},"force-update",{"type":50,"value":846},{"type":44,"tag":81,"props":1037,"children":1039},{"className":1038},[],[1040],{"type":50,"value":1041},"first-mount",{"type":50,"value":1043},".",{"type":44,"tag":52,"props":1045,"children":1046},{},[1047,1049,1055,1057,1063],{"type":50,"value":1048},"When specific changed keys are available, a ",{"type":44,"tag":81,"props":1050,"children":1052},{"className":1051},[],[1053],{"type":50,"value":1054},"changed:",{"type":50,"value":1056}," suffix shows exactly which props, state keys, or hooks triggered the render (e.g. ",{"type":44,"tag":81,"props":1058,"children":1060},{"className":1059},[],[1061],{"type":50,"value":1062},"changed: props: onClick, className  state: count  hooks: #0",{"type":50,"value":1064},").",{"type":44,"tag":58,"props":1066,"children":1068},{"id":1067},"common-patterns",[1069],{"type":50,"value":1070},"Common Patterns",{"type":44,"tag":142,"props":1072,"children":1074},{"id":1073},"wait-for-the-app-to-connect-after-a-reload",[1075],{"type":50,"value":1076},"Wait for the app to connect after a reload",{"type":44,"tag":149,"props":1078,"children":1080},{"className":151,"code":1079,"language":153,"meta":154,"style":154},"agent-react-devtools wait --connected --timeout 10\nagent-react-devtools get tree\n",[1081],{"type":44,"tag":81,"props":1082,"children":1083},{"__ignoreMap":154},[1084,1109],{"type":44,"tag":160,"props":1085,"children":1086},{"class":162,"line":163},[1087,1091,1095,1099,1104],{"type":44,"tag":160,"props":1088,"children":1089},{"style":167},[1090],{"type":50,"value":47},{"type":44,"tag":160,"props":1092,"children":1093},{"style":172},[1094],{"type":50,"value":230},{"type":44,"tag":160,"props":1096,"children":1097},{"style":172},[1098],{"type":50,"value":235},{"type":44,"tag":160,"props":1100,"children":1101},{"style":172},[1102],{"type":50,"value":1103}," --timeout",{"type":44,"tag":160,"props":1105,"children":1106},{"style":325},[1107],{"type":50,"value":1108}," 10\n",{"type":44,"tag":160,"props":1110,"children":1111},{"class":162,"line":184},[1112,1116,1120],{"type":44,"tag":160,"props":1113,"children":1114},{"style":167},[1115],{"type":50,"value":47},{"type":44,"tag":160,"props":1117,"children":1118},{"style":172},[1119],{"type":50,"value":292},{"type":44,"tag":160,"props":1121,"children":1122},{"style":172},[1123],{"type":50,"value":1124}," tree\n",{"type":44,"tag":52,"props":1126,"children":1127},{},[1128],{"type":50,"value":1129},"Use this after triggering a page reload or HMR update to avoid querying empty state.",{"type":44,"tag":142,"props":1131,"children":1133},{"id":1132},"diagnose-slow-interactions",[1134],{"type":50,"value":1135},"Diagnose slow interactions",{"type":44,"tag":149,"props":1137,"children":1139},{"className":151,"code":1138,"language":153,"meta":154,"style":154},"agent-react-devtools profile start\n# User interacts with the app (or use agent-browser to drive the UI)\nagent-react-devtools profile stop\nagent-react-devtools profile slow --limit 5\nagent-react-devtools profile rerenders --limit 5\n",[1140],{"type":44,"tag":81,"props":1141,"children":1142},{"__ignoreMap":154},[1143,1159,1167,1183,1207],{"type":44,"tag":160,"props":1144,"children":1145},{"class":162,"line":163},[1146,1150,1154],{"type":44,"tag":160,"props":1147,"children":1148},{"style":167},[1149],{"type":50,"value":47},{"type":44,"tag":160,"props":1151,"children":1152},{"style":172},[1153],{"type":50,"value":467},{"type":44,"tag":160,"props":1155,"children":1156},{"style":172},[1157],{"type":50,"value":1158}," start\n",{"type":44,"tag":160,"props":1160,"children":1161},{"class":162,"line":184},[1162],{"type":44,"tag":160,"props":1163,"children":1164},{"style":178},[1165],{"type":50,"value":1166},"# User interacts with the app (or use agent-browser to drive the UI)\n",{"type":44,"tag":160,"props":1168,"children":1169},{"class":162,"line":202},[1170,1174,1178],{"type":44,"tag":160,"props":1171,"children":1172},{"style":167},[1173],{"type":50,"value":47},{"type":44,"tag":160,"props":1175,"children":1176},{"style":172},[1177],{"type":50,"value":467},{"type":44,"tag":160,"props":1179,"children":1180},{"style":172},[1181],{"type":50,"value":1182}," stop\n",{"type":44,"tag":160,"props":1184,"children":1185},{"class":162,"line":220},[1186,1190,1194,1198,1202],{"type":44,"tag":160,"props":1187,"children":1188},{"style":167},[1189],{"type":50,"value":47},{"type":44,"tag":160,"props":1191,"children":1192},{"style":172},[1193],{"type":50,"value":467},{"type":44,"tag":160,"props":1195,"children":1196},{"style":172},[1197],{"type":50,"value":512},{"type":44,"tag":160,"props":1199,"children":1200},{"style":172},[1201],{"type":50,"value":537},{"type":44,"tag":160,"props":1203,"children":1204},{"style":325},[1205],{"type":50,"value":1206}," 5\n",{"type":44,"tag":160,"props":1208,"children":1209},{"class":162,"line":243},[1210,1214,1218,1222,1226],{"type":44,"tag":160,"props":1211,"children":1212},{"style":167},[1213],{"type":50,"value":47},{"type":44,"tag":160,"props":1215,"children":1216},{"style":172},[1217],{"type":50,"value":467},{"type":44,"tag":160,"props":1219,"children":1220},{"style":172},[1221],{"type":50,"value":563},{"type":44,"tag":160,"props":1223,"children":1224},{"style":172},[1225],{"type":50,"value":537},{"type":44,"tag":160,"props":1227,"children":1228},{"style":325},[1229],{"type":50,"value":1206},{"type":44,"tag":52,"props":1231,"children":1232},{},[1233,1235,1241,1243,1249],{"type":50,"value":1234},"Then inspect the worst offenders with ",{"type":44,"tag":81,"props":1236,"children":1238},{"className":1237},[],[1239],{"type":50,"value":1240},"get component @cN",{"type":50,"value":1242}," and ",{"type":44,"tag":81,"props":1244,"children":1246},{"className":1245},[],[1247],{"type":50,"value":1248},"profile report @cN",{"type":50,"value":1043},{"type":44,"tag":142,"props":1251,"children":1253},{"id":1252},"browse-a-long-timeline-in-chunks",[1254],{"type":50,"value":1255},"Browse a long timeline in chunks",{"type":44,"tag":149,"props":1257,"children":1259},{"className":151,"code":1258,"language":153,"meta":154,"style":154},"agent-react-devtools profile timeline --limit 20               # commits 0–19\nagent-react-devtools profile timeline --limit 20 --offset 20   # commits 20–39\nagent-react-devtools profile timeline --offset 30 --limit 10   # skip warm-up, show 30–39\n",[1260],{"type":44,"tag":81,"props":1261,"children":1262},{"__ignoreMap":154},[1263,1292,1328],{"type":44,"tag":160,"props":1264,"children":1265},{"class":162,"line":163},[1266,1270,1274,1278,1282,1287],{"type":44,"tag":160,"props":1267,"children":1268},{"style":167},[1269],{"type":50,"value":47},{"type":44,"tag":160,"props":1271,"children":1272},{"style":172},[1273],{"type":50,"value":467},{"type":44,"tag":160,"props":1275,"children":1276},{"style":172},[1277],{"type":50,"value":609},{"type":44,"tag":160,"props":1279,"children":1280},{"style":172},[1281],{"type":50,"value":537},{"type":44,"tag":160,"props":1283,"children":1284},{"style":325},[1285],{"type":50,"value":1286}," 20",{"type":44,"tag":160,"props":1288,"children":1289},{"style":178},[1290],{"type":50,"value":1291},"               # commits 0–19\n",{"type":44,"tag":160,"props":1293,"children":1294},{"class":162,"line":184},[1295,1299,1303,1307,1311,1315,1319,1323],{"type":44,"tag":160,"props":1296,"children":1297},{"style":167},[1298],{"type":50,"value":47},{"type":44,"tag":160,"props":1300,"children":1301},{"style":172},[1302],{"type":50,"value":467},{"type":44,"tag":160,"props":1304,"children":1305},{"style":172},[1306],{"type":50,"value":609},{"type":44,"tag":160,"props":1308,"children":1309},{"style":172},[1310],{"type":50,"value":537},{"type":44,"tag":160,"props":1312,"children":1313},{"style":325},[1314],{"type":50,"value":1286},{"type":44,"tag":160,"props":1316,"children":1317},{"style":172},[1318],{"type":50,"value":651},{"type":44,"tag":160,"props":1320,"children":1321},{"style":325},[1322],{"type":50,"value":1286},{"type":44,"tag":160,"props":1324,"children":1325},{"style":178},[1326],{"type":50,"value":1327},"   # commits 20–39\n",{"type":44,"tag":160,"props":1329,"children":1330},{"class":162,"line":202},[1331,1335,1339,1343,1347,1352,1356,1360],{"type":44,"tag":160,"props":1332,"children":1333},{"style":167},[1334],{"type":50,"value":47},{"type":44,"tag":160,"props":1336,"children":1337},{"style":172},[1338],{"type":50,"value":467},{"type":44,"tag":160,"props":1340,"children":1341},{"style":172},[1342],{"type":50,"value":609},{"type":44,"tag":160,"props":1344,"children":1345},{"style":172},[1346],{"type":50,"value":651},{"type":44,"tag":160,"props":1348,"children":1349},{"style":325},[1350],{"type":50,"value":1351}," 30",{"type":44,"tag":160,"props":1353,"children":1354},{"style":172},[1355],{"type":50,"value":537},{"type":44,"tag":160,"props":1357,"children":1358},{"style":325},[1359],{"type":50,"value":542},{"type":44,"tag":160,"props":1361,"children":1362},{"style":178},[1363],{"type":50,"value":1364},"   # skip warm-up, show 30–39\n",{"type":44,"tag":52,"props":1366,"children":1367},{},[1368,1370,1376],{"type":50,"value":1369},"Use ",{"type":44,"tag":81,"props":1371,"children":1373},{"className":1372},[],[1374],{"type":50,"value":1375},"profile commit \u003CN>",{"type":50,"value":1377}," to drill into a specific commit once you spot a spike.",{"type":44,"tag":142,"props":1379,"children":1381},{"id":1380},"find-a-component-and-check-its-state",[1382],{"type":50,"value":1383},"Find a component and check its state",{"type":44,"tag":149,"props":1385,"children":1387},{"className":151,"code":1386,"language":153,"meta":154,"style":154},"agent-react-devtools find SearchBar\nagent-react-devtools get component @c12\n",[1388],{"type":44,"tag":81,"props":1389,"children":1390},{"__ignoreMap":154},[1391,1407],{"type":44,"tag":160,"props":1392,"children":1393},{"class":162,"line":163},[1394,1398,1402],{"type":44,"tag":160,"props":1395,"children":1396},{"style":167},[1397],{"type":50,"value":47},{"type":44,"tag":160,"props":1399,"children":1400},{"style":172},[1401],{"type":50,"value":371},{"type":44,"tag":160,"props":1403,"children":1404},{"style":172},[1405],{"type":50,"value":1406}," SearchBar\n",{"type":44,"tag":160,"props":1408,"children":1409},{"class":162,"line":184},[1410,1414,1418,1422],{"type":44,"tag":160,"props":1411,"children":1412},{"style":167},[1413],{"type":50,"value":47},{"type":44,"tag":160,"props":1415,"children":1416},{"style":172},[1417],{"type":50,"value":292},{"type":44,"tag":160,"props":1419,"children":1420},{"style":172},[1421],{"type":50,"value":349},{"type":44,"tag":160,"props":1423,"children":1424},{"style":172},[1425],{"type":50,"value":1426}," @c12\n",{"type":44,"tag":142,"props":1428,"children":1430},{"id":1429},"verify-a-fix-worked",[1431],{"type":50,"value":1432},"Verify a fix worked",{"type":44,"tag":149,"props":1434,"children":1436},{"className":151,"code":1435,"language":153,"meta":154,"style":154},"agent-react-devtools profile start\n# Repeat the interaction\nagent-react-devtools profile stop\nagent-react-devtools profile slow --limit 5\n# Compare render counts and durations to the previous run\n",[1437],{"type":44,"tag":81,"props":1438,"children":1439},{"__ignoreMap":154},[1440,1455,1463,1478,1501],{"type":44,"tag":160,"props":1441,"children":1442},{"class":162,"line":163},[1443,1447,1451],{"type":44,"tag":160,"props":1444,"children":1445},{"style":167},[1446],{"type":50,"value":47},{"type":44,"tag":160,"props":1448,"children":1449},{"style":172},[1450],{"type":50,"value":467},{"type":44,"tag":160,"props":1452,"children":1453},{"style":172},[1454],{"type":50,"value":1158},{"type":44,"tag":160,"props":1456,"children":1457},{"class":162,"line":184},[1458],{"type":44,"tag":160,"props":1459,"children":1460},{"style":178},[1461],{"type":50,"value":1462},"# Repeat the interaction\n",{"type":44,"tag":160,"props":1464,"children":1465},{"class":162,"line":202},[1466,1470,1474],{"type":44,"tag":160,"props":1467,"children":1468},{"style":167},[1469],{"type":50,"value":47},{"type":44,"tag":160,"props":1471,"children":1472},{"style":172},[1473],{"type":50,"value":467},{"type":44,"tag":160,"props":1475,"children":1476},{"style":172},[1477],{"type":50,"value":1182},{"type":44,"tag":160,"props":1479,"children":1480},{"class":162,"line":220},[1481,1485,1489,1493,1497],{"type":44,"tag":160,"props":1482,"children":1483},{"style":167},[1484],{"type":50,"value":47},{"type":44,"tag":160,"props":1486,"children":1487},{"style":172},[1488],{"type":50,"value":467},{"type":44,"tag":160,"props":1490,"children":1491},{"style":172},[1492],{"type":50,"value":512},{"type":44,"tag":160,"props":1494,"children":1495},{"style":172},[1496],{"type":50,"value":537},{"type":44,"tag":160,"props":1498,"children":1499},{"style":325},[1500],{"type":50,"value":1206},{"type":44,"tag":160,"props":1502,"children":1503},{"class":162,"line":243},[1504],{"type":44,"tag":160,"props":1505,"children":1506},{"style":178},[1507],{"type":50,"value":1508},"# Compare render counts and durations to the previous run\n",{"type":44,"tag":58,"props":1510,"children":1512},{"id":1511},"using-with-agent-browser",[1513],{"type":50,"value":1514},"Using with agent-browser",{"type":44,"tag":52,"props":1516,"children":1517},{},[1518,1520,1526,1528,1533,1535,1541],{"type":50,"value":1519},"When using ",{"type":44,"tag":81,"props":1521,"children":1523},{"className":1522},[],[1524],{"type":50,"value":1525},"agent-browser",{"type":50,"value":1527}," to drive the app while profiling or debugging, you ",{"type":44,"tag":73,"props":1529,"children":1530},{},[1531],{"type":50,"value":1532},"must use headed mode",{"type":50,"value":1534}," (",{"type":44,"tag":81,"props":1536,"children":1538},{"className":1537},[],[1539],{"type":50,"value":1540},"--headed",{"type":50,"value":1542},"). Headless Chromium does not execute ES module scripts the same way as a real browser, which prevents the devtools connect script from running properly.",{"type":44,"tag":149,"props":1544,"children":1546},{"className":151,"code":1545,"language":153,"meta":154,"style":154},"agent-browser --session devtools --headed open http:\u002F\u002Flocalhost:5173\u002F\nagent-react-devtools status  # Should show 1 connected app\n",[1547],{"type":44,"tag":81,"props":1548,"children":1549},{"__ignoreMap":154},[1550,1582],{"type":44,"tag":160,"props":1551,"children":1552},{"class":162,"line":163},[1553,1557,1562,1567,1572,1577],{"type":44,"tag":160,"props":1554,"children":1555},{"style":167},[1556],{"type":50,"value":1525},{"type":44,"tag":160,"props":1558,"children":1559},{"style":172},[1560],{"type":50,"value":1561}," --session",{"type":44,"tag":160,"props":1563,"children":1564},{"style":172},[1565],{"type":50,"value":1566}," devtools",{"type":44,"tag":160,"props":1568,"children":1569},{"style":172},[1570],{"type":50,"value":1571}," --headed",{"type":44,"tag":160,"props":1573,"children":1574},{"style":172},[1575],{"type":50,"value":1576}," open",{"type":44,"tag":160,"props":1578,"children":1579},{"style":172},[1580],{"type":50,"value":1581}," http:\u002F\u002Flocalhost:5173\u002F\n",{"type":44,"tag":160,"props":1583,"children":1584},{"class":162,"line":184},[1585,1589,1593],{"type":44,"tag":160,"props":1586,"children":1587},{"style":167},[1588],{"type":50,"value":47},{"type":44,"tag":160,"props":1590,"children":1591},{"style":172},[1592],{"type":50,"value":212},{"type":44,"tag":160,"props":1594,"children":1595},{"style":178},[1596],{"type":50,"value":1597},"  # Should show 1 connected app\n",{"type":44,"tag":58,"props":1599,"children":1601},{"id":1600},"important-rules",[1602],{"type":50,"value":1603},"Important Rules",{"type":44,"tag":1605,"props":1606,"children":1607},"ul",{},[1608,1641,1665,1689,1714],{"type":44,"tag":69,"props":1609,"children":1610},{},[1611,1616,1618,1624,1626,1632,1634,1640],{"type":44,"tag":73,"props":1612,"children":1613},{},[1614],{"type":50,"value":1615},"Labels reset",{"type":50,"value":1617}," when the app reloads or components unmount\u002Fremount. After a reload, use ",{"type":44,"tag":81,"props":1619,"children":1621},{"className":1620},[],[1622],{"type":50,"value":1623},"wait --connected",{"type":50,"value":1625}," then re-check with ",{"type":44,"tag":81,"props":1627,"children":1629},{"className":1628},[],[1630],{"type":50,"value":1631},"get tree",{"type":50,"value":1633}," or ",{"type":44,"tag":81,"props":1635,"children":1637},{"className":1636},[],[1638],{"type":50,"value":1639},"find",{"type":50,"value":1043},{"type":44,"tag":69,"props":1642,"children":1643},{},[1644,1655,1657,1663],{"type":44,"tag":73,"props":1645,"children":1646},{},[1647,1653],{"type":44,"tag":81,"props":1648,"children":1650},{"className":1649},[],[1651],{"type":50,"value":1652},"status",{"type":50,"value":1654}," first",{"type":50,"value":1656}," — if status shows 0 connected apps, the React app is not connected. The user may need to run ",{"type":44,"tag":81,"props":1658,"children":1660},{"className":1659},[],[1661],{"type":50,"value":1662},"npx agent-react-devtools init",{"type":50,"value":1664}," in their project first.",{"type":44,"tag":69,"props":1666,"children":1667},{},[1668,1673,1675,1680,1682,1687],{"type":44,"tag":73,"props":1669,"children":1670},{},[1671],{"type":50,"value":1672},"Headed browser required",{"type":50,"value":1674}," — if using ",{"type":44,"tag":81,"props":1676,"children":1678},{"className":1677},[],[1679],{"type":50,"value":1525},{"type":50,"value":1681},", always use ",{"type":44,"tag":81,"props":1683,"children":1685},{"className":1684},[],[1686],{"type":50,"value":1540},{"type":50,"value":1688}," mode. Headless Chromium does not properly load the devtools connect script.",{"type":44,"tag":69,"props":1690,"children":1691},{},[1692,1697,1699,1705,1706,1712],{"type":44,"tag":73,"props":1693,"children":1694},{},[1695],{"type":50,"value":1696},"Profile while interacting",{"type":50,"value":1698}," — profiling only captures renders that happen between ",{"type":44,"tag":81,"props":1700,"children":1702},{"className":1701},[],[1703],{"type":50,"value":1704},"profile start",{"type":50,"value":1242},{"type":44,"tag":81,"props":1707,"children":1709},{"className":1708},[],[1710],{"type":50,"value":1711},"profile stop",{"type":50,"value":1713},". Make sure the relevant interaction happens during that window.",{"type":44,"tag":69,"props":1715,"children":1716},{},[1717,1727,1729,1735,1736,1742],{"type":44,"tag":73,"props":1718,"children":1719},{},[1720,1721],{"type":50,"value":1369},{"type":44,"tag":81,"props":1722,"children":1724},{"className":1723},[],[1725],{"type":50,"value":1726},"--depth",{"type":50,"value":1728}," on large trees — a deep tree can produce a lot of output. Start with ",{"type":44,"tag":81,"props":1730,"children":1732},{"className":1731},[],[1733],{"type":50,"value":1734},"--depth 3",{"type":50,"value":1633},{"type":44,"tag":81,"props":1737,"children":1739},{"className":1738},[],[1740],{"type":50,"value":1741},"--depth 4",{"type":50,"value":1743}," and go deeper only on the subtree you care about.",{"type":44,"tag":58,"props":1745,"children":1747},{"id":1746},"references",[1748],{"type":50,"value":1749},"References",{"type":44,"tag":1751,"props":1752,"children":1753},"table",{},[1754,1773],{"type":44,"tag":1755,"props":1756,"children":1757},"thead",{},[1758],{"type":44,"tag":1759,"props":1760,"children":1761},"tr",{},[1762,1768],{"type":44,"tag":1763,"props":1764,"children":1765},"th",{},[1766],{"type":50,"value":1767},"File",{"type":44,"tag":1763,"props":1769,"children":1770},{},[1771],{"type":50,"value":1772},"When to read",{"type":44,"tag":1774,"props":1775,"children":1776},"tbody",{},[1777,1796,1813],{"type":44,"tag":1759,"props":1778,"children":1779},{},[1780,1791],{"type":44,"tag":1781,"props":1782,"children":1783},"td",{},[1784],{"type":44,"tag":1785,"props":1786,"children":1788},"a",{"href":1787},"references\u002Fcommands.md",[1789],{"type":50,"value":1790},"commands.md",{"type":44,"tag":1781,"props":1792,"children":1793},{},[1794],{"type":50,"value":1795},"Full command reference with all flags and edge cases",{"type":44,"tag":1759,"props":1797,"children":1798},{},[1799,1808],{"type":44,"tag":1781,"props":1800,"children":1801},{},[1802],{"type":44,"tag":1785,"props":1803,"children":1805},{"href":1804},"references\u002Fprofiling-guide.md",[1806],{"type":50,"value":1807},"profiling-guide.md",{"type":44,"tag":1781,"props":1809,"children":1810},{},[1811],{"type":50,"value":1812},"Step-by-step profiling workflows and interpreting results",{"type":44,"tag":1759,"props":1814,"children":1815},{},[1816,1825],{"type":44,"tag":1781,"props":1817,"children":1818},{},[1819],{"type":44,"tag":1785,"props":1820,"children":1822},{"href":1821},"references\u002Fsetup.md",[1823],{"type":50,"value":1824},"setup.md",{"type":44,"tag":1781,"props":1826,"children":1827},{},[1828],{"type":50,"value":1829},"How to connect different frameworks (Vite, Next.js, Expo, CRA)",{"type":44,"tag":1831,"props":1832,"children":1833},"style",{},[1834],{"type":50,"value":1835},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1837,"total":2018},[1838,1860,1872,1890,1904,1914,1929,1948,1961,1973,1990,2004],{"slug":1839,"name":1839,"fn":1840,"description":1841,"org":1842,"tags":1843,"stars":1857,"repoUrl":1858,"updatedAt":1859},"assess-react-native-migration","assess mobile product React Native migration","Assesses whether and how an existing mobile product should migrate to React Native. Use when auditing one or more product repositories for migration readiness, including products whose iOS, Android, and other clients live in separate directories or repositories; choosing brownfield, greenfield, or a checkpoint-based path; defining a representative trial; or preparing a baseline and ROI decision before implementation. When product scope or material evidence is unavailable, grills the stakeholder with exactly one question per turn instead of sending a questionnaire.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1844,1847,1850,1853,1856],{"name":1845,"slug":1846,"type":16},"Android","android",{"name":1848,"slug":1849,"type":16},"iOS","ios",{"name":1851,"slug":1852,"type":16},"Migration","migration",{"name":1854,"slug":1855,"type":16},"Mobile","mobile",{"name":18,"slug":19,"type":16},1527,"https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills","2026-07-11T05:40:57.94641",{"slug":1861,"name":1861,"fn":1862,"description":1863,"org":1864,"tags":1865,"stars":1857,"repoUrl":1858,"updatedAt":1871},"create-react-native-library","scaffold React Native libraries","Scaffolds React Native libraries with create-react-native-library for standalone libraries or local native modules and views. Use when creating or working on React Native libraries or adding native functionality in an existing app.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1866,1869,1870],{"name":1867,"slug":1868,"type":16},"Engineering","engineering",{"name":1854,"slug":1855,"type":16},{"name":18,"slug":19,"type":16},"2026-06-26T07:57:53.098041",{"slug":1873,"name":1873,"fn":1874,"description":1875,"org":1876,"tags":1877,"stars":1857,"repoUrl":1858,"updatedAt":1889},"github","manage GitHub PRs with gh CLI","GitHub patterns using gh CLI for pull requests, stacked PRs, code review, branching strategies, and repository automation. Use when working with GitHub PRs, merging strategies, or repository management tasks.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1878,1881,1884,1886],{"name":1879,"slug":1880,"type":16},"CLI","cli",{"name":1882,"slug":1883,"type":16},"Code Review","code-review",{"name":1885,"slug":1873,"type":16},"GitHub",{"name":1887,"slug":1888,"type":16},"Pull Requests","pull-requests","2026-04-06T18:06:37.430056",{"slug":1891,"name":1891,"fn":1892,"description":1893,"org":1894,"tags":1895,"stars":1857,"repoUrl":1858,"updatedAt":1903},"github-actions","build React Native apps in GitHub Actions","GitHub Actions workflow patterns for React Native iOS simulator and Android emulator cloud builds with downloadable artifacts. Use when setting up CI build pipelines or downloading GitHub Actions artifacts via gh CLI and GitHub API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1896,1899,1901,1902],{"name":1897,"slug":1898,"type":16},"CI\u002FCD","cicd",{"name":1900,"slug":1891,"type":16},"GitHub Actions",{"name":1854,"slug":1855,"type":16},{"name":18,"slug":19,"type":16},"2026-04-06T18:06:38.661459",{"slug":1905,"name":1905,"fn":1906,"description":1907,"org":1908,"tags":1909,"stars":1857,"repoUrl":1858,"updatedAt":1913},"react-native-best-practices","optimize React Native app performance","Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1910,1911,1912],{"name":1854,"slug":1855,"type":16},{"name":14,"slug":15,"type":16},{"name":18,"slug":19,"type":16},"2026-04-06T18:06:41.158478",{"slug":1915,"name":1915,"fn":1916,"description":1917,"org":1918,"tags":1919,"stars":1857,"repoUrl":1858,"updatedAt":1928},"react-native-brownfield-migration","migrate native apps to React Native","Implements an accepted incremental brownfield migration from native iOS or Android to React Native or Expo using @callstack\u002Freact-native-brownfield. Use after the brownfield path has been selected, when setting up the integration, packaging XCFramework or AAR artifacts, or adding React Native surfaces to native hosts.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1920,1921,1924,1925,1926,1927],{"name":1845,"slug":1846,"type":16},{"name":1922,"slug":1923,"type":16},"Expo","expo",{"name":1848,"slug":1849,"type":16},{"name":1851,"slug":1852,"type":16},{"name":1854,"slug":1855,"type":16},{"name":18,"slug":19,"type":16},"2026-04-06T18:06:42.392689",{"slug":1930,"name":1930,"fn":1931,"description":1932,"org":1933,"tags":1934,"stars":1857,"repoUrl":1858,"updatedAt":1947},"react-native-tv-best-practices","review React Native TV application quality","Reviews React Native TV apps for focus\u002FD-pad navigation, 10-foot UI layout, TV playback\u002FDRM integration, low-memory TV performance, and TV accessibility. Use when building, debugging, or reviewing react-native-tvos, Expo TV, Amazon Vega\u002FKepler, or React Native web TV targets where the issue depends on remote input, TV focus, TV packaging, TV hardware, or TV playback constraints.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1935,1938,1941,1942,1943,1944],{"name":1936,"slug":1937,"type":16},"Accessibility","accessibility",{"name":1939,"slug":1940,"type":16},"Frontend","frontend",{"name":1854,"slug":1855,"type":16},{"name":14,"slug":15,"type":16},{"name":18,"slug":19,"type":16},{"name":1945,"slug":1946,"type":16},"UI Components","ui-components","2026-06-28T08:04:16.29881",{"slug":1949,"name":1949,"fn":1950,"description":1951,"org":1952,"tags":1953,"stars":1857,"repoUrl":1858,"updatedAt":1960},"react-navigation","configure React Navigation UI patterns","Provides React Navigation UI patterns for stacks, tabs, drawers etc. Use when building navigation UIs with React Navigation, configuring headers, bottom sheets or handling safe areas and insets.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1954,1955,1956,1959],{"name":1939,"slug":1940,"type":16},{"name":1854,"slug":1855,"type":16},{"name":1957,"slug":1958,"type":16},"Navigation","navigation",{"name":21,"slug":22,"type":16},"2026-06-26T07:57:54.478042",{"slug":1962,"name":1962,"fn":1963,"description":1964,"org":1965,"tags":1966,"stars":1857,"repoUrl":1858,"updatedAt":1972},"upgrading-react-native","upgrade React Native apps","Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving CocoaPods and Gradle changes, and handling breaking API updates. Use when upgrading React Native, bumping RN version, updating from RN 0.x to 0.y, or migrating Expo SDK alongside a React Native upgrade.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1967,1968,1969,1970,1971],{"name":1845,"slug":1846,"type":16},{"name":1848,"slug":1849,"type":16},{"name":1851,"slug":1852,"type":16},{"name":1854,"slug":1855,"type":16},{"name":18,"slug":19,"type":16},"2026-04-06T18:06:39.914409",{"slug":1974,"name":1974,"fn":1975,"description":1976,"org":1977,"tags":1978,"stars":1987,"repoUrl":1988,"updatedAt":1989},"react-native-ai-skills","integrate on-device AI in React Native","Provides integration recipes for the React Native AI @react-native-ai packages that wrap the Llama.rn (Llama.cpp), MLC-LLM, Apple Foundation backends. Use when integrating local on-device AI in React Native, setting up providers, model management.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1979,1982,1985,1986],{"name":1980,"slug":1981,"type":16},"AI Infrastructure","ai-infrastructure",{"name":1983,"slug":1984,"type":16},"LLM","llm",{"name":1854,"slug":1855,"type":16},{"name":18,"slug":19,"type":16},1371,"https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fai","2026-04-06T18:06:48.66379",{"slug":1991,"name":1991,"fn":1992,"description":1993,"org":1994,"tags":1995,"stars":2001,"repoUrl":2002,"updatedAt":2003},"voltra","build Voltra iOS widgets and charts","Build, review, refactor, configure, or debug Voltra code using Voltra JSX, Voltra JS APIs, the Expo config plugin, and the Voltra CLI. Use when the user asks about charts, Live Activities, Dynamic Island UI, iOS widgets, scheduled widgets, Android widgets, ongoing notifications, image handling, app.json plugin config, React Native CLI setup, or Voltra push update flows.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1996,1997,1998,1999],{"name":1922,"slug":1923,"type":16},{"name":1848,"slug":1849,"type":16},{"name":1854,"slug":1855,"type":16},{"name":2000,"slug":1991,"type":16},"Voltra",787,"https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fvoltra","2026-04-06T18:06:47.399012",{"slug":2005,"name":2005,"fn":2006,"description":2007,"org":2008,"tags":2009,"stars":2015,"repoUrl":2016,"updatedAt":2017},"rozenite-agent","use Rozenite plugins for React Native devtools","Use Rozenite for Agents through CLI-driven `rozenite agent` commands to inspect React Native DevTools data and Rozenite plugins on a live app target. Trigger this skill for shell-based debugging and live session work. For Node.js or TypeScript scripts, wrappers, automations, or other programmatic SDK usage, use `rozenite-agent-sdk` instead.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2010,2011,2014],{"name":1854,"slug":1855,"type":16},{"name":2012,"slug":2013,"type":16},"Plugin Development","plugin-development",{"name":18,"slug":19,"type":16},633,"https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Frozenite","2026-07-31T05:52:54.56302",15,{"items":2020,"total":163},[2021],{"slug":4,"name":4,"fn":5,"description":6,"org":2022,"tags":2023,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2024,2025,2026,2027],{"name":24,"slug":25,"type":16},{"name":14,"slug":15,"type":16},{"name":21,"slug":22,"type":16},{"name":18,"slug":19,"type":16}]