software-mansion/argent
12 skills113k installs22.5k starsGitHub
Install
npx skills add https://github.com/software-mansion/argentSkills in this repo
1Argent Android Emulator SetupSet up and connect to an Android emulator using argent MCP tools. Use when starting a new session on Android, booting an emulator, getting a device serial, or before any UI interaction task. --- name: argent-android-emulator-setup description: Set up and connect to an Android emulator using argent MCP tools. Use when starting a new session on Android, booting an emulator, getting a device serial, or before any UI interaction task. Prerequisites - **Android SDK Platform Tools** on PATH - provides `adb`. - **Android Emulator** on PATH - needed to boot AVDs. If you will only use an already-running emulator or a physical device, adb alone is sufficient. - An AVD created via Android Studio or `avdmanager create avd`. Verify with `adb version` and `emulator -list-avds`. **Find a ready device** - call `list-devices`. Filter for entries with `platform: "android"`. Ready devices (`state: "device"`) come first. `emulator-5554`) unless the user specified one.9.9kinstalls2Argent Ios Simulator SetupSet up and connect to an iOS simulator using argent MCP tools. Use when starting a new session, booting an iOS simulator, getting an iOS UDID, or before any iOS simulator interaction task. --- name: argent-ios-simulator-setup description: Set up and connect to an iOS simulator using argent MCP tools. Use when starting a new session, booting an iOS simulator, getting an iOS UDID, or before any iOS simulator interaction task. Setup Steps If you delegate simulator tasks to sub-agents, make sure they have MCP permissions. **Find a booted simulator** Use `list-devices`. Filter for entries with `platform: "ios"` - booted iPhones are listed first. If none are booted, call `boot-device` with `udid: <chosen UDID>`. **Verify connection** All interaction tools (`gesture-tap`, `gesture-swipe`, `gesture-custom`, etc.) auto-start the server if not already running. Notes - UDIDs look like: `A1B2C3D4-E5F6-7890-ABCD-EF1234567890`9.9kinstalls3Argent React Native App WorkflowStep-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. --- 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. 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.9.9kinstalls4Argent Device InteractInteract with an iOS simulator, Android emulator, or Electron app using argent MCP tools. Use when tapping UI elements, performing gestures, scrolling/swiping, typing text, pressing hardware buttons, launching apps, opening URLs, taking screenshots, or checking visible app state after interactions. --- name: argent-device-interact description: Interact with an iOS simulator, Android emulator, or Electron app using argent MCP tools. Use when tapping UI elements, performing gestures, scrolling/swiping, typing text, pressing hardware buttons, launching apps, opening URLs, taking screenshots, or checking visible app state after interactions. --- ## Unified tool surface All interaction tools below accept a `udid` parameter and auto-dispatch iOS vs Android based on its shape (UUID → iOS simulator, `electron-cdp-<port>` → Electron app, anything else → Android adb serial). You use the same tool names on both platforms. For platform-specific caveats (Metro `adb reverse`, locked-screen describe errors, etc.), see § 9 Platform-specific notes at the bottom.9.8kinstalls5Argent Test Ui FlowAutonomously test an app UI iOS or Android by running interact-screenshot-verify loops using argent MCP tools Use when testing UI flows verifying login works testing navigation running end-to-end UI test scenarios manual QA steps visible UI changes or visual behavior name argent-test-ui-flow description Autonomously test an app UI iOS or Android by running interact-screenshot-verify loops using argent MCP tools Use when testing UI flows verifying login works testing navigation running end-to-end UI test scenarios manual QA steps visible UI changes or visual behavior Platform-agnostic The interaction tool names are identical on iOS and Android gesture-tap gesture-swipe describe screenshot launch-app etc and the tool-server auto-dispatches based on the udid you pass UUID-shape iOS adb serial Android Before testing resolve which device to test on Call list-devices and follow device_selection_rule prefer a running device on any platform Once a platform is chosen the per-platform setup skill takes over Platform Setup skill Find devices with iOS argent-ios-simulator-setup list-devices boot-device with udid if none booted Android argent-android-emulator-setup list-devices boot-device wit.9.8kinstalls6Argent Metro DebuggerDebug a JS runtime via CDP using argent debugger tools. Primary path is React Native via Metro (iOS / Android); a subset of the tools (debugger-connect, debugger-status, debugger-evaluate, debugger-log-registry) also drive a Chromium (CDP) app's renderer (an Electron app, or any Chromium browser exposing CDP) through the same surface. Use when connecting to the runtime, inspecting React components --- name: argent-metro-debugger description: Debug a JS runtime via CDP using argent debugger tools. Primary path is React Native via Metro (iOS / Android); a subset of the tools (debugger-connect, debugger-status, debugger-evaluate, debugger-log-registry) also drive a Chromium (CDP) app's renderer (an Electron app, or any Chromium browser exposing CDP) through the same surface. Use when connecting to the runtime, inspecting React components, reading console logs, or evaluating JavaScript. Prerequisites For **React Native (iOS / Android)**: requires **Metro dev server running** (default `localhost:8081`) and **a React Native app connected to Metro** (at least one CDP target).9.8kinstalls7Argent React Native OptimizationOptimizes 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. --- 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.9.8kinstalls8Argent React Native ProfilerProfile a React Native Hermes app to measure re-render and CPU performance using argent profiler tools. Use when optimizing for performance, measuring before/after a fix, spotting slow components, diagnosing re-renders, checking CPU hotspots, or producing a ranked issue report. --- name: argent-react-native-profiler description: Profile a React Native Hermes app to measure re-render and CPU performance using argent profiler tools. Use when optimizing for performance, measuring before/after a fix, spotting slow components, diagnosing re-renders, checking CPU hotspots, or producing a ranked issue report. --- This skill is complementary to `argent-react-native-optimization`, not a replacement for it. Tool Overview ### React Profiler (Hermes / React commits) | Tool | Purpose | | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `react-profiler-start` | Start CPU sampling + inject React commit-capture hook. Optional: `sample_interval_us` (def.9.8kinstalls9Argent Native ProfilerNative profiling for CPU hotspots, UI hangs, memory issues. iOS via xctrace; Android via Perfetto. Use when diagnosing native-level performance issues. --- name: argent-native-profiler description: Native profiling for CPU hotspots, UI hangs, memory issues. iOS via xctrace; Android via Perfetto. Use when diagnosing native-level performance issues. Tools - `native-profiler-start` - start profiling on a booted device. iOS: xctrace recording for CPU, hangs, and leaks. - `native-profiler-stop` - stop the profiler and export trace data to timestamped XML files. - `native-profiler-analyze` - parse exported trace data and return a structured bottleneck payload. - `profiler-stack-query` - drill into parsed data: hang stacks, function callers, thread breakdown, leak details. - `profiler-load` - list and reload previous trace sessions from disk for re-investigation. Platform Support - **iOS**: Backend: Xcode Instruments via `xctrace` on a booted simulator or connected device. Requires Xcode command-line tools on PATH. Surfaces CPU hotspots, UI hangs, and memory leaks (instruments `Leaks` table).9.8kinstalls10Argent Create FlowRecord a reusable flow scripted sequence of MCP tool calls that can be replayed later with a single command Use when the user asks to create record or build a flow or to script a sequence of device actions name argent-create-flow description Record a reusable flow scripted sequence of MCP tool calls that can be replayed later with a single command Use when the user asks to create record or build a flow or to script a sequence of device actions Overview A flow is a recorded sequence of MCP tool calls saved to a yaml file in the argent flows directory Each step is executed live as you add it so you verify it works before it becomes part of the flow Replay a finished flow with flow-execute Tools Tool Purpose flow-start-recording Start recording takes a name and executionPrerequisite creates the file flow-add-step Execute a tool call live and record it if it succeeds flow-add-echo Add a label comment that prints during replay flow-finish-recording Stop recording and get a9.8kinstalls11Argent Screenshot DiffThe argent-screenshot-diff skill Compare saved or live app screenshots with the argent screenshot-diff tool. Use when testing visual regressions, before/after UI comparisons, screenshot diff checks, visible layout, spacing, color, typography, clipping, overflow, text rendering, or image/icon rendering changes.. 1. Role Use `screenshot-diff` as supporting visual evidence for UI QA and visual regression checks. It highlights pixel-visible change or stability; it does not replace visual inspection, accessibility/component-tree state, frame/attribute checks, logs, network evidence, or app behavior. Do not use screenshot diffing for tap-coordinate discovery. Use `describe`, `debugger-component-tree`, or `native-describe-screen` to find targets first. 2. When To Use Use `screenshot-diff` when pixel comparison can answer the verification question: - Required for explicit "UI regression test", "visual regression test", "screenshot diff", "compare screenshots", or "before/after visual comparison" requests, unless stable comparable Agents should read SKILL.md quick start steps, verify required binaries and environment variables, and follow reference files for exact parameters before calling.8.5kinstalls12Argent LensPrerequisite feature flag This workflow is gated behind the argent lens flag off by default Run argent enable argent lens once before using it If propose_variant await_user_selection come back not found the flag is off enable it and retry You implement several candidate designs capture each one running on the device and stage them with propose_variant Each proposed element shows up as a floating card next to the live simulator stream in the Argent Lens window a native window that opens automatically connected by a thin line to the real element The human picks per element optionally pins free form comments to elements and presses Complete selection await_user_selection is the single blocking call that returns their decision The golden rule one variant one real _distinct_ screenshot A proposal is only useful if its previewImage shows the variant actually rendered on the device captured AFTER that specific variant was applied Never propose a variant you have not built and seen on screen and never point two variants at the same file6.1kinstalls