argent-react-native-app-workflow

Name: argent-react-native-app-workflow
Author: software-mansion

1.8kstars51forks

How to install argent-react-native-app-workflow?

software-mansion/argent/argent-react-native-app-workflow

$npx -y skills add software-mansion/argent --skill argent-react-native-app-workflow

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	## 1. Starting the React Native App
2
3	### 1.1 Explore Configuration (MANDATORY — Do This First)
4
5	Before running commands, read the project's build and run configuration from the `argent-environment-inspector` subagent result.
6
7	Do NOT default to `npx react-native start` or `npx react-native run-ios` without first checking for custom scripts and workflows.
8
9	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).
10
11	If the project structure is convoluted, ask the user before proceeding.
12
13	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.
14
15	Checklist before start:
16
17	- [ ] `node_modules` present (if not: `npm install` or `yarn`)
18	- [ ] For iOS: `ios/Podfile` exists; if `ios/Pods` missing or stale, run `cd ios && pod install && cd ..`
19	- [ ] No conflicting Metro on default port (see 1.2)
20
21	### 1.2 Start Metro
22
23	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.
24
25	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:
26
27	```bash
28	npx react-native start
29	```
30
31	Optional: `npx react-native start --reset-cache` if cache issues are suspected.
32
33	1. Verify Metro is ready: use the `debugger-status` tool to verify Metro is running and reachable.
34
35	1. 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.
36
37	### 1.3 Run the App
38
39	In a separate terminal (Metro keeps running in the first):
40
41	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.
42
43	Pass the target device explicitly — derive it from `list-devices` (see `<device_selection_rule>`):
44
45	```bash
46	npx react-native run-ios --simulator="<name>" # iOS (or --udid <UDID>)
47	npx react-native run-android --deviceId=<adb-serial> # Android
48	```
49
50	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.
51
52	Agent checklist:
53
54	- [ ] Metro is already running and shows "ready"
55	- [ ] Command run from project root
56	- [ ] 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.
57	- [ ] Android: `adb -s <serial> reverse tcp:8081 tcp:8081` done.
58
59	---
60
61	## 2. Ensuring / Debugging Metro
62
63	### 2.1 Check for Existing Metro
64
65	Before starting Metro, avoid "port already in use" errors. Default port to check is :8081, infer the port from documentation:
66
67	```bash
68	lsof -i :PORT
69	```
70
71	- No output → Port free; safe to start Metro.
72	- Output with PID → Another process is using the port.
73
74	Use the `debugger-status` tool to check whether the process on that port is actually a Metro server. If not Metro — ask the user whether you may kill the process.
75
76	To kill a Metro process, use the `stop-metro` tool (requires user confirmation).
77
78	### 2.2 Confirm Correct Server Connection
79
80	- App must point at the same host/port as the running Metro. Default: same machine, port 8081.
81	- iOS Simulator: By default uses localhost; no extra config needed for same-machine Metro.
82
83	Verify Metro is reachable: use the `debugger-status` tool.
84
85	### 2.3 Reload the App (Ensure New Bundle)
86
87	After code or config changes, the app must load the new bundle:
88
89	\| Method \| How \|
90	\| ----------- \| ------------------------------------------------------------------------------------------------- \|
91	\| Reload tool \| Use the `debugger-reload-metro` tool \|
92	\| Restart app \| Use the `restart-app` tool, or kill the app in simulator and run `npx react-native run-ios` again \|
93
94	Agent checklist:
95
96	- [ ] Only one Metro process (no duplicate on port)
97	- [ ] App was started after Metro was ready
98	- [ ] When needing to reload: refer to 2.3
99
100	---
101
102	## 3. Build / Install / Retry (React Native

People who liked this also viewed

6 picks

Type

argent-react-native-app-workflow

1.8kstars51forks

View on GitHub

How to install argent-react-native-app-workflow?

software-mansion/argent/argent-react-native-app-workflow

$npx -y skills add software-mansion/argent --skill argent-react-native-app-workflow

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	## 1. Starting the React Native App
2
3	### 1.1 Explore Configuration (MANDATORY — Do This First)
4
5	Before running commands, read the project's build and run configuration from the `argent-environment-inspector` subagent result.
6
7	Do NOT default to `npx react-native start` or `npx react-native run-ios` without first checking for custom scripts and workflows.
8
9	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).
10
11	If the project structure is convoluted, ask the user before proceeding.
12
13	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.
14
15	Checklist before start:
16
17	- [ ] `node_modules` present (if not: `npm install` or `yarn`)
18	- [ ] For iOS: `ios/Podfile` exists; if `ios/Pods` missing or stale, run `cd ios && pod install && cd ..`
19	- [ ] No conflicting Metro on default port (see 1.2)
20
21	### 1.2 Start Metro
22
23	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.
24
25	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:
26
27	```bash
28	npx react-native start
29	```
30
31	Optional: `npx react-native start --reset-cache` if cache issues are suspected.
32
33	1. Verify Metro is ready: use the `debugger-status` tool to verify Metro is running and reachable.
34
35	1. 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.
36
37	### 1.3 Run the App
38
39	In a separate terminal (Metro keeps running in the first):
40
41	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.
42
43	Pass the target device explicitly — derive it from `list-devices` (see `<device_selection_rule>`):
44
45	```bash
46	npx react-native run-ios --simulator="<name>" # iOS (or --udid <UDID>)
47	npx react-native run-android --deviceId=<adb-serial> # Android
48	```
49
50	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.
51
52	Agent checklist:
53
54	- [ ] Metro is already running and shows "ready"
55	- [ ] Command run from project root
56	- [ ] 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.
57	- [ ] Android: `adb -s <serial> reverse tcp:8081 tcp:8081` done.
58
59	---
60
61	## 2. Ensuring / Debugging Metro
62
63	### 2.1 Check for Existing Metro
64
65	Before starting Metro, avoid "port already in use" errors. Default port to check is :8081, infer the port from documentation:
66
67	```bash
68	lsof -i :PORT
69	```
70
71	- No output → Port free; safe to start Metro.
72	- Output with PID → Another process is using the port.
73
74	Use the `debugger-status` tool to check whether the process on that port is actually a Metro server. If not Metro — ask the user whether you may kill the process.
75
76	To kill a Metro process, use the `stop-metro` tool (requires user confirmation).
77
78	### 2.2 Confirm Correct Server Connection
79
80	- App must point at the same host/port as the running Metro. Default: same machine, port 8081.
81	- iOS Simulator: By default uses localhost; no extra config needed for same-machine Metro.
82
83	Verify Metro is reachable: use the `debugger-status` tool.
84
85	### 2.3 Reload the App (Ensure New Bundle)
86
87	After code or config changes, the app must load the new bundle:
88
89	\| Method \| How \|
90	\| ----------- \| ------------------------------------------------------------------------------------------------- \|
91	\| Reload tool \| Use the `debugger-reload-metro` tool \|
92	\| Restart app \| Use the `restart-app` tool, or kill the app in simulator and run `npx react-native run-ios` again \|
93
94	Agent checklist:
95
96	- [ ] Only one Metro process (no duplicate on port)
97	- [ ] App was started after Metro was ready
98	- [ ] When needing to reload: refer to 2.3
99
100	---
101
102	## 3. Build / Install / Retry (React Native

People who liked this also viewed

6 picks

Type