Borrowing it
Nothing to install: this file belongs to tellahq/opensession. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/tellahq/opensession/main/.agents/skills/react-devtools/SKILL.mdgit clone --depth 1 https://github.com/tellahq/opensessionWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/tellahq/opensession/react-devtools)<a href="https://agentmods.dev/skills/tellahq/opensession/react-devtools"><img src="https://agentmods.dev/badge/skills/tellahq/opensession/react-devtools/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/tellahq/opensession/react-devtools"><img src="https://agentmods.dev/badge/skills/tellahq/opensession/react-devtools.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 2 findings, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium Excessive Agency · line 4 Skill grants unrestricted tool access without appropriate constraints. An agent with unfettered tool access can perform arbitrary actions including file modification, network requests, and code execution.Fix: Restrict tool access to only the tools required for the skill's stated purpose. Use an explicit allowlist rather than granting blanket access.
- medium MCP Rug Pull · line 170 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00111 | $0.02341 |
| Opus 5.5 | $0.00044 | $0.00936 |
| Sonnet 5.5 | $0.00022 | $0.00468 |
| Haiku 4.5 | $0.00011 | $0.00234 |
Grade D, and why
react-devtools scanned grade D with 2 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Unrestricted tool accessmediumExcessive agency
A wildcard tool grant or "run any command" leaves no least-privilege boundary at all.
allowed-tools: Bash(agent-react-devtools:*) Recursive force deletehighDestructive command
rm -rf with a variable or a broad path is one typo away from removing the wrong tree.
trap 'rm -rf -- "$browser_tmp"' EXIT Copies of this mod
1 near-identical copy found in the catalogue:
- react-devtools — 100% identical, 53 lines differ
How it starts
The opening of the file, as written. The whole thing — 218 lines — stays where its author put it; the contents beside it link to each section on GitHub.
agent-react-devtools
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.
Core Workflow
- Ensure connection — check
agent-react-devtools status. If the daemon is not running, start it withagent-react-devtools start. Useagent-react-devtools wait --connectedto block until a React app connects. - Inspect — get the component tree, search for components, inspect props/state/hooks.
- Profile — start profiling, trigger the interaction (or ask the user to), stop profiling, analyze results.
- Act — use the data to fix the bug, optimize performance, or explain what's happening.
Essential Commands
Daemon
agent-react-devtools start # Start daemon (auto-starts on first command)
agent-react-devtools stop # Stop daemon
agent-react-devtools status # Check connection, component count, last event
agent-react-devtools wait --connected # Block until a React app connects
agent-react-devtools wait --component App # Block until a component appears
Component Inspection
agent-react-devtools get tree # Full component hierarchy (labels: @c1, @c2, ...)
agent-react-devtools get tree --depth 3 # Limit depth
agent-react-devtools get component @c5 # Props, state, hooks for a specific component
agent-react-devtools find Button # Search by display name (fuzzy)
agent-react-devtools find Button --exact # Exact match
agent-react-devtools count # Count by type: fn, cls, host, memo, ...
agent-react-devtools errors # List components with errors or warnings
Performance Profiling
agent-react-devtools profile start # Start recording
agent-react-devtools profile stop # Stop and collect data
agent-react-devtools profile slow # Slowest components by avg render time
agent-react-devtools profile slow --limit 10 # Top 10
agent-react-devtools profile rerenders # Most re-rendered components
agent-react-devtools profile report @c5 # Detailed report for one component
agent-react-devtools profile timeline --limit 10 # First 10 commits (use --limit; uncapped can dump 300+ lines)
agent-react-devtools profile timeline --limit 10 --offset 10 # Next 10 (pagination)
agent-react-devtools profile timeline --sort duration --limit 5 # Top 5 most expensive commits
agent-react-devtools profile timeline --sort timeline --limit 5 # Explicit chronological order (same as default)
agent-react-devtools profile commit 3 # Detail for commit #3
agent-react-devtools profile export profile.json # Export as React DevTools Profiler JSON
agent-react-devtools profile diff before.json after.json # Compare two exports
What ships with it
5 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago Changed · +36 lines scan B → D 0b03b368dc9b
- 1mo ago First seen · 182 lines · 111 tokens per session scan B bc64c3c66919
react-devtools is a skill published in the GitHub repository tellahq/opensession (401 stars, last pushed today), licensed MIT. It adds 111 tokens to every session and 2,341 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it D with 2 findings (unrestricted tool access, recursive force delete). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
material-ui-nextjs
Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app.
devtools-react
React adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-react in a React json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.
migrate-oxlint
Guide for migrating a project from ESLint to Oxlint. Use when asked to migrate, convert, or switch a JavaScript/TypeScript project's linter from ESLint to Oxlint.
inspector-workbench
Runs Inspector UI work on the standalone Threads state lab so the agent can see the overlay. Use when a CopilotKit employee asks an agent to fix, polish, add, or debug Inspector UI, chrome, panes, overlay actions, launcher, Home, Threads, Playground, Memory, or any visual behavior in @copilotkit/web-inspector. Don't…
devtools-bidirectional
Two-way event patterns between devtools panel and application. App-to-devtools observation, devtools-to-app commands, time-travel debugging with snapshots and revert. structuredClone for snapshot safety, distinct event suffixes for observation vs commands, serializable payloads only.
devtools-instrumentation
Analyze library codebase for critical architecture and debugging points, add strategic event emissions. Identify middleware boundaries, state transitions, lifecycle hooks. Consolidate events (1 not 15), debounce high-frequency updates, DRY shared payload fields, guard emit() for production. Transparent server/client…