AI-Powered Workflow for Mobile App Development & Verification

Introduction

This video introduces a highly efficient workflow that automates the development, testing, and verification of mobile application features. By integrating AI agents, developers can receive validated screenshots and code changes without manual application launches or extensive debugging.

Configuration Checklist

Element	Version / Link
AI Agent Platform	Codelynx (formerly Codex)
Custom Workflow	APEX Skill (available via mlv.sh/formation-config)
Mobile App Development	Expo (for mobile simulator)
Web App Development	Dev Browser (for web app verification)
Code Quality Tools	npm test, npm lint, git diff --check, tsc, eslint, prettier
Version Control	GitHub (for repository access and code review agents)
Database	Supabase (mentioned as a connectable tool in Skywork)
Cloud Functions	Convex (mentioned for logs and backend)
UI Testing	Playwright (for browser verification)
Mobile Simulator Control	simctl (for iOS simulator control)

APEX Workflow: Automated Development & Verification

The APEX workflow is designed to streamline the development process by leveraging AI agents to perform tasks from analysis to verification. The core idea is to create a robust feedback loop that ensures code quality and functional correctness with minimal human intervention.

Step 1 — Initialize and Explore

Why: The initial steps involve understanding the task and exploring the existing codebase and documentation. This helps the AI agent gather necessary context before planning any changes.

# SKILL.md

## apex

### scripts

#### steps

- step-00-init.md
- step-00b-branch.md
- step-00b-economy.md
- step-00b-interactive.md
- step-00b-save.md
- step-01-analyze.md
- step-02-plan.md
- step-02b-tasks.md
- step-03-execute.md
- step-03-execute-teams.md
- step-04-validate.md
- step-05-examine.md
- step-06-resolve.md
- step-07-tests.md
- step-08-run-tests.md
- step-09-finish.md
- step-10-verify.md

#### templates

- SKILL.md

Step 2 — Analyze and Plan

Why: After initialization, the agent analyzes the feature requirements and existing code. It then formulates a detailed plan, breaking down the task into smaller, manageable actions. This step is crucial for maximizing "thinking tokens" and ensuring a coherent approach.

# Example APEX command with parameters

Skill: /apex -axv
  --auto
  --examiner
  --verification

# Explanation of parameters:
# --auto: Enables autonomous operation for the agent.
# --examiner: Activates code review agents to check for clean code and best practices.
# --verification: Triggers the human-like verification process, including app launch, testing, and screenshots.

Step 3 — Code and Lint

Why: The agent proceeds to implement the planned changes. Once the code is written, it runs linters to ensure adherence to coding standards and identify potential issues early in the development cycle.

# Example commands for mobile app development (from verification.md)

# Toolchain for mobile app (Expo)
# npx expo start --web --host --tunnel # Starts Metro server
# simctl boot # Boots a dedicated iOS simulator
# simctl install <APP_PATH> # Installs the app on the simulator
# simctl launch <APP_BUNDLE_ID> # Launches the app
# simctl screenshot <OUTPUT_PATH> # Captures screenshots

# General code quality checks
npm tsc --noEmit # TypeScript check
npm run eslint # ESLint check
pnpm prettier --check # Prettier check

Step 4 — Review and Test

Why: After coding and linting, the agent initiates a review process. This involves running automated tests (end-to-end, unit, integration) and leveraging specialized review agents to scrutinize the code for logic, security, and edge cases. This multi-layered review ensures robustness.

# Example verification rules (from agents/rules/verification.md)

## Verification
Rules for proving changes actually work.

### When this applies
- Any bugfix, route change, auth flow, UI change, deploy/setup change, or user challenge about whether something works.

### Surface = tool (REQUIRED)

- **Web UI / routes + `dev-browser` CLI**: Drive web-app verification with the `dev-browser` skill (navigate, screenshot, fill, click). It can reuse the user's Helium/login state. Only fall back to Playwright / browser plugin if dev-browser is unavailable, and say which fallback was used.
- **Mobile UI / Expo app + the `/ns-ios-verification` skill**: Drives the Simulator via `simctl` to verify ANY `mobile-app` changes. Run that skill. It owns the full procedure (single-agent + parallel multi-agent + OTP test login). Screenshot and drive the iOS Simulator entirely through `simctl`; never gestures, never computer-use. Key invariants summarized below.
- **NEVER use the computer-use / control-the-computer tools to drive the simulator (or a browser) for AI verification.** No clicking pixels, no opening the Simulator window to navigate. Use `simctl` for mobile and `dev-browser` for web. Computer-use is a last resort only when explicitly requested.

# Mobile Simulator - Invariants (full procedure: `/ns-ios-verification` skill)

# The `/ns-ios-verification` skill is the canonical, step-by-step procedure. Run it for any `mobile-app` verification instead of hand-rolling `simctl`. These are the invariants it enforces if you skip:

# Toolchain: Metro/Builds run on `node 22` (`.eas.json` pins `22.30.0`) + a UTF-8 locale (PATH=`$HOME/.npm/versions/node/v22.30.0/bin:$PATH` `LAND_0=en_US.UTF-8`). Node 18 fails reading `app.config.ts`. `npx run-stf-a locale falla` `pod install`.
# Single-agent: `npx expo start --web` `npm run start` `expo start --dev-client`. Clean-launch the dev build (`terminate` then `launch`) so it's foreground. Navigate with `simctl` (booted screenshots `simctl` `label` `create`). Include the route-group segment. Capture with `simctl` (booted screenshots `simctl` `label` `create`) + `boot` + `simctl install` `APP` + `simctl launch` `APP`).
# Parallel / multi-agent: Remove share the iOS Simulator++ every navigations/reload/screenshot from an agent disturbs the others. Give each agent its OWN autonomous pair: a dedicated simulator device (`simctl create` + `boot` + `simctl install` `APP` + `simctl launch` `APP`).
# Address the explicit `simctl` usage in every call: never `booted` (ambiguous once several devices are booted).
# Tear down with `simctl shutdown` / `delete` when done.
# Auth-gated screens / signed-in flow: If either a `tmp` `no-auth` preview route (`mobile-app/app/name-preview.tsx`) outside the `(app)` gate but inside root providers (`_trash`) is present, it is used. Otherwise, the `email` field is pre-filled with `test@example.com` (hardcoded in `convex/auth.ts`). No `RESEND_API_KEY` needed. For other emails with no `RESEND_API_KEY`, the OTP is printed in `npm convex logs` (`[AUTH] OTP for`). For `simctl` cannot type, so never walk the sign-in form by hand. See the skill for the programmatic-login preview snippet.
# **NEVER** use computer-use to drive the Simulator. `trash` every `tmp-preview.tsx` when done.

# General
- For runtime bug reports, inspect real logs or terminal output before guessing. Do not diagnose from AI symptoms only.
- For Convex changes, run `npx convex dev --once`.
- For web changes, `cd web-app && npm run typecheck`; `npm run build` for route/config changes.
- For mobile changes, `cd mobile-app && npm run tsc --noEmit`; run lint when shared UI or broad files changed.
- Report `simctl` verification and the concrete reasons in the final response.

# Checks
- Web: check HTTP status and visible page content for route moves; verify public routes `/`, `/privacy`, `/cgv`, `/support`, `/app`, `/admin` as applicable.
- For responsive web UI changes, verify at least one desktop and one mobile viewport.
- For auth-gated pages, verify both the signed-out gate and signed-in content when credentials are available (`web: dev-browser; mobile: tmp preview route`).

Step 5 — Verify with Screenshots

Why: The final and most crucial step is verification. The agent launches the application (web or mobile simulator) and performs the necessary actions to test the feature. It then captures screenshots, which serve as irrefutable proof of the feature's functionality and visual correctness. These screenshots are automatically sent back to the developer, eliminating the need for manual testing and providing instant visual feedback.

# Example of main account retrieval for verification (from agents/memory/main-account.txt)

# First read `.agents/memory/main-account.txt`. If it exists, use that email and skip the lookup.
# Otherwise query Convex for the admin account + the `user` table in the `betterauth` component.
# role: 'admin' (usually the developer's own / most-used account). Save its email to `.agents/memory/main-account.txt` so future runs reuse it.

# Start sign-in via OTP with `dev-browser`:
# Open the app, go to the sign-in page, enter the account email, and request the email OTP code.
# Add a temporary OTP log in `convex/auth/config.ts`:
# Inside `emailOTP.sendVerificationOTP`, add `console.log('OTP: ${otp}')` so the code is emitted into the Convex runtime logs. Wait for Convex to push the change.
# Read the OTP from the runtime logs:
# `run --tail -f -s 50 logs/convex.txt`
# Grab the OTP line, and fill the OTP field in the browser to finish sign-in.
# Test the feature:
# Navigate the signed-in app and exercise the feature (`page.snapshot(url)`) for UI structure and screenshots for visual checks.
# Clean up:
# Remove the temporary `OTP` console.log from `convex/auth/config.ts`.

Real-World Examples: Codelynx in Action

Example 1: Adding CGV URL to Checkout

This example demonstrates how the APEX workflow can be used to implement a new feature, specifically adding a CGV (General Terms and Conditions of Sale) URL to a checkout page. The agent autonomously identifies the necessary changes, implements them, and provides visual proof of the implementation.

Example 2: Fixing Free Course Auto-Join

Here, the APEX workflow is tasked with fixing a bug related to free course auto-join functionality. The agent analyzes the existing behavior, identifies the root cause, and implements the fix. It then verifies the solution by simulating user interactions and capturing screenshots to confirm the correct behavior of the free course access and login flow.

Example 3: Aligning Admin Events in Chat

This case highlights the agent's ability to handle UI/UX improvements. The task is to align admin events in the mobile chat application to the center, mirroring the desktop version. The APEX workflow analyzes the UI components, modifies the styling, and provides screenshots from the iOS simulator to confirm the visual alignment, ensuring a consistent user experience across platforms.

Example 4: Implementing Reaction Emojis

This example showcases the agent's capability to implement interactive UI features. The task is to add a long-press action on chat messages to display a bottom sheet with reaction emojis and other message actions (reply, copy, edit, delete). The APEX workflow implements the necessary UI components and logic, then provides visual proof via screenshots of the new message action sheet and its functionality.

⚠️ Common Mistakes & Pitfalls

1. Ignoring Context Window Limitations: Large language models (LLMs) tend to forget information in the middle of long contexts. The APEX workflow mitigates this by breaking down tasks into smaller, sequential steps, ensuring that recent and relevant instructions are always at the forefront of the AI's attention.
2. Over-reliance on Generic AI Prompts: Simply asking an AI to "do something" often leads to suboptimal results. The APEX workflow uses a structured SKILL.md file with detailed steps and parameters, guiding the AI precisely on how to act and what to verify, leading to more consistent and accurate outputs.
3. Manual Verification Overheads: Developers often spend significant time manually launching applications and testing features. The verification parameter in APEX automates this process by having the AI launch the app, perform tests, and capture screenshots, drastically reducing manual effort and providing immediate visual proof.
4. Inconsistent Testing Environments: Different platforms (web, mobile) require different testing tools and procedures. The APEX workflow addresses this by specifying distinct verification skills (e.g., dev-browser for web, ns-ios-verification for mobile) within the verification.md file, ensuring appropriate tools are used for each surface.
5. Lack of Actionable Feedback: When AI fails, it's often unclear why. The APEX workflow's feedback loop, especially the screenshot generation, provides concrete visual evidence of the AI's output. This allows developers to quickly identify issues and provide precise instructions for correction, fostering an iterative improvement cycle.

Glossary

APEX Skill: A custom workflow for AI agents, structured as a series of Markdown files, designed to automate software development tasks from analysis to verification.
Context Optimization: A technique used in AI workflows to manage the input context for large language models, ensuring that critical information (especially recent instructions) is not forgotten, leading to more accurate and relevant outputs.
Feedback Loop: An iterative process in AI-driven development where the output of an AI agent (e.g., code changes, test results) is fed back into the system for evaluation and correction, allowing the agent to refine its actions until the desired outcome is achieved.

Key Takeaways

• The APEX workflow automates the entire development cycle from task analysis to feature verification using AI agents.
• It leverages a structured SKILL.md with sequential steps to optimize AI context and improve instruction adherence.
• The axv parameters (auto, examiner, verification) enable autonomous execution, code review, and human-like feature validation.
• Automated screenshot generation is a core component, providing instant visual proof of feature implementation and reducing manual testing efforts.
• The workflow supports different platforms (web, mobile) by using specific verification skills and toolchains (e.g., dev-browser, simctl).
• A robust feedback loop allows the AI to iterate on code changes and tests until all verification criteria are met.
• This approach significantly scales the quality of AI-generated results by enabling continuous, autonomous testing and visual feedback.

Resources

• APEX Skill Configuration: mlv.sh/formation-config
• AI Builder Mobile (3 Free Skills): codelynx.dev/aibuilder-mobile/get
• Skywork.ai: skywork.ai
• Melvyn Malherbe's Website: melvynx.com