Install the "argent-react-native-app-workflow" agent skill from https://github.com/bbplayer-app/BBPlayer/tree/dev/.agents/skills/argent-react-native-app-workflow into .claude/skills/argent-react-native-app-workflow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "argent-react-native-app-workflow", 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.
Type 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.
skills CLI
$ npx skills add bbplayer-app/BBPlayer --skill argent-react-native-app-workflow -a codex
Project install goes to .agents/skills/; add -g for ~/.codex/skills/.
Install the "argent-react-native-app-workflow" agent skill from https://github.com/bbplayer-app/BBPlayer/tree/dev/.agents/skills/argent-react-native-app-workflow into .agents/skills/argent-react-native-app-workflow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "argent-react-native-app-workflow", 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.
skills CLI
$ npx skills add bbplayer-app/BBPlayer --skill argent-react-native-app-workflow -a cursor
Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.
Install the "argent-react-native-app-workflow" agent skill from https://github.com/bbplayer-app/BBPlayer/tree/dev/.agents/skills/argent-react-native-app-workflow into .cursor/skills/argent-react-native-app-workflow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "argent-react-native-app-workflow", 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.
--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
skills CLI
$ npx skills add bbplayer-app/BBPlayer --skill argent-react-native-app-workflow -a gemini-cli
Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.
Install the "argent-react-native-app-workflow" agent skill from https://github.com/bbplayer-app/BBPlayer/tree/dev/.agents/skills/argent-react-native-app-workflow into .gemini/skills/argent-react-native-app-workflow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "argent-react-native-app-workflow", 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.
Installs 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).
skills CLI
$ npx skills add bbplayer-app/BBPlayer --skill argent-react-native-app-workflow -a github-copilot
Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.
Install the "argent-react-native-app-workflow" agent skill from https://github.com/bbplayer-app/BBPlayer/tree/dev/.agents/skills/argent-react-native-app-workflow into .github/skills/argent-react-native-app-workflow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "argent-react-native-app-workflow", 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.
skills CLI
$ npx skills add bbplayer-app/BBPlayer --skill argent-react-native-app-workflow -a opencode
OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
Install the "argent-react-native-app-workflow" agent skill from https://github.com/bbplayer-app/BBPlayer/tree/dev/.agents/skills/argent-react-native-app-workflow into .opencode/skills/argent-react-native-app-workflow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "argent-react-native-app-workflow", 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.
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.
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.
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
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.
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.
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.
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>):
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.
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:
Method
How
Reload tool
Use the debugger-reload-metro tool
Restart app
Use the restart-app tool, or kill the app in simulator and run npx react-native run-ios again
3.1 When Build Fails (e.g. xcodebuild exit code 65)
Order of operations (simplest first):
Clean build folder, then retry the build command
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
CocoaPods issues: pod deintegrate then pod install --repo-update
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
Situation
Action
JS/React only changed
Use debugger-reload-metro tool. No rebuild.
Native code or pod install / project config changed
Rebuild: npx react-native run-ios (Metro can stay running).
node_modules or package.json changed
npm install, then if native deps changed run cd ios && pod install. Then rebuild.
App needs reinstalling from .app path
Use reinstall-app tool with UDID, bundle ID, and .app path.
Persistent native build errors
Full clean + reinstall (step 2 above).
3.5 Device Control
Action
Tool / Command
List devices
list-devices tool (iOS + Android)
Boot an iOS simulator
boot-device tool with udid
Boot an Android emulator
boot-device tool with avdName
Launch an app
launch-app tool (pass device id + bundle id / package name)
Restart an app
restart-app tool (pass device id + bundle id / package name)
Open a URL / deep link
open-url tool (pass device id + URL)
Rotate device
rotate tool
Stop simulator server
stop-simulator-server tool (iOS UDID or Android serial — one device)
Stop all simulator servers
stop-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 type
Tool / Where to look
JavaScript errors / logs
Use 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 hierarchy
Use 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 app
Use 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 app
Use debugger-evaluate tool to run JavaScript in the app's runtime.
Native crashes / native stack
npx react-native log-ios or iOS Simulator: Debug → Open System Log.
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.
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
Goal
Tool / Command
Check port 8081
lsof -i :8081
Kill Metro
stop-metro tool
Start Metro
npx react-native start
Start Metro (reset cache)
npx react-native start --reset-cache
Run iOS app
npx react-native run-ios
Run Android app
npx react-native run-android
List devices
list-devices tool (iOS + Android)
Boot a device
boot-device tool (pass udid for iOS or avdName for Android)
Take screenshot
screenshot tool
Compare visible UI changes
screenshot-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 logs
debugger-log-registry tool
Reload JS bundle
debugger-reload-metro tool
Check Metro status
debugger-status tool
Inspect React component tree
debugger-component-tree tool
Run JS in app
debugger-evaluate tool
iOS native logs
npx react-native log-ios
Android native logs
npx react-native log-android or adb -s <serial> logcat
Clean + reinstall (nuclear)
See §3.1 step 3
Related Skills
Skill
When to use
argent-ios-simulator-setup
Initial iOS simulator boot and connection setup
argent-android-emulator-setup
Initial Android emulator boot and connection setup
argent-device-interact
Tapping, swiping, typing, hardware buttons, gestures on the simulator/emulator
argent-metro-debugger
JS-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-profiler
Profiling performance, finding re-render issues, CPU hotspots
argent-test-ui-flow
Interactive 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.
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
Skill
Stars
Used in
Tokens
Auto-check
Licence
Repo updated
Argent React Native App Workflow this skillbbplayer-app/BBPlayer
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…
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…
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?
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.