react-native-best-practices
by callstackincubatorreact-native-best-practices is a practical React Native performance optimization guide for slow startup, dropped frames, heavy renders, memory leaks, bundle bloat, and animation jank. Use it when you need evidence-backed fixes for Hermes, bridge overhead, FlashList, native modules, or profiling a release regression.
This skill scores 84/100, which means it is a solid directory listing for users who need React Native performance guidance. The repository provides broad, actionable coverage of common optimization tasks—FPS, TTI, bundle size, memory leaks, re-renders, Hermes, bridge overhead, FlashList, and native modules—so an agent can trigger it with less guesswork than a generic prompt and quickly find relevant patterns and commands.
- Strong triggerability: the description explicitly names common React Native performance tasks like FPS, TTI, bundle size, memory leaks, Hermes optimization, and jank/frame-drop debugging.
- Good operational depth: the skill body is large, structured, and supported by 41 reference files with quick patterns, commands, configs, and deep-dive sections.
- High practical leverage: references cover concrete workflows across JS, native, and bundling topics, giving agents reusable procedures instead of vague advice.
- No install command is present in SKILL.md, so setup/adoption is clearer than installation mechanics.
- Some reference files note limits on screenshot/manual interpretation, which means not every workflow is fully automatable by an agent.
Overview of react-native-best-practices skill
What this skill is for
The react-native-best-practices skill is a practical React Native performance optimization guide for diagnosing and fixing real app problems: slow startup, dropped frames, heavy renders, memory leaks, and oversized bundles. It is most useful when you need more than a generic prompt and want a decision-oriented react-native-best-practices guide that helps you choose the right fix for the symptom.
Best-fit readers and use cases
Use this react-native-best-practices skill if you work on React Native or Expo apps and need help with FPS, TTI, Hermes behavior, bridge overhead, FlashList, native modules, or animation jank. It is a strong fit for engineers reviewing perf regressions, optimizing a release candidate, or writing a scoped prompt for react-native-best-practices for Performance Optimization.
What makes it different
This repo is structured for fast lookup plus deeper follow-up: quick patterns, config snippets, commands, and deeper references for topics like bundle analysis, threading, memory leaks, and native profiling. That makes it more actionable than a loose prompt because it points the agent toward concrete evidence, not just abstract advice.
How to Use react-native-best-practices skill
Install and enable it
Use the directory’s install flow for react-native-best-practices install in your agent environment, then invoke it with a task that names the symptom and platform. The repo’s default prompt is: Use $react-native-best-practices to diagnose and improve React Native performance. If your toolchain supports skill installation by package, the repository path is callstackincubator/agent-skills and the skill lives at skills/react-native-best-practices.
Give the skill the right problem statement
Good react-native-best-practices usage starts with a narrow target: platform, symptom, and constraints. For example, ask for “reduce frame drops in a Reanimated bottom sheet on Android with Hermes” instead of “improve app performance.” Include what changed, what is slow, and what you have already measured. That lets the skill map your issue to the right references faster.
Read these files first
Start with SKILL.md, then check POWER.md, agents/openai.yaml, and the most relevant reference files for your issue. For JS bundle work, prioritize references/bundle-analyze-js.md, references/bundle-barrel-exports.md, and references/bundle-code-splitting.md. For runtime jank or render issues, read references/js-measure-fps.md, references/js-profile-react.md, and references/js-lists-flatlist-flashlist.md. For native startup and memory work, inspect references/native-measure-tti.md, references/native-threading-model.md, and references/native-memory-leaks.md.
Turn a rough goal into a useful prompt
A strong prompt for this skill includes: app type, RN version, platform, metric, repro path, and any profiler output. Example: “Audit our React Native app on iOS 17, RN 0.78, Hermes enabled. TTI regressed after adding three navigation-heavy screens; inspect bundle size, startup imports, and native initialization order. Recommend the smallest set of changes with verification steps.” This kind of prompt helps react-native-best-practices usage produce targeted, testable output.
react-native-best-practices skill FAQ
Is this only for performance work?
Yes, that is the main fit. The react-native-best-practices skill is about diagnosing and improving performance-related issues, not general app architecture, feature design, or UI copy. If your task is unrelated to latency, memory, bundle size, or rendering cost, a generic React Native prompt is usually enough.
Does it replace normal debugging or profiling?
No. It improves the quality of the investigation, but you still need real signals: profiler traces, bundle reports, logs, and reproduction steps. The skill helps decide what to inspect and what tradeoffs matter, but it cannot infer your app’s bottleneck without evidence.
Is it beginner-friendly?
Yes, if you want a guided react-native-best-practices guide rather than a theory-heavy document. Beginners get the most value when they paste a concrete symptom and ask for a ranked checklist. Advanced users benefit more from the repository’s specific references and optimization paths.
When should I not use it?
Do not use it as a substitute for product decisions, backend latency analysis, or unrelated JavaScript troubleshooting. It is also a poor fit when you only need a quick code style answer with no performance context. In those cases, the skill adds overhead without improving the result.
How to Improve react-native-best-practices skill
Lead with measurable symptoms
The best outputs come from inputs that mention what is broken, where, and how you know. Say “startup time increased by 1.8s after adding analytics SDK initialization” or “scrolling stutters in a FlashList with 200 rows and image thumbnails.” The more precise the symptom, the better react-native-best-practices for Performance Optimization can narrow the search space.
Include environment constraints
State whether you use Hermes, Expo, Reanimated, Fabric, Turbo Modules, or a custom native stack. Also mention version constraints like RN 0.78 versus 0.79+, because some recommendations change by release. This matters for install decisions, startup behavior, and whether a fix is worth the complexity.
Ask for evidence-backed fixes
Request recommendations with validation steps, not just ideas. For example: “For each suggestion, tell me what metric should improve, how to verify it, and what regressions to watch for.” This reduces vague advice and makes the output easier to turn into tickets or a PR plan.
Iterate from the first answer
If the first result is broad, follow up with profiler traces, bundle analyzer output, or a minimal code sample. Then ask the skill to rank likely causes and separate high-impact changes from low-risk cleanup. That iterative loop is where react-native-best-practices becomes most useful: it converts rough intuition into a concrete optimization plan.