New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Electron DevTools Trace Analysis

by keybase in keybase/client

Analyzes Chrome or Electron DevTools Performance trace exports with Python scripts to find where render time actually goes, without opening DevTools.

BSD-3-ClauseAuto-check passedDevelopment

Install Electron DevTools Trace Analysis

skills CLI
$ npx skills add keybase/client --skill electron-profile -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install keybase/client electron-profile --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skill/electron-profile .claude/skills/electron-profile && rm -rf skills-src

Use ~/.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/

Facts

Skill name
electron-profile
GitHub stars
9.3k
Token cost
~809 tokens
SKILL.md length
358 words
Files
4 (incl. scripts)
Skills in repo
14
Repo updated
First seen
Licence
BSD-3-Clause

At a glance

Analyzes Chrome or Electron DevTools Performance trace exports with Python scripts to find where render time actually goes, without opening DevTools.

  • Works in 2 steps: Overview — processes, busiest renderer… → Sample attribution — self time,…
  • Investigating a slow render or jank reported in an Electron or Chrome app
  • SKILL.md covers Workflow, Interpreting results (dev… and Gotchas
  • Runs Python scripts from its folder; calls python3

What it does

The skill parses a DevTools Performance panel export, one large JSON of traceEvents that can run to 400MB and still load in about 30 seconds, using two scripts: trace-overview.py for a summary of processes, the busiest renderer main thread, long tasks with time offsets, and category totals, and trace-samples.py for self time, inclusive time and nearest-app-frame attribution from the embedded CPU sampling profile, with a --window flag to zoom into a specific long task. Both auto-pick the busiest renderer thread and need tracelib.py alongside them.

A table of signals helps interpret dev-build traces, which are mostly React development instrumentation rather than app code, so absolute numbers are misleading and production is roughly ten times faster. It flags specific dev-only noise such as React 19's component-performance tracking, debugger async-stack tracking when DevTools is open, and StrictMode's double-invoked effects, while noting that layout, paint, garbage collection and sync-versus-concurrent render splits remain valid structural signals even in a dev trace. It recommends profiling a production bundle, covered by a separate skill, for real numbers.

When your agent uses it

  • Investigating a slow render or jank reported in an Electron or Chrome app
  • Figuring out where time actually goes in a large DevTools Performance export
  • Attributing CPU samples to specific app frames during a long task
  • Judging a dev-build trace's structure without being misled by instrumentation overhead

Example prompts

  • “Analyze this 300MB DevTools trace and tell me what the long tasks are.”
  • “Attribute CPU samples between 2.5s and 4s in this trace to our app's components.”
  • “Is this slowdown real app work or just React dev instrumentation?”

Requirements

  • Python 3 to run the trace analysis scripts

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. Overview — processes, busiest renderer main thread, long tasks (with time offsets), X-event category totals
  2. Sample attribution — self time, inclusive time, and nearest-app-frame attribution from the CPU sampling profile. Use --window (seconds…

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

Electron DevTools Trace Analysis loads about 809 tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 358 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~47
When it runs · the whole SKILL.md, loaded when a task matches
~809

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). 358 words, ~809 tokens.

Download SKILL.mdSave it as .claude/skills/electron-profile/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
electron-profile
description
Use when analyzing a Chrome/Electron DevTools Performance trace export (.json) — slow renders, long tasks, jank, CPU sample attribution, "where is the time actually going".

DevTools Performance Trace Analysis

Parse DevTools Performance panel exports with Python scripts in scripts/ — no DevTools UI needed. A trace is one big JSON of traceEvents; a 400MB export loads in ~30s. The embedded sampling profile lives in Profile/ProfileChunk events.

Workflow

  1. Overview — processes, busiest renderer main thread, long tasks (with time offsets), X-event category totals:
    bash
    python3 scripts/trace-overview.py <trace.json> [--long-ms 50] [--top 30]
  2. Sample attribution — self time, inclusive time, and nearest-app-frame attribution from the CPU sampling profile. Use --window (seconds, relative to first sample) to zoom into a long task found in step 1:
    bash
    python3 scripts/trace-samples.py <trace.json> [--window FROM_S TO_S] [--top 30]

Both auto-pick the busiest CrRendererMain; override with --pid/--tid. Both need scripts/tracelib.py alongside.

Interpreting results (dev builds especially)

Dev-build traces are ~85-90% React dev instrumentation, NOT app code. Absolute numbers are meaningless; prod is ~10x faster. For real numbers profile the prod bundle (see prod-bundles skill), or at minimum disable the React DevTools extension while recording.

SignalMeaning
Huge run (:-1) self time, createTask, measureReact 19 dev component-performance tracks: console.createTask().run() inside runWithFiberInDEV/logComponentRender. Not app code.
v8::Debugger::AsyncTaskRun dominating X-event totalsDebugger async-stack tracking (DevTools open). Dev artifact.
Effects firing twice back-to-backStrictMode double-invoke. Dev only.
90%+ samples with no app frame on stackExpected in dev — instrumentation + framework internals. Judge the app-frame report's relative ranking, not totals.
performSyncWorkOnRoot ≫ scheduler time in inclusive reportMost renders are sync (flushSync / discrete events), not concurrent. Structural signal — valid even in dev.
pptr:internal framesCDP automation harness driving the app, not app code (excluded from app-frame report).
Layout / Paint / GC / EventDispatch totals in overviewReal browser work — valid signal even in dev. Compare against script time.
Show full SKILL.md (99 more words)Show less

Judge structure, not magnitude in dev traces: sync-vs-concurrent split, Layout/Paint/GC share, which app components rank highest, burst patterns around long tasks.

Gotchas

  • X-event name totals are nested-inclusive (parent contains child) — relative shape only, don't sum.
  • Sample span < trace span is normal: sampling only covers the profiled window.
  • App-frame attribution skips frames whose URL contains node_modules — with Vite dev this automatically excludes React (node_modules/.vite/deps/...).
  • --window is relative to the first sample, not trace start; long-task t= offsets from the overview are relative to trace start. They usually differ by <1s but eyeball the sample span line.
  • Trace timestamps are microseconds.

© 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-profile of keybase/client.

  • SKILL.md
  • scripts/trace-overview.py
  • scripts/trace-samples.py
  • scripts/tracelib.py

Open the folder on GitHubat commit 81e93d6

Compare with similar skills

Electron DevTools Trace 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.

Electron DevTools Trace Analysis compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Electron DevTools Trace Analysis this skillkeybase/client9.3k—~809Automated safety check: PassBSD-3-Clause
Renderdoc GPU Debugrudybear/renderdoc-skill211—~4kAutomated safety check: PassMIT
React Best Practicesryokun6/ryos1.3k—~2kAutomated safety check: PassMIT
React Performanceaffaan-m/ECC274k1 repos~4.5kAutomated safety check: PassMIT
Vercel React Best Practicesgambitph/Stackable350—~2kAutomated safety check: PassMIT
React PerformanceHoangNguyen0403/agent-skills-standard570—~577Automated safety check: PassMIT

Similar skills

  • Renderdoc GPU Debug

    rudybear/renderdoc-skill

    GPU frame debugging with RenderDoc via rdc-cli. An agent skill from rudybear/renderdoc-skill.

    211 GitHub stars~4k tokensUpdated 7 mo ago
    DevelopmentAuto-check passed

  • React Best Practices

    ryokun6/ryos

    React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).

    1.3k GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • React Performance

    affaan-m/ECC

    React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills).

    274k GitHub starsUsed in 1 repo~4.5k tokens
    DevelopmentAuto-check passed

  • Vercel React Best Practices

    gambitph/Stackable

    React performance optimization guidelines from Vercel Engineering.

    350 GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • React Performance

    HoangNguyen0403/agent-skills-standard

    Optimize React rendering, bundle size, and data flow with profiler-led decisions.

    570 GitHub stars~577 tokensUpdated yesterday
    DevelopmentAuto-check passed

  • React Best Practices

    poteto/noodle

    React performance optimization guidelines. An agent skill from poteto/noodle.

    420 GitHub stars~1.4k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed

More from keybase/client

All 14 skills in this repo

  • Electron 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.

    9.3k GitHub stars~875 tokensUpdated today
    Auto-check passed

  • 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.

    9.3k GitHub stars~3k tokensUpdated today
    Auto-check passed

  • 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.

    9.3k GitHub stars~978 tokensUpdated today
    Auto-check passed

  • 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.

    9.3k GitHub stars~657 tokensUpdated today
    Auto-check passed

  • 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.

    9.3k GitHub stars~476 tokensUpdated today
    Auto-check passed

  • 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.

    9.3k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Electron DevTools Trace Analysis

What does Electron DevTools Trace Analysis do?

Analyzes Chrome or Electron DevTools Performance trace exports with Python scripts to find where render time actually goes, without opening DevTools. py for self time, inclusive time and nearest-app-frame attribution from the embedded CPU sampling profile, with a --window flag to zoom into a specific long task.py alongside them.

When should I use Electron DevTools Trace Analysis?

Electron DevTools Trace Analysis fits situations like: investigating a slow render or jank reported in an Electron or Chrome app; figuring out where time actually goes in a large DevTools Performance export; attributing CPU samples to specific app frames during a long task; judging a dev-build trace's structure without being misled by instrumentation overhead.

How do I install Electron DevTools Trace Analysis in Claude Code?

Run `npx skills add keybase/client --skill electron-profile -a claude-code`. Or copy the skill folder (skill/electron-profile in keybase/client) into .claude/skills/electron-profile in your project. Claude Code loads it when a task matches its description.

How do I install Electron DevTools Trace Analysis in Codex?

Run `npx skills add keybase/client --skill electron-profile -a codex`. Or copy the skill folder (skill/electron-profile in keybase/client) into .agents/skills/electron-profile in your project. Codex loads it when a task matches its description.

Can I use Electron DevTools Trace 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-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/electron-profile, .gemini/skills/electron-profile, .github/skills/electron-profile and .opencode/skills/electron-profile in your project.

What does Electron DevTools Trace Analysis need to run?

Going by SKILL.md and its folder, Electron DevTools Trace Analysis 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 trace analysis scripts.

Does Electron DevTools Trace 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 DevTools Trace 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 DevTools Trace Analysis use?

Electron DevTools Trace 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 DevTools Trace Analysis use?

About 809 tokens (SKILL.md is roughly 3.2k 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 DevTools Trace Analysis?

Skills that share tags, products or a category with Electron DevTools Trace Analysis: Renderdoc GPU Debug (rudybear/renderdoc-skill, 211 stars), React Best Practices (ryokun6/ryos, 1.3k stars), React Performance (affaan-m/ECC, 274k stars) and Vercel React Best Practices (gambitph/Stackable, 350 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Electron DevTools Trace 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.