Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/anilburcu/claude-code-react-native/rn-performancenpx skills add AnilBurcu/claude-code-react-native --skill rn-performancegit clone --depth 1 https://github.com/AnilBurcu/claude-code-react-nativeWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00059 | $0.00912 |
| Opus 5 | $0.00030 | $0.00456 |
| Sonnet 5 | $0.00012 | $0.00182 |
| Haiku 4.5 | $0.00006 | $0.00091 |
Grade A, and why
rn-performance scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 52 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Performance triage
Two rules before touching code
- Profile release builds. Dev mode runs a different engine configuration with dev-only checks; its performance characteristics are fiction.
npx expo run:ios --configuration Release(or the Android equivalent) before believing any measurement. - Name the thread. Everything slow is one of: JS thread saturated, UI thread saturated, or waiting on IO. The fix lives on the thread that is busy, and the profiler tells you which one it is; guessing does not.
Lists
- Long scrollable content belongs in FlashList (or at minimum FlatList), never a ScrollView with
.map(). ScrollView mounts everything immediately; past a few dozen items that is the entire problem. - renderItem must be a stable component reference, not an inline closure creating new component trees per render. Extract it, memo it, and keep item props primitive where possible.
- keyExtractor must return stable ids. Index keys plus insertions equals recycled rows showing the wrong content and pointless re-renders.
- Images inside rows: fixed dimensions, a recycling-aware image component, and correctly sized source assets. Decoding a 4000px image into a 80px avatar slot burns CPU and memory for nothing.
- Measure list health with the blank-area metric while scrolling fast, and by watching JS FPS in the perf monitor, not by feel on a simulator. Simulators lie in both directions.
Re-renders
- Subscribe narrowly. With zustand and friends, select the smallest slice (
useStore(s => s.count)), never the whole store object. With context, split fast-changing values out of the provider that wraps the world. - memo the expensive leaves (list rows, chart bodies, anything with heavy trees), then make sure their props are actually stable, because memo with a fresh object or closure prop every render is a no-op with extra steps.
- useCallback and useMemo are for identity stability where a memoized child or an effect depends on it, not decoration for every function in the file.
- To find offenders, use the React DevTools profiler and look for wide flame bars re-rendering on interactions that should be local. One misplaced subscription at the screen root regularly accounts for the whole problem.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 52 lines · 59 tokens per session scan A ce90fa472964
rn-performance is a skill published in the GitHub repository AnilBurcu/claude-code-react-native (3 stars, last pushed 1mo ago), licensed MIT. It adds 59 tokens to every session and 912 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
authoring-video-templates
Use when creating or editing a video template JSON (the template descriptor), adding or changing sections/filters/maps/variables/transitions/looks/motion/audio/layers, or debugging template validation errors in ffmpeg-video-composer.
core-architecture-patterns
Use when adding a segment type, platform adapter, editor manager, core service, or descriptor effect (look/grade/motion/section-audio field) in packages/ffmpeg-video-composer, or when wiring new dependencies into the tsyringe container.
ondevice-ffmpeg-engine
Use when building, modifying, or consuming the on-device FFmpeg engine — the Rust crate packages/ffmpeg-engine, the leclap-ffmpeg Expo native module, the run/probe/version/cancel API, the uniffi bindings, build-engine.sh, or the FFmpeg-from-source toolchain in scripts/ffmpeg.
cross-platform-ffmpeg
Use when working with FFmpeg across Node/Static/WASM, the PlatformBridge, the FFmpeg detection/fallback chain, or browser/React Native runtime constraints in ffmpeg-video-composer.
monorepo-dev-workflow
Use when building, testing, linting, formatting, typechecking, or running any app or package in the ffmpeg-video-composer monorepo, or when looking for the right pnpm/vp command.
module-add
Wire a backend or infrastructure module (auth, database, payments, email, file storage, deploy config) into an already-scaffolded app. Reads .workflow/meta.json#stack for the chosen tech (better-auth, drizzle+neon, stripe, resend, vercel, etc.) and modifies the codebase at the project root to install + configure the…