Agent skill

Argent React Native App Workflow

by bbplayer-app in bbplayer-app/BBPlayer

Step-by-step workflows for developing or debugging React Native apps on iOS simulator or Android emulator.

MITAuto-check passedMobile

Install Argent React Native App Workflow

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

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

GitHub CLI
$ gh skill install bbplayer-app/BBPlayer argent-react-native-app-workflow --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-app-workflow .claude/skills/argent-react-native-app-workflow && 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-app-workflow
GitHub stars
1.1k
Token cost
~5.2k tokens
SKILL.md length
1,780 words
Files
1
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

Step-by-step workflows for developing or debugging React Native apps on iOS simulator or Android emulator.

  • Works in 5 steps: Starting the React Native App → Ensuring / Debugging Metro → Build / Install / Retry (React Native &… → …
  • Starting the app
  • SKILL.md covers 1. Starting the React Native App, 2. Ensuring / Debugging Metro, 3. Build / Install / Retry… and 4. Runtime Problems in the App, plus 3 more sections
  • Calls npx, npm and yarn

What it does

Argent React Native App Workflow is an agent skill from bbplayer-app/BBPlayer. Step-by-step workflows for developing or debugging React Native apps on iOS simulator or Android emulator. Use when starting the app, debugging Metro, fixing builds, diagnosing runtime errors, or running tests.

Its SKILL.md is about 5.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

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

When your agent uses it

  • Starting the app
  • Debugging Metro
  • Diagnosing runtime errors

Example prompts

  • “/argent-react-native-app-workflow”

Requirements

  • Node.js

Workflow steps

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

  1. Starting the React Native App
  2. Ensuring / Debugging Metro
  3. Build / Install / Retry (React Native & iOS Native)
  4. Runtime Problems in the App
  5. Testing the App

What it can do on your machine

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

    Shell commands in SKILL.md call:

    • npx
    • npm
    • yarn
    • adb

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, npm and yarn, which can reach the network depending on how they are called.

    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 App Workflow loads about 5.2k tokens when it runs. Until then it costs about 61 tokens; SKILL.md has 1,780 words of instructions outside code blocks.

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

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 1e1ae9f, republished under its MIT licence (© bbplayer-app). 1,780 words, ~5,194 tokens.

Download SKILL.mdSave it as .claude/skills/argent-react-native-app-workflow/SKILL.md (or your agent's skills folder).
name
argent-react-native-app-workflow
description
Step-by-step workflows for developing or debugging React Native apps on iOS simulator or Android emulator. Use when starting the app, debugging Metro, fixing builds, diagnosing runtime errors, or running tests.

Physical iPhone (kind: "device"): Metro debugging and profiling tools reject it. Use a simulator.

1. Starting the React Native App

1.1 Explore Configuration (MANDATORY — Do This First)

Before running commands, read the project's build and run configuration from the argent-environment-inspector subagent result.

Do NOT default to npx react-native start or npx react-native run-ios without first checking for custom scripts and workflows.

Manual fallback (if neither the agent nor the tool is available): read ALL package.json scripts — look for custom scripts like start:local, start:dev, ios, build:ios, flavors, etc. Custom scripts take priority over default commands. Also check metro.config.js for non-default port or watchFolders. For iOS builds, prefer opening .xcworkspace over .xcodeproj (CocoaPods generates the workspace).

If the project structure is convoluted, ask the user before proceeding.

Remember the workflow: Once you discover the project's build/run workflow, save it to project memory so you don't need to re-discover it each time.

Checklist before start:

  • node_modules present (if not: npm install or yarn)
  • For iOS: ios/Podfile exists; if ios/Pods missing or stale, run cd ios && pod install && cd ..
  • No conflicting Metro on default port (see 1.2)
1.2 Start Metro
  1. Check whether metro is already running on port found in configuration and if it is - do not start another server. Refer to point 2.1.

  2. Use the project's custom start script if one exists (e.g. npm run start:local, yarn start:dev). Fall back to default commands if no custom scripts are defined:

    bash
    npx react-native start

    Optional: npx react-native start --reset-cache if cache issues are suspected.

  3. Verify Metro is ready: use the debugger-status tool. It returns a status result instead of erroring: status: "connected" or status: "not_connected" with reason: "no_app_connected" both mean Metro is up (the app just hasn't attached yet); reason: "metro_not_running" means Metro is not reachable — follow the result's guidance.

  4. Projects with flavors or custom configs: Use project-specific start script if present (e.g. npm run start:local), and start Metro before running the app.

1.3 Run the App

In a separate terminal (Metro keeps running in the first):

Use the project's custom build/run script if one exists (e.g. npm run ios, npm run android, yarn ios:debug). Only fall back to the defaults below if no custom scripts are defined.

Pass the target device explicitly — derive it from list-devices (see <device_selection_rule>):

bash
npx react-native run-ios --simulator="<name>"        # iOS (or --udid <UDID>)
npx react-native run-android --deviceId=<adb-serial> # Android

Android only: after install, run adb -s <serial> reverse tcp:8081 tcp:8081 so the emulator/device can reach Metro on your host. Repeat if the device restarts or adb drops.

Agent checklist:

  • Metro is already running and shows "ready"
  • Command run from project root
  • If the device isn't booted yet: use boot-device with the iOS udid or Android avdName. Refer to the argent-ios-simulator-setup / argent-android-emulator-setup skill.
  • Android: adb -s <serial> reverse tcp:8081 tcp:8081 done.

2. Ensuring / Debugging Metro

2.1 Check for Existing Metro

Before starting Metro, avoid "port already in use" errors. Default port to check is :8081, infer the port from documentation:

bash
lsof -i :PORT
  • No output → Port free; safe to start Metro.
  • Output with PID → Another process is using the port.

Use the debugger-status tool to check whether the process on that port is actually a Metro server — it returns a structured result, not an error. status: "connected" or reason: "no_app_connected" → the process is Metro. reason: "metro_not_running" while lsof shows a listener → the port is occupied by something that is not Metro; the result's detail field shows what the process answered (Metro at port ... is not running (got: ...)). In that case ask the user whether you may kill the process.

To kill a Metro process, use the stop-metro tool (requires user confirmation).

2.2 Confirm Correct Server Connection
  • App must point at the same host/port as the running Metro. Default: same machine, port 8081.
  • iOS Simulator: By default uses localhost; no extra config needed for same-machine Metro.

Verify Metro is reachable: use the debugger-status tool. reason: "metro_not_running" means Metro did not answer on that port — start it (§2.1); "no_app_connected" means Metro answered but the app has not attached (§2.3). Any other reason: follow the result's guidance (it does not by itself prove Metro is up).

2.3 Reload the App (Ensure New Bundle)

After code or config changes, the app must load the new bundle:

MethodHow
Reload toolUse the debugger-reload-metro tool
Restart appUse the restart-app tool, or kill the app in simulator and run npx react-native run-ios again

Agent checklist:

  • Only one Metro process (no duplicate on port)
  • App was started after Metro was ready
  • When needing to reload: refer to 2.3

3. Build / Install / Retry (React Native & iOS Native)

3.1 When Build Fails (e.g. xcodebuild exit code 65)

Order of operations (simplest first):

  1. Clean build folder, then retry the build command
  2. Clear caches and reinstall dependencies: reset Metro cache, watchman watch-del-all, remove node_modules + lockfile, npm install, then cd ios && rm -rf build Pods Podfile.lock && pod install --repo-update
  3. CocoaPods issues: pod deintegrate then pod install --repo-update
  4. Open ios/*.xcworkspace in Xcode for detailed errors in the Report navigator
3.2 When to Ask the User

After 2-3 failed build or run attempts, STOP and ask the user for guidance. The user may know about required env vars, Xcode version requirements, custom build configurations, monorepo-specific setup, or required external services.

If the project structure is convoluted and the correct build approach is not obvious, ask the user early rather than guessing.

3.3 Saving Build Workflow for Later

Once you discover the correct build/run workflow for a project, save it to project memory. Capture: commands to start Metro, commands to build/run the app, and any required environment setup.

3.4 When to Reinstall vs Refresh
SituationAction
JS/React only changedUse debugger-reload-metro tool. No rebuild.
Native code or pod install / project config changedRebuild: npx react-native run-ios (Metro can stay running).
node_modules or package.json changednpm install, then if native deps changed run cd ios && pod install. Then rebuild.
App needs reinstalling from .app pathUse reinstall-app tool with UDID, bundle ID, and .app path.
Persistent native build errorsFull clean + reinstall (step 2 above).
3.5 Device Control
ActionTool / Command
List deviceslist-devices tool (iOS + Android)
Boot an iOS simulatorboot-device tool with udid
Boot an Android emulatorboot-device tool with avdName
Launch an applaunch-app tool (pass device id + bundle id / package name)
Restart an apprestart-app tool (pass device id + bundle id / package name)
Open a URL / deep linkopen-url tool (pass device id + URL)
Rotate devicerotate tool
Stop simulator serverstop-simulator-server tool (iOS UDID or Android serial — one device)
Stop all simulator serversstop-all-simulator-servers tool — pass devices: [...] to scope the teardown to this session's devices (an unscoped call also tears down other agents' devices; use it only for a machine-wide cleanup)

For full simulator setup workflow, refer to the argent-ios-simulator-setup skill.


Show full SKILL.md (673 more words)Show less

4. Runtime Problems in the App

4.1 Where to Look
Problem typeTool / Where to look
JavaScript errors / logsUse debugger-log-registry to get a summary and log file path, then Grep/Read to search. If it returns status: "not_connected", no log file is returned — follow its guidance to reconnect first.
React component hierarchyUse debugger-component-tree tool for a text tree, or debugger-inspect-element at specific logical pixel coordinates (not normalized 0-1).
Visual state of the appUse screenshot tool to capture the current screen, but prefer describe or debugger-component-tree for actual navigation and target discovery. If a permission prompt or system-owned modal overlay is not exposed reliably, then fall back to screenshot.
Evaluate JS in the appUse debugger-evaluate tool to run JavaScript in the app's runtime.
Native crashes / native stacknpx react-native log-ios or iOS Simulator: Debug → Open System Log.
Build/runtime configmetro.config.js, babel.config.js, package.json scripts, ios/Podfile.

For comprehensive Metro debugging workflows (component inspection, console logs, JS evaluation), refer to the argent-metro-debugger skill.

4.2 JS Console Logs (Log Registry)

Logs are written to a flat log file on disk under ~/.argent/tmp/. Use the log-registry → grep pattern instead of reading logs inline.

For the full workflow, flat entry format, and grep examples, see argent-metro-debugger skill §5.

4.3 Do not try to use the DevMenu in React Native apps by default.

Use the argent tools instead.


5. Testing the App

Check the argent-environment-inspector result for test commands. For interactive UI testing with automatic screenshot verification, use the argent-test-ui-flow skill.

  • Unit tests: Look for Jest in package.json ("test": "jest", jest config). Run: npm test or yarn test.
  • E2E: Look for Detox (.detoxrc.js or similar), or other E2E config. Dependencies: detox, detox-cli, and for iOS often applesimutils.
  • Visible UI changes: Use argent-test-ui-flow for manual QA. For screenshot-diff rules and parameters, follow the argent-screenshot-diff skill. Use it when stable before/after screenshots add meaningful pixel-visible evidence.
  • UI flow testing: For interactive UI testing with automatic screenshot verification, refer to the argent-test-ui-flow skill.
5.2 Running Tests (Typical)

If the user's intent is ambiguous (run existing tests, write new tests, or find missing coverage), clarify before proceeding.

  • Jest: npm test or npx jest.
  • Detox (example):
    • Build: detox build --configuration ios.sim.release (or debug).
    • Run: detox test --configuration ios.sim.release.
    • Ensure simulator is booted and not used by another process.
5.3 Agent Testing Checklist
  • Read package.json and test config (Jest, Detox, etc.).
  • If E2E: confirm simulator/device and build config.
  • If unclear: clarify whether to use existing workflows or write new tests.

Quick Reference: Tools & Commands

GoalTool / Command
Check port 8081lsof -i :8081
Kill Metrostop-metro tool
Start Metronpx react-native start
Start Metro (reset cache)npx react-native start --reset-cache
Run iOS appnpx react-native run-ios
Run Android appnpx react-native run-android
List deviceslist-devices tool (iOS + Android)
Boot a deviceboot-device tool (pass udid for iOS or avdName for Android)
Take screenshotscreenshot tool
Compare visible UI changesscreenshot-diff tool; follow the argent-screenshot-diff skill for baseline/current capture choices
Describe screen (a11y tree)describe tool for normal app screens and in-app modals; use screenshot only when permission/system overlays are not exposed reliably
Read JS console logsdebugger-log-registry tool
Reload JS bundledebugger-reload-metro tool
Check Metro statusdebugger-status tool
Inspect React component treedebugger-component-tree tool
Run JS in appdebugger-evaluate tool
iOS native logsnpx react-native log-ios
Android native logsnpx react-native log-android or adb -s <serial> logcat
Clean + reinstall (nuclear)See §3.1 step 3

SkillWhen to use
argent-ios-simulator-setupInitial iOS simulator boot and connection setup
argent-android-emulator-setupInitial Android emulator boot and connection setup
argent-device-interactTapping, swiping, typing, hardware buttons, gestures on the simulator/emulator
argent-metro-debuggerJS-runtime CDP debugging (Metro on iOS / Android; the four ported tools also drive Chromium/CDP apps): component inspection, console logs, JS evaluation
argent-react-native-profilerProfiling performance, finding re-render issues, CPU hotspots
argent-test-ui-flowInteractive UI testing with automatic screenshot verification after each action

Ask the user before running tests: confirm which test suite (unit, E2E, or both), whether to use existing CI commands, and whether they want you to run existing tests, write new ones, or explore test cases yourself.

© 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

Just SKILL.md in .agents/skills/argent-react-native-app-workflow of bbplayer-app/BBPlayer.

Open the folder on GitHubat commit 1e1ae9f

Compare with similar skills

Argent React Native App Workflow 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 App Workflow compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Argent React Native App Workflow this skillbbplayer-app/BBPlayer1.1k—~5.2kAutomated safety check: PassMIT
Upgrading React Nativecallstackincubator/agent-skills1.7k1 repos~1.1kAutomated safety check: PassMIT
Nitro Sound Workflowshyochan/react-native-nitro-sound961—~1.2kAutomated safety check: PassMIT
Nitro Sound Workflowshyochan/react-native-nitro-sound961—~285Automated safety check: PassMIT
Rnn Codebasewix/react-native-navigation13k—~2kAutomated safety check: PassMIT
Expo Tailwind SetupCherryHQ/cherry-studio-app4k8 repos~3kAutomated safety check: PassMIT

Similar skills

  • Upgrading React Native

    callstackincubator/agent-skills

    Official

    Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving CocoaPods and…

    1.7k GitHub starsUsed in 1 repo~1.1k tokens
    MobileAuto-check passed
  • Nitro Sound Workflows

    hyochan/react-native-nitro-sound

    A skill your agent uses for react-native-nitro-sound repository work that should follow the project workflows for PR review, code audit, knowledge compilation, full verification, iOS or Android…

    961 GitHub stars~1.2k tokensUpdated 8 days ago
    MobileAuto-check passed
  • Nitro Sound Workflows

    hyochan/react-native-nitro-sound

    A skill your agent uses for react-native-nitro-sound repository work that should follow the project slash-command workflows for PR review, code audit, knowledge compilation, full verification, iOS…

    961 GitHub stars~285 tokensUpdated 8 days ago
    MobileAuto-check passed
  • Rnn Codebase

    wix/react-native-navigation

    Official

    Navigate and work with the react-native-navigation (RNN) codebase.

    13k GitHub stars~2k tokensUpdated yesterday
    MobileAuto-check passed
  • Expo Tailwind Setup

    CherryHQ/cherry-studio-app

    Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

    4k GitHub starsUsed in 8 repos~3k tokens
    MobileAuto-check passed
  • Screenmap

    aleqsio/screenmap

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

    239 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 yesterday
    Auto-check passed
  • Optimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues.

    1.1k GitHub stars~1.3k tokensUpdated yesterday
    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 yesterday
    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 yesterday
    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 yesterday
    Auto-check passed

Categories

Questions about Argent React Native App Workflow

What does Argent React Native App Workflow do?

Step-by-step workflows for developing or debugging React Native apps on iOS simulator or Android emulator. Argent React Native App Workflow is an agent skill from bbplayer-app/BBPlayer. Step-by-step workflows for developing or debugging React Native apps on iOS simulator or Android emulator.

When should I use Argent React Native App Workflow?

Argent React Native App Workflow fits situations like: starting the app; debugging Metro; diagnosing runtime errors.

How do I install Argent React Native App Workflow in Claude Code?

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

How do I install Argent React Native App Workflow in Codex?

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

Can I use Argent React Native App Workflow 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-app-workflow -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-app-workflow, .gemini/skills/argent-react-native-app-workflow, .github/skills/argent-react-native-app-workflow and .opencode/skills/argent-react-native-app-workflow in your project.

What does Argent React Native App Workflow need to run?

Going by SKILL.md and its folder, Argent React Native App Workflow needs the command-line tools its instructions call (npx, npm, yarn and adb). Our summary lists: Node.js.

Does Argent React Native App Workflow access the network?

SKILL.md contains no URLs. Its commands use npx and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Argent React Native App Workflow 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 App Workflow use?

Argent React Native App Workflow 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 App Workflow use?

About 5.2k tokens (SKILL.md is roughly 21k 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 Argent React Native App Workflow?

Skills that share tags, products or a category with Argent React Native App Workflow: Upgrading React Native (callstackincubator/agent-skills, 1.7k stars), Nitro Sound Workflows (hyochan/react-native-nitro-sound, 961 stars), Nitro Sound Workflows (hyochan/react-native-nitro-sound, 961 stars) and Rnn Codebase (wix/react-native-navigation, 13k 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 App Workflow?

bbplayer-app (a GitHub organization) maintains it in bbplayer-app/BBPlayer, which has 1,126 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 6, 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.