React Best Practices
ryokun6/ryos
React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).
Builds the desktop Vite and iOS or Android Metro production bundles and checks them for tree-shaking problems, such as mobile-only modules leaking into the desktop build.
$ npx skills add keybase/client --skill prod-bundles -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install keybase/client prod-bundles --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/prod-bundles .claude/skills/prod-bundles && 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 "prod-bundles" agent skill from https://github.com/keybase/client/tree/master/skill/prod-bundles into .claude/skills/prod-bundles/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prod-bundles", 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/prod-bundlesType 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 prod-bundles -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install keybase/client prod-bundles --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/prod-bundles .agents/skills/prod-bundles && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "prod-bundles" agent skill from https://github.com/keybase/client/tree/master/skill/prod-bundles into .agents/skills/prod-bundles/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prod-bundles", 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 prod-bundles -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install keybase/client prod-bundles --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/prod-bundles .cursor/skills/prod-bundles && 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 "prod-bundles" agent skill from https://github.com/keybase/client/tree/master/skill/prod-bundles into .cursor/skills/prod-bundles/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prod-bundles", 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/prod-bundles--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 prod-bundles -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install keybase/client prod-bundles --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/prod-bundles .gemini/skills/prod-bundles && 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 "prod-bundles" agent skill from https://github.com/keybase/client/tree/master/skill/prod-bundles into .gemini/skills/prod-bundles/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prod-bundles", 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 prod-bundlesInstalls 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 prod-bundles -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/prod-bundles .github/skills/prod-bundles && 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 "prod-bundles" agent skill from https://github.com/keybase/client/tree/master/skill/prod-bundles into .github/skills/prod-bundles/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prod-bundles", 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 prod-bundles -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 prod-bundles --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/prod-bundles .opencode/skills/prod-bundles && 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 "prod-bundles" agent skill from https://github.com/keybase/client/tree/master/skill/prod-bundles into .opencode/skills/prod-bundles/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prod-bundles", 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.
prod-bundlesBuilds the desktop Vite and iOS or Android Metro production bundles and checks them for tree-shaking problems, such as mobile-only modules leaking into the desktop build.
The skill lists the commands for building each platform's production bundle from the shared folder: yarn desktop:build:prod for the Vite desktop build, which writes to shared/desktop/dist, and yarn ios:jsbundle and yarn android:jsbundle for the Metro bundles, each producing a main.jsbundle. A shell filter separates production bundles from the dev and profile ones by their file-name suffixes.
The tree-shaking audit has two parts. For desktop, it loops over mobile-only packages such as expo-audio, expo-location and react-native-kb to confirm none appear in the production bundle. For iOS, a Python check confirms that the bare isMobile and isElectron globals were replaced with literals, expecting zero occurrences. Background notes explain that Vite's define block and a Babel plugin in the Metro setup inline those globals so dead branches get dropped, that native-only packages are aliased to a null module on desktop, and that Vite's dependency cache must be cleared after editing that list.
Read from SKILL.md and the folder at commit 349f5f4. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
yarnpython3bundleFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use yarn, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Production Bundle Audit loads about 620 tokens when it runs. Until then it costs about 55 tokens; SKILL.md has 137 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.
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); files beside SKILL.md are not scanned.
The full file from keybase/client at commit 349f5f4, republished under its BSD-3-Clause licence (© keybase). 137 words, ~620 tokens.
.claude/skills/prod-bundles/SKILL.md (or your agent's skills folder).Build production bundles for both platforms and analyze them for correct tree-shaking.
Desktop (Vite):
# From shared/
yarn desktop:build:prodOutput lands in shared/desktop/dist/. Prod bundles have no .dev or .profile suffix — filter with:
ls shared/desktop/dist/*.bundle.js | grep -v '\.dev\.' | grep -v '\.profile\.'iOS (Metro):
# From shared/
yarn ios:jsbundleOutput: shared/ios/dist/main.jsbundle
Android (Metro):
# From shared/
yarn android:jsbundleOutput: shared/android/dist/main.jsbundle
Desktop — check mobile-only modules are absent:
DIST=shared/desktop/dist
PROD=$(ls "$DIST"/*.bundle.js | grep -v '\.dev\.' | grep -v '\.profile\.')
for mod in expo-audio expo-location expo-video react-native-kb @gorhom/bottom-sheet lottie-react-native react-native-safe-area-context; do
hits=$(echo "$PROD" | xargs grep -l "$mod" 2>/dev/null | wc -l | tr -d ' ')
echo "$mod: $hits files"
doneiOS bundle — check bare isMobile/isElectron are inlined as literals (Babel plugin):
# Should report 0 occurrences — bare globals replaced with true/false at transform time
python3 -c "
import re
bundle = open('shared/ios/dist/main.jsbundle').read()
for name in ['isMobile', 'isElectron', 'isAndroid', 'isIOS']:
real = [m for m in re.finditer(r'(?<![.\w{,])' + name + r'(?![:\w])', bundle)]
print(f'{name} not as property/key: {len(real)} occurrences')
"define block in shared/vite.config.mts (makeDefines) replaces bare globals (isMobile, isElectron, etc.) with literals, and the prod minifier drops the dead branches.makePlatformPlugin Babel plugin in babel.config.js inlines the same globals at transform time, enabling Metro's constant-folding-plugin to DCE dead branches.shared/native-only-modules.js are aliased to shared/null-module.js by the resolve config in shared/vite.config.mts, and pre-bundled through optimizeDeps. After changing that file, clear Vite's dep cache: rm -rf shared/node_modules/.vite.© 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
Just SKILL.md in skill/prod-bundles of keybase/client.
Open the folder on GitHubat commit 349f5f4
Production Bundle Audit 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 |
|---|---|---|---|---|---|---|
| Production Bundle Audit this skillkeybase/client | 9.3k | — | ~620 | Automated safety check: Pass | BSD-3-Clause | |
| React Best Practicesryokun6/ryos | 1.3k | — | ~2k | Automated safety check: Pass | MIT | |
| Mobilerun Docs Referencedroidrun/mobilerun | 9.6k | — | ~943 | Automated safety check: Pass | MIT | |
| jscpd Code Migration Trackerkucherenko/jscpd | 6.4k | — | ~5k | Automated safety check: Pass | MIT | |
| Phoneagentrounak/PhoneAgent | 798 | — | ~2.2k | Automated safety check: Pass | MIT | |
| AccessibilityGetStream/stream-chat-react-native | 1.2k | — | ~6.5k | Automated safety check: Pass | Custom licence |
ryokun6/ryos
React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).
droidrun/mobilerun
Answers questions about Mobilerun, the LLM-agent framework for automating Android and iOS devices, by pointing the agent to the right page of its v5 documentation.
kucherenko/jscpd
Measures a code port between languages or frameworks with jscpd's function-level comparison, porting tests before code and tracking what is left unmatched.
rounak/PhoneAgent
Control a connected iPhone, iOS simulator, Android emulator, or Android device from macOS through PhoneAgent's JSON-RPC bridge.
GetStream/stream-chat-react-native
Maintain VoiceOver/TalkBack-focused accessibility in stream-chat-react-native.
atharvnaik1/ipaship-audit
A skill your agent uses when auditing iOS/Android app submissions for compliance with Apple App Store Review Guidelines or Google Play Developer Policies.
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.
keybase/client
Analyzes Chrome or Electron DevTools Performance trace exports with Python scripts to find where render time actually goes, without opening DevTools.
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.
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.
keybase/client
Fetches GitHub Copilot review feedback from inline threads and review bodies, checks each finding against the code and fixes the valid ones.
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.
Categories
Builds the desktop Vite and iOS or Android Metro production bundles and checks them for tree-shaking problems, such as mobile-only modules leaking into the desktop build. jsbundle. A shell filter separates production bundles from the dev and profile ones by their file-name suffixes.
Production Bundle Audit fits situations like: building production bundles to look at their sizes; verifying that mobile-only code is absent from the desktop build; confirming platform flags were inlined in the iOS or Android bundle.
Run `npx skills add keybase/client --skill prod-bundles -a claude-code`. Or copy the skill folder (skill/prod-bundles in keybase/client) into .claude/skills/prod-bundles in your project. Claude Code loads it when a task matches its description.
Run `npx skills add keybase/client --skill prod-bundles -a codex`. Or copy the skill folder (skill/prod-bundles in keybase/client) into .agents/skills/prod-bundles in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add keybase/client --skill prod-bundles -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/prod-bundles, .gemini/skills/prod-bundles, .github/skills/prod-bundles and .opencode/skills/prod-bundles in your project.
Going by SKILL.md and its folder, Production Bundle Audit needs the command-line tools its instructions call (yarn, python3 and bundle). Our summary lists: yarn, run from the shared folder; python3, for the iOS inlining check.
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.
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. Review the folder before installing.
Production Bundle Audit 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.
About 620 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Production Bundle Audit: React Best Practices (ryokun6/ryos, 1.3k stars), Mobilerun Docs Reference (droidrun/mobilerun, 9.6k stars), jscpd Code Migration Tracker (kucherenko/jscpd, 6.4k stars) and Phoneagent (rounak/PhoneAgent, 798 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
keybase (a GitHub organization) maintains it in keybase/client, which has 9,256 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.