Jazz UI Development
garden-co/classic-jazz
A skill your agent uses when building, debugging, or optimizing Jazz applications.
Parses a React DevTools Profiler JSON export with Python scripts to find re-render storms, commit fan-out and why a component rendered, without opening the DevTools UI.
Install React DevTools Profile Analyzer
$ npx skills add keybase/client --skill react-devtools-profile -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install keybase/client react-devtools-profile --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skill/react-devtools-profile .claude/skills/react-devtools-profile && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "react-devtools-profile" agent skill from https://github.com/keybase/client/tree/master/skill/react-devtools-profile into .claude/skills/react-devtools-profile/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-devtools-profile", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/keybase/client/tree/master/skill/react-devtools-profileType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add keybase/client --skill react-devtools-profile -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install keybase/client react-devtools-profile --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skill/react-devtools-profile .agents/skills/react-devtools-profile && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "react-devtools-profile" agent skill from https://github.com/keybase/client/tree/master/skill/react-devtools-profile into .agents/skills/react-devtools-profile/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-devtools-profile", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add keybase/client --skill react-devtools-profile -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install keybase/client react-devtools-profile --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skill/react-devtools-profile .cursor/skills/react-devtools-profile && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "react-devtools-profile" agent skill from https://github.com/keybase/client/tree/master/skill/react-devtools-profile into .cursor/skills/react-devtools-profile/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-devtools-profile", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/keybase/client.git --path skill/react-devtools-profile--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add keybase/client --skill react-devtools-profile -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install keybase/client react-devtools-profile --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skill/react-devtools-profile .gemini/skills/react-devtools-profile && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "react-devtools-profile" agent skill from https://github.com/keybase/client/tree/master/skill/react-devtools-profile into .gemini/skills/react-devtools-profile/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-devtools-profile", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install keybase/client react-devtools-profileInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add keybase/client --skill react-devtools-profile -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .github/skills && cp -r skills-src/skill/react-devtools-profile .github/skills/react-devtools-profile && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "react-devtools-profile" agent skill from https://github.com/keybase/client/tree/master/skill/react-devtools-profile into .github/skills/react-devtools-profile/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-devtools-profile", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add keybase/client --skill react-devtools-profile -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install keybase/client react-devtools-profile --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skill/react-devtools-profile .opencode/skills/react-devtools-profile && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "react-devtools-profile" agent skill from https://github.com/keybase/client/tree/master/skill/react-devtools-profile into .opencode/skills/react-devtools-profile/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-devtools-profile", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
react-devtools-profile- GitHub stars
- 9.3k
- Token cost
- ~978 tokens
- SKILL.md length
- 443 words
- Files
- 4 (incl. scripts)
- Skills in repo
- 14
- Repo updated
- First seen
- Licence
- BSD-3-Clause
At a glance
Parses a React DevTools Profiler JSON export with Python scripts to find re-render storms, commit fan-out and why a component rendered, without opening the DevTools UI.
- Works in 2 steps: Overview — commit totals, top commits… → Per-commit detail — full updater list,…
- Diagnosing a re-render storm from a React DevTools Profiler export
- SKILL.md covers Workflow, Interpreting results and Gotchas
- Runs Python scripts from its folder; calls python3
What it does
The skill distinguishes a React DevTools Profiler export, which has a top-level dataForRoots field, from a Chrome Performance trace, which has traceEvents and belongs to a different skill. An overview script reports commit totals, the top commits by updater count, components ranked by aggregate self time, and timeline buckets; a per-commit script then gives the full updater list, fiber counts and the top fibers with their ancestor paths for one chosen commit.
A table of signals helps interpret the output: updaters show which fibers scheduled an update rather than where time was spent, a repeated updater set across commits points to a shared-store fan-out worth tracing to one subscription, unnamed fibers were unmounted before profiling stopped, Immediate priority marks a synchronous flush outside a React event, and a high render count on one component suggests an unstable selector. Both scripts work on React Native and web or Electron profiles alike and need rdtlib.py alongside them.
When your agent uses it
- Diagnosing a re-render storm from a React DevTools Profiler export
- Finding which store subscription caused many components to update together
- Investigating why a specific component rendered in a commit
Example prompts
- “Analyze this profiler export and tell me the top five components by self time.”
- “Show the full updater list for commit 12 in this profile.”
- “Why did the conversation list re-render in so many commits? Check the profile.”
Requirements
- Python 3 to run the bundled scripts
Workflow steps
2 steps, taken from the first numbered list in SKILL.md.
- Overview — commit totals, top commits with updaters, component ranking by aggregate self duration, timeline buckets
- Per-commit detail — full updater list, fiber counts, top fibers with ancestor paths, changeDescriptions if recorded
What it can do on your machine
Read from SKILL.md and the folder at commit 81e93d6. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 3 files in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
React DevTools Profile Analyzer loads about 978 tokens when it runs. Until then it costs about 75 tokens; SKILL.md has 443 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from keybase/client at commit 81e93d6, republished under its BSD-3-Clause licence (© keybase). 443 words, ~978 tokens.
Download SKILL.mdSave it as
.claude/skills/react-devtools-profile/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.- name
- react-devtools-profile
- description
- Use when analyzing a React DevTools Profiler export (.json with "dataForRoots"/"commitData") — re-render storms, commit fan-out, "why did this component render", send/interaction render cost. NOT for Chrome Performance traces (those have "traceEvents" — use electron-profile).
React DevTools Profiler Export Analysis
Parse React DevTools Profiler exports (version 4/5 JSON, top-level dataForRoots) with Python scripts in scripts/ — no DevTools UI needed. Works for React Native and web/Electron profiles alike.
Distinguish from a Chrome Performance trace: profiler export has {"version": N, "dataForRoots": [...]}; a trace has traceEvents (use the electron-profile skill for those).
Workflow
- Overview — commit totals, top commits with updaters, component ranking by aggregate self duration, timeline buckets:
bash python3 scripts/profile-overview.py <profile.json> [--top 25] [--bucket-ms 500] - Per-commit detail — full updater list, fiber counts, top fibers with ancestor paths, changeDescriptions if recorded:
bash python3 scripts/profile-commits.py <profile.json> [--commit N] [--top 10] [--root 0]
Run from the skill directory (or use absolute script paths); both scripts need scripts/rdtlib.py alongside. The overview's top-commit list prints #N — that is the index to pass as --commit N (commits are chronological).
Interpreting results
| Signal | Meaning |
|---|---|
updaters on a commit | Fibers that scheduled the update — setState / store subscription (useSyncExternalStore) firing. The render entry point, not necessarily where time went. |
| Same broad updater set repeated across several commits | Shared-store fan-out: many components' selectors woke for one logical change. Find the common denominator subscription (here it was conversation meta) and fix identity churn there. |
Unnamed fibers #1234 | Fiber absent from the end-of-profiling snapshot = unmounted before profiling stopped (virtualized-list churn, pending rows replaced on server ack). Cross-reference the same id in updaters, which carries displayName. |
prio=Immediate | Sync flush — store setState outside a React event (zustand, RPC callbacks). Each one blocks the frame; many small Immediate commits = stacked sync flushes worth batching. |
High x<count> in component ranking | Component rendered in many commits — subscription too broad or unstable selector output (fresh object/closure identity per run defeats useShallow). |
| Large single-fiber self time in a big-fiber-count commit | Usually a subtree mount (new list row). Mount cost is mostly inherent; look at whether it mounts twice (key churn). |
changeDescriptions: null | Profile recorded without "Record why each component rendered". Re-record with it enabled to get props/state/hooks/context attribution per fiber. |
Show full SKILL.md (135 more words)Show less
Scope caveat: durations are React render/effect time only. Store selector runs, native layout, bridge, and app JS outside render are invisible here — a small total does NOT mean no perf problem; it means the problem isn't React commits.
Fan-out diagnosis recipe: overview → spot repeated updater sets → per-commit to list exact updater components → read their store selectors → find the shared subscription whose selected values change identity without changing content → preserve identity at the producer (deep-equal reuse on store write), not with deeper memo at consumers.
Gotchas
- Timestamps are ms relative to profiling start; scripts print t= relative to first commit.
fiberActualDurations= inclusive per fiber;fiberSelfDurations= self. Ranking uses self.- Multiple roots possible (
dataForRoots); overview iterates all, per-commit takes--root. - Updater lists carry displayNames even for fibers missing from the snapshot — best way to name unmounted fibers.
© keybase, BSD-3-Clause. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 3 other files (scripts) in skill/react-devtools-profile of keybase/client.
- SKILL.md
- scripts/profile-commits.py
- scripts/profile-overview.py
- scripts/rdtlib.py
Open the folder on GitHubat commit 81e93d6
Compare with similar skills
React DevTools Profile Analyzer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| React DevTools Profile Analyzer this skillkeybase/client | 9.3k | — | ~978 | Automated safety check: Pass | BSD-3-Clause | |
| Jazz UI Developmentgarden-co/classic-jazz | 2.5k | — | ~1.7k | Automated safety check: Pass | MIT | |
| React Devtoolssanity-io/sanity | 6.4k | 3 repos | ~2.1k | Automated safety check: Pass | MIT | |
| PerformanceSidiora-Labs/centra-llm-agents | 115 | — | ~778 | Automated safety check: Pass | Custom licence | |
| Mobile App Debuggingsecondsky/claude-skills | 227 | — | ~513 | Automated safety check: Pass | MIT | |
| Argent React Native Optimizationbbplayer-app/BBPlayer | 1.1k | — | ~1.3k | Automated safety check: Pass | MIT |
Similar skills
- Official
React Devtools
sanity-io/sanity
React DevTools CLI for AI agents. An agent skill from sanity-io/sanity.
Performance
Sidiora-Labs/centra-llm-agents
Performance optimization guidelines for React/React Native applications.
Mobile App Debugging
secondsky/claude-skills
Mobile app debugging for iOS, Android, cross-platform frameworks.
Argent React Native Optimization
bbplayer-app/BBPlayer
Optimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues.
Add Error Tracking
gotempsh/temps
Add Temps error tracking to applications using the Sentry-compatible SDK.
More from keybase/client
All 14 skills in this repoElectron Heap Snapshot Analysis
keybase/client
Analyzes V8, Chrome and Electron .heapsnapshot files with Node scripts to find memory leaks, detached DOM nodes and the retainer paths that keep objects alive.
Electron DevTools Trace Analysis
keybase/client
Analyzes Chrome or Electron DevTools Performance trace exports with Python scripts to find where render time actually goes, without opening DevTools.
Keybase RPC Log Analysis
keybase/client
Captures a clean Keybase service log and analyzes it for redundant, duplicated or looping RPCs, then checks whether a caching fix reduced the calls.
Address PR Feedback
keybase/client
Fetches GitHub Copilot review feedback from inline threads and review bodies, checks each finding against the code and fixes the valid ones.
Electron App Screenshot
keybase/client
Takes a screenshot of a running Electron desktop app through playwright-cli over remote debugging, shrinks it and shows it so you can check the UI visually.
Keybase E2E Flow Tests
keybase/client
Guides writing and fixing end-to-end flow tests for the Keybase app on desktop with Playwright and on iOS with Appium and WebdriverIO, sharing one testID registry.
Related
Works with
Categories
Questions about React DevTools Profile Analyzer
What does React DevTools Profile Analyzer do?
Parses a React DevTools Profiler JSON export with Python scripts to find re-render storms, commit fan-out and why a component rendered, without opening the DevTools UI. The skill distinguishes a React DevTools Profiler export, which has a top-level dataForRoots field, from a Chrome Performance trace, which has traceEvents and belongs to a different skill. An overview script reports commit totals, the top commits by updater count, components ranked by aggregate self time, and timeline buckets; a per-commit script then gives the full updater list, fiber counts and the top fibers with their ancestor paths for one chosen commit.
When should I use React DevTools Profile Analyzer?
React DevTools Profile Analyzer fits situations like: diagnosing a re-render storm from a React DevTools Profiler export; finding which store subscription caused many components to update together; investigating why a specific component rendered in a commit.
How do I install React DevTools Profile Analyzer in Claude Code?
Run `npx skills add keybase/client --skill react-devtools-profile -a claude-code`. Or copy the skill folder (skill/react-devtools-profile in keybase/client) into .claude/skills/react-devtools-profile in your project. Claude Code loads it when a task matches its description.
How do I install React DevTools Profile Analyzer in Codex?
Run `npx skills add keybase/client --skill react-devtools-profile -a codex`. Or copy the skill folder (skill/react-devtools-profile in keybase/client) into .agents/skills/react-devtools-profile in your project. Codex loads it when a task matches its description.
Can I use React DevTools Profile Analyzer in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add keybase/client --skill react-devtools-profile -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-devtools-profile, .gemini/skills/react-devtools-profile, .github/skills/react-devtools-profile and .opencode/skills/react-devtools-profile in your project.
What does React DevTools Profile Analyzer need to run?
Going by SKILL.md and its folder, React DevTools Profile Analyzer needs Python for the scripts in its folder and the command-line tools its instructions call (python3). Our summary lists: Python 3 to run the bundled scripts.
Does React DevTools Profile Analyzer access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is React DevTools Profile Analyzer safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does React DevTools Profile Analyzer use?
React DevTools Profile Analyzer is published under the BSD-3-Clause licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does React DevTools Profile Analyzer use?
About 978 tokens (SKILL.md is roughly 3.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to React DevTools Profile Analyzer?
Skills that share tags, products or a category with React DevTools Profile Analyzer: Jazz UI Development (garden-co/classic-jazz, 2.5k stars), React Devtools (sanity-io/sanity, 6.4k stars), Performance (Sidiora-Labs/centra-llm-agents, 115 stars) and Mobile App Debugging (secondsky/claude-skills, 227 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains React DevTools Profile Analyzer?
keybase (a GitHub organization) maintains it in keybase/client, which has 9,257 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 7, 2026.
Source: keybase/client on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.