New: 98,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

Argent React Native Optimization

by bbplayer-app in bbplayer-app/BBPlayer

Optimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues.

MITAuto-check passedMobile

Install Argent React Native Optimization

skills CLI
$ npx skills add bbplayer-app/BBPlayer --skill argent-react-native-optimization -a claude-code

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

GitHub CLI
$ gh skill install bbplayer-app/BBPlayer argent-react-native-optimization --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/bbplayer-app/BBPlayer.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/argent-react-native-optimization .claude/skills/argent-react-native-optimization && 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
argent-react-native-optimization
GitHub stars
1.1k
Token cost
~1.3k tokens
SKILL.md length
563 words
Files
4 (incl. references)
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

Optimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues.

  • Works in 4 steps: Lint sweep → Semantic sweep → Visual profiling → …
  • The app feels slow
  • SKILL.md covers Rules, Pipeline and App-wide optimization
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Argent React Native Optimization is an agent skill from bbplayer-app/BBPlayer. Optimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues. Entry-point for all performance work. Use when the app feels slow, user asks to optimize, fix re-renders, reduce jank, or improve startup. Delegates to argent-react-native-profiler for measurement.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/fix-reference.md`, `references/lint-rules.md` and `references/semantic-checklist.md`).

It sits in Mobile, covering Cross-platform mobile apps, Performance optimization and Mobile performance. It works with React Native and React. The repository describes itself as: 一款简约、好用的 BiliBili 音乐播放器。 The licence is MIT.

When your agent uses it

  • The app feels slow
  • User asks to optimize
  • Improve startup

Example prompts

  • “Use the argent-react-native-optimization skill to optimiz a React Native app by profiling first to find real bottlenecks, then sweeping for…”
  • “/argent-react-native-optimization”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Lint sweep
  2. Semantic sweep
  3. Visual profiling
  4. Verify no regressions

What it can do on your machine

Read from SKILL.md and the folder at commit 7b98d88. 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

    No scripts in the folder and no shell commands in SKILL.md.

    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

Argent React Native Optimization loads about 1.3k tokens when it runs, and up to ~3.1k if it reads all its reference files. Until then it costs about 85 tokens; SKILL.md has 563 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~85
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.1k

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from bbplayer-app/BBPlayer at commit 7b98d88, republished under its MIT licence (© bbplayer-app). 563 words, ~1,271 tokens.

Download SKILL.mdSave it as .claude/skills/argent-react-native-optimization/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
argent-react-native-optimization
description
Optimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues. Entry-point for all performance work. Use when the app feels slow, user asks to optimize, fix re-renders, reduce jank, or improve startup. Delegates to argent-react-native-profiler for measurement.

Rules

  • Do not apply shotgun optimizations. Measure first, define what "good enough" looks like (target metric + threshold), fix the top offender, re-measure honestly.
  • Quick scan — react-profiler-renders for a live render count table. Identifies hot components instantly.
  • Deep measure — load argent-react-native-profiler skill. react-profiler-start → interact → react-profiler-stop → react-profiler-analyze.
  • Inspect — react-profiler-component-source per finding. react-profiler-fiber-tree to trace component ancestry and render cost.
  • Verify correctness - before fixing, recollect information from steps above and make a logical conclusion whether the approach is worth undertaking.
  • Fix — apply one fix. Validate with debugger-evaluate before committing.
  • Re-measure — report whether the target metric improved, regressed, or stayed flat. Check for regressions in other areas. If no net benefit or unacceptable tradeoffs, revert.
  • Profile for discovery, not only verification. Use the profiler to find issues static analysis missed, not only to confirm fixes.
  • One fix per cycle for architectural changes. Mechanical batch fixes (inline styles, index keys) can be grouped — re-profile once after the batch. When the measurement involves device interaction, record it as a flow (argent-create-flow skill) before the first run so all subsequent cycles replay identical steps.
  • React Compiler: if react-profiler-analyze reports reactCompilerEnabled: true, do NOT propose useCallback/useMemo/React.memo unless you confirmed compiler bail-out via react-profiler-fiber-tree (absent useMemoCache).
  • Sub-agents: Phases 1–2 dispatch sub-agents — one per file for lint results, one per checklist item for semantic. Sub-agents CANNOT touch the device - all profiling and E2E verification must happen in the main agent.

Pipeline

Lint and semantic sweeps catch deterministic issues cheaply. Profiling finds runtime bottlenecks that static analysis misses. Do both.

Copy this checklist into your TODO list:

Optimization Progress:
- [ ] Phase 1: Lint sweep (deterministic — catch mechanical issues without a running app)
- [ ] Phase 2: Semantic sweep (judgment — memoization, lists, animations, etc.)
- [ ] Phase 3: Baseline profile (find real bottlenecks, fix top offenders)
- [ ] Phase 4: Verify no regressions (crashes, errors, red screens)
Phase 1: Lint sweep

Run ESLint once at the project root with a comprehensive RN performance ruleset. Dispatch sub-agents to fix results — one per file. See references/lint-rules.md for ruleset and procedure.

Phase 2: Semantic sweep

Review each area requiring judgment — memoization, list rendering, animations, async patterns, effect cleanup, state hygiene, context architecture. Dispatch one sub-agent per checklist item. See references/semantic-checklist.md for full checklist.

Show full SKILL.md (244 more words)Show less
Phase 3: Visual profiling
  1. Load argent-react-native-profiler skill, start dual profiling
  2. Exercise key user flows (navigate screens the user specified, or all major flows)
  3. Analyze with react-profiler-analyze + native-profiler-analyze + profiler-combined-report
  4. Cross-reference profiling results with Phase 1–2 findings
  5. Fix highest-impact issues. Re-profile after architectural changes; batch mechanical fixes. If a recorded flow breaks after a fix (e.g., UI layout changed), follow argent-create-flow skill to repair the flow rather than silently discarding it.
Phase 4: Verify no regressions

Navigate every screen and UI flow within scope, confirm each renders without errors. If no scope was specified, verify the entire app — cover all reachable screens via argent-device-interact. Use debugger-log-registry to check for runtime errors (if it returns status: "not_connected" there is no log file — follow its guidance to reconnect first) and take screenshots to check for red/yellow error screens. Check for regressions introduced by fixes (e.g., fewer re-renders but higher CPU, or new jank in a different screen). Main agent only.

App-wide optimization

  1. Phase 1: run lint centrally (one command), dispatch sub-agents to fix per-file in parallel
  2. Phase 2: one sub-agent per checklist item for semantic sweep
  3. Phase 3: main agent profiles top offending screens; fixes architectural issues top-down
  4. Phase 4: main agent navigates all screens to verify nothing crashes

After the entire run, run lint again to verify no new issues were introduced with your changes. This also helps ensure you haven't missed any issues which could've been fixed.

© bbplayer-app, MIT. 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 (references) in .agents/skills/argent-react-native-optimization of bbplayer-app/BBPlayer.

  • SKILL.md
  • references/fix-reference.md
  • references/lint-rules.md
  • references/semantic-checklist.md

Open the folder on GitHubat commit 7b98d88

Compare with similar skills

Argent React Native Optimization 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.

Argent React Native Optimization compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Argent React Native Optimization this skillbbplayer-app/BBPlayer1.1k—~1.3kAutomated safety check: PassMIT
PerformanceSidiora-Labs/centra-llm-agents115—~778Automated safety check: PassCustom licence
React Native Best Practicescallstackincubator/agent-skills1.7k4 repos~3.1kAutomated safety check: PassMIT
React Native Experttech-leads-club/agent-skills7k—~3.2kAutomated safety check: PassCC-BY-4.0
React Native Best Practicesvercel-labs/openreview1.7k17 repos~1.1kAutomated safety check: PassMIT
React Devtoolssanity-io/sanity6.4k3 repos~2.1kAutomated safety check: PassMIT

Similar skills

  • Performance

    Sidiora-Labs/centra-llm-agents

    Performance optimization guidelines for React/React Native applications.

    115 GitHub stars~778 tokensUpdated 20 days ago
    MobileAuto-check passed

  • React Native Best Practices

    callstackincubator/agent-skills

    Official

    Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations.

    1.7k GitHub starsUsed in 4 repos~3.1k tokens
    MobileAuto-check passed

  • React Native Expert

    tech-leads-club/agent-skills

    Guides React Native and Expo work for cross-platform apps: Expo Router navigation, fast lists, Reanimated animation, platform-specific code and project structure.

    7k GitHub stars~3.2k tokensUpdated 18 days ago
    MobileAuto-check passed

  • React Native Best Practices

    vercel-labs/openreview

    Official

    A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.

    1.7k GitHub starsUsed in 17 repos~1.1k tokens
    MobileAuto-check passed

  • React Devtools

    sanity-io/sanity

    Official

    React DevTools CLI for AI agents. An agent skill from sanity-io/sanity.

    6.4k GitHub starsUsed in 3 repos~2.1k tokens
    MobileAuto-check passed

  • Screenmap

    aleqsio/screenmap

    Generate a visual navigation map of an Expo / React Native or NativeScript app.

    242 GitHub stars~7.2k tokensUpdated 3 days ago
    MobileAuto-check passed

More from bbplayer-app/BBPlayer

All 19 skills in this repo

  • Expo Module

    bbplayer-app/BBPlayer

    Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript).

    1.1k GitHub starsUsed in 3 repos~1.4k tokens
    Auto-check passed

  • Argent Metro Debugger

    bbplayer-app/BBPlayer

    Debug a JS runtime via CDP using argent debugger tools. An agent skill from bbplayer-app/BBPlayer.

    1.1k GitHub stars~3.4k tokensUpdated today
    Auto-check passed

  • Argent Lens

    bbplayer-app/BBPlayer

    Propose multiple visual design variants for on-screen elements and let the human pick in the Argent Lens window.

    1.1k GitHub stars~2.7k tokensUpdated today
    Auto-check passed

  • Argent QA Flows

    bbplayer-app/BBPlayer

    Create repeatable QA regression E2E tests as Argent flows from test cases, tickets, or acceptance criteria.

    1.1k GitHub stars~3.2k tokensUpdated today
    Auto-check passed

  • Argent Screenshot Diff

    bbplayer-app/BBPlayer

    Compare saved or live app screenshots with the argent screenshot-diff tool.

    1.1k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Argent Device Interact

    bbplayer-app/BBPlayer

    Interact with an iOS simulator, Android emulator, or Chromium (CDP) app using argent MCP tools.

    1.1k GitHub stars~6k tokensUpdated today
    Auto-check: warnings

Works with

Categories

Questions about Argent React Native Optimization

What does Argent React Native Optimization do?

Optimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues. Argent React Native Optimization is an agent skill from bbplayer-app/BBPlayer. Optimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues.

When should I use Argent React Native Optimization?

Argent React Native Optimization fits situations like: the app feels slow; user asks to optimize; improve startup.

How do I install Argent React Native Optimization in Claude Code?

Run `npx skills add bbplayer-app/BBPlayer --skill argent-react-native-optimization -a claude-code`. Or copy the skill folder (.agents/skills/argent-react-native-optimization in bbplayer-app/BBPlayer) into .claude/skills/argent-react-native-optimization in your project. Claude Code loads it when a task matches its description.

How do I install Argent React Native Optimization in Codex?

Run `npx skills add bbplayer-app/BBPlayer --skill argent-react-native-optimization -a codex`. Or copy the skill folder (.agents/skills/argent-react-native-optimization in bbplayer-app/BBPlayer) into .agents/skills/argent-react-native-optimization in your project. Codex loads it when a task matches its description.

Can I use Argent React Native Optimization 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 bbplayer-app/BBPlayer --skill argent-react-native-optimization -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/argent-react-native-optimization, .gemini/skills/argent-react-native-optimization, .github/skills/argent-react-native-optimization and .opencode/skills/argent-react-native-optimization in your project.

What does Argent React Native Optimization need to run?

SKILL.md names no scripts, command-line tools or credentials: Argent React Native Optimization is instructions for the agent only.

Does Argent React Native Optimization 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 Argent React Native Optimization 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. Review the folder before installing.

What licence does Argent React Native Optimization use?

Argent React Native Optimization is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Argent React Native Optimization use?

About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.9k tokens, read only when the agent opens those files.

What are the alternatives to Argent React Native Optimization?

Skills that share tags, products or a category with Argent React Native Optimization: Performance (Sidiora-Labs/centra-llm-agents, 115 stars), React Native Best Practices (callstackincubator/agent-skills, 1.7k stars), React Native Expert (tech-leads-club/agent-skills, 7k stars) and React Native Best Practices (vercel-labs/openreview, 1.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Argent React Native Optimization?

bbplayer-app (a GitHub organization) maintains it in bbplayer-app/BBPlayer, which has 1,143 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 8, 2026.

Source: bbplayer-app/BBPlayer on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.