Vercel React Best Practices
sanity-io/sanity
React and Next.js performance optimization guidelines from Vercel Engineering.
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.
Install Electron Heap Snapshot Analysis
$ npx skills add keybase/client --skill electron-heap -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install keybase/client electron-heap --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/electron-heap .claude/skills/electron-heap && 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 "electron-heap" agent skill from https://github.com/keybase/client/tree/master/skill/electron-heap into .claude/skills/electron-heap/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "electron-heap", 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/electron-heapType 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 electron-heap -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install keybase/client electron-heap --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/electron-heap .agents/skills/electron-heap && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "electron-heap" agent skill from https://github.com/keybase/client/tree/master/skill/electron-heap into .agents/skills/electron-heap/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "electron-heap", 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 electron-heap -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install keybase/client electron-heap --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/electron-heap .cursor/skills/electron-heap && 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 "electron-heap" agent skill from https://github.com/keybase/client/tree/master/skill/electron-heap into .cursor/skills/electron-heap/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "electron-heap", 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/electron-heap--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 electron-heap -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install keybase/client electron-heap --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/electron-heap .gemini/skills/electron-heap && 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 "electron-heap" agent skill from https://github.com/keybase/client/tree/master/skill/electron-heap into .gemini/skills/electron-heap/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "electron-heap", 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 electron-heapInstalls 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 electron-heap -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/electron-heap .github/skills/electron-heap && 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 "electron-heap" agent skill from https://github.com/keybase/client/tree/master/skill/electron-heap into .github/skills/electron-heap/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "electron-heap", 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 electron-heap -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 electron-heap --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/electron-heap .opencode/skills/electron-heap && 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 "electron-heap" agent skill from https://github.com/keybase/client/tree/master/skill/electron-heap into .opencode/skills/electron-heap/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "electron-heap", 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
electron-heap- GitHub stars
- 9.3k
- Token cost
- ~875 tokens
- SKILL.md length
- 363 words
- Files
- 4 (incl. scripts)
- Skills in repo
- 14
- Repo updated
- First seen
- Licence
- BSD-3-Clause
At a glance
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.
- Works in 2 steps: Overview — object counts, sizes,… → Pick suspects from output (see…
- Hunting a memory leak in a Chrome or Electron app from a heap snapshot
- SKILL.md covers Workflow, Interpreting results and Gotchas
- Runs JavaScript scripts from its folder; calls node
What it does
The skill analyzes `.heapsnapshot` files from V8, Chrome and Electron with Node scripts, without opening the DevTools UI. A snapshot is one large JSON file of flat node and edge arrays, and a 100MB file holds roughly 1.2M nodes and takes about 30s to parse. The first script, `heap-stats.js`, gives an overview of object counts, sizes, detached DOM nodes and big strings; the agent picks suspects from that and traces why they stay alive with `heap-retainers.js`.
The retainer script takes a name substring plus options to restrict the search to detached nodes or an object type, sample paths, dump property edges, skip known benign retainers with `--avoid`, or follow only pure-JavaScript paths with `--js-only`. A shared library parses the snapshot, builds a reverse-edge index and finds the shortest path to a root. An interpretation table separates real app leaks (a JavaScript path through fiber state, a store or a cache) from artifacts such as React 19 dev-build stack instrumentation, DevTools itself or Blink-internal retention.
When your agent uses it
- Hunting a memory leak in a Chrome or Electron app from a heap snapshot
- Finding out why a detached DOM node is still retained
- Checking which objects dominate a growing heap
Example prompts
- “Analyze ./snapshots/after-login.heapsnapshot and tell me what is leaking.”
- “Why is this detached DOM tree still retained? Use the retainer script and skip DevTools-owned paths.”
- “Show the biggest strings and the detached DOM nodes in ./snapshots/renderer.heapsnapshot.”
Requirements
- Node.js, to run the bundled scripts
- A .heapsnapshot file taken from DevTools
Workflow steps
2 steps, taken from the first numbered list in SKILL.md.
- Overview — object counts, sizes, detached DOM, big strings
- Pick suspects from output (see interpretation table), then trace retention
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/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
node
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
Electron Heap Snapshot Analysis loads about 875 tokens when it runs. Until then it costs about 44 tokens; SKILL.md has 363 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). 363 words, ~875 tokens.
Download SKILL.mdSave it as
.claude/skills/electron-heap/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.- name
- electron-heap
- description
- Use when analyzing a V8/Chrome/Electron .heapsnapshot file — memory leak hunting, detached DOM nodes, "why is this object retained", growing heap, retainer paths.
Heap Snapshot Analysis
Parse DevTools .heapsnapshot files with Node scripts in scripts/ — no DevTools UI needed. Snapshots are one big JSON: flat nodes/edges arrays. 100MB file ≈ 1.2M nodes, parses in ~30s.
Workflow
- Overview — object counts, sizes, detached DOM, big strings:
bash node --max-old-space-size=8192 scripts/heap-stats.js <file.heapsnapshot> - Pick suspects from output (see interpretation table), then trace retention:
bash node --max-old-space-size=8192 scripts/heap-retainers.js <file.heapsnapshot> '<name-substring>' \ [--detached] [--type=object|native|closure] [--samples=N] [--props] \ [--avoid=InspectorDOMAgent,DevToolsSession,DocumentState] [--js-only]--avoid=...skips retainer nodes by name substring. Re-run with known-benign anchors avoided to see what else retains the object.--js-onlyfinds pure-JS retention paths (no native intermediates) — distinguishes app leaks from Blink-internal retention.--propsdumps property edges (e.g. Errormessage, refcurrent).
Both scripts require scripts/snapshot-lib.js (parser + reverse-edge index + BFS path-to-root).
Interpreting results
| Signal | Meaning |
|---|---|
Thousands of Error + huge system / StackFrameInfo, message react-stack-top-frame, retained via _debugStack | React 19 dev-build owner-stack instrumentation. Not a leak; absent in prod. |
Retainer path through blink::InspectorDOMAgent / DevToolsSession | DevTools itself retains it (snapshot artifact — DevTools must be open to snapshot). Ignore; re-run with --avoid. |
Path through blink::DocumentState → form control | Blink session-history form-state keeps removed input alive. Browser-internal, bounded. |
Path through blink::FrameSelection → SelectionEditor → Range | Page selection/caret still points into detached tree. Released on next selection change; can force with blur()/getSelection().removeAllRanges() on unmount. |
Detached DOM with only native retainer paths (--js-only finds nothing) | Not an app JS leak. One live leaf (via parent/child member pointers) pins the whole detached tree. |
Detached DOM with a JS path (fiber memoizedState, module map, store, cache) | Real app leak — fix the JS retainer. |
FiberNode via __reactFiber$ expando on a retained DOM node | Normal: React never deletes expandos; fiber lives as long as its DOM node. Fix the DOM retention, not the fiber. |
PerformanceMeasure accumulating under blink::UserTiming | performance.measure() entries never cleared (React dev tracks or app perf code). Bounded noise unless growing. |
system / ExternalStringData large | Script sources + big JSON strings (e.g. emoji data). Usually expected. |
Show full SKILL.md (69 more words)Show less
Gotchas
edges[].to_nodeis a byte offset intonodes— divide by node-field count (lib handles this).- Shortest retainer path ≠ only path. Kill one anchor and the next takes over — enumerate direct retainers before concluding.
- Everything in a snapshot is live by definition; "leak" means unexpected retainer, not unreachable memory.
- Skip
weakedges when tracing (lib does). - Comparing two snapshots (before/after) beats staring at one: diff constructor counts from
heap-stats.jsruns.
© 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/electron-heap of keybase/client.
- SKILL.md
- scripts/heap-retainers.js
- scripts/heap-stats.js
- scripts/snapshot-lib.js
Open the folder on GitHubat commit 81e93d6
Compare with similar skills
Electron Heap Snapshot Analysis 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 |
|---|---|---|---|---|---|---|
| Electron Heap Snapshot Analysis this skillkeybase/client | 9.3k | — | ~875 | Automated safety check: Pass | BSD-3-Clause | |
| Vercel React Best Practicessanity-io/sanity | 6.4k | 130 repos | ~1.6k | Automated safety check: Pass | MIT | |
| Cmux Debugging Guidemanaflow-ai/cmux | 28k | 1 repos | ~1.1k | Automated safety check: Pass | Custom licence | |
| Issue Fixmono/SkiaSharp | 5.6k | — | ~5.1k | Automated safety check: Pass | MIT | |
| PlotJuggler 4 Perf ProfilingPlotJuggler/PlotJuggler | 6.2k | — | ~1.6k | Automated safety check: Notes | MPL-2.0 | |
| Python Performance Optimizationwshobson/agents | 40k | 12 repos | ~814 | Automated safety check: Pass | MIT |
Similar skills
- Official
Cmux Debugging Guide
manaflow-ai/cmux
Covers debug logging, the Debug menu, profiling rules and runtime pitfalls for working on the cmux macOS terminal app.
Issue Fix
mono/SkiaSharp
Fix bugs in SkiaSharp C bindings. An agent skill from mono/SkiaSharp.
PlotJuggler 4 Perf Profiling
PlotJuggler/PlotJuggler
Guides CPU profiling of PlotJuggler 4 on Linux with perf: count first, record cheaply with LBR, then read per-thread, flat, flamegraph or time-window views.
Python Performance Optimization
wshobson/agents
Profiles slow Python code with cProfile and memory profilers, then applies targeted fixes for CPU, memory, I/O and query bottlenecks.
The Art of Debugging
stas00/the-art-of-debugging
Condensed debugging method and tool recipes for Unix, Python and PyTorch programs: crashes, hangs, segfaults, wrong output, CUDA OOM, NaN values and slowness.
More from keybase/client
All 14 skills in this repoElectron 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.
React DevTools Profile Analyzer
keybase/client
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.
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 Electron Heap Snapshot Analysis
What does Electron Heap Snapshot Analysis do?
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. heapsnapshot` files from V8, Chrome and Electron with Node scripts, without opening the DevTools UI.2M nodes and takes about 30s to parse.
When should I use Electron Heap Snapshot Analysis?
Electron Heap Snapshot Analysis fits situations like: hunting a memory leak in a Chrome or Electron app from a heap snapshot; finding out why a detached DOM node is still retained; checking which objects dominate a growing heap.
How do I install Electron Heap Snapshot Analysis in Claude Code?
Run `npx skills add keybase/client --skill electron-heap -a claude-code`. Or copy the skill folder (skill/electron-heap in keybase/client) into .claude/skills/electron-heap in your project. Claude Code loads it when a task matches its description.
How do I install Electron Heap Snapshot Analysis in Codex?
Run `npx skills add keybase/client --skill electron-heap -a codex`. Or copy the skill folder (skill/electron-heap in keybase/client) into .agents/skills/electron-heap in your project. Codex loads it when a task matches its description.
Can I use Electron Heap Snapshot Analysis 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 electron-heap -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/electron-heap, .gemini/skills/electron-heap, .github/skills/electron-heap and .opencode/skills/electron-heap in your project.
What does Electron Heap Snapshot Analysis need to run?
Going by SKILL.md and its folder, Electron Heap Snapshot Analysis needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js, to run the bundled scripts; A .heapsnapshot file taken from DevTools.
Does Electron Heap Snapshot Analysis 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 Electron Heap Snapshot Analysis 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 Electron Heap Snapshot Analysis use?
Electron Heap Snapshot Analysis 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 Electron Heap Snapshot Analysis use?
About 875 tokens (SKILL.md is roughly 3.5k 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 Electron Heap Snapshot Analysis?
Skills that share tags, products or a category with Electron Heap Snapshot Analysis: Vercel React Best Practices (sanity-io/sanity, 6.4k stars), Cmux Debugging Guide (manaflow-ai/cmux, 28k stars), Issue Fix (mono/SkiaSharp, 5.6k stars) and PlotJuggler 4 Perf Profiling (PlotJuggler/PlotJuggler, 6.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Electron Heap Snapshot Analysis?
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.