Bridging the Platform UI Gap with GenAI

Emmanuel’s team was moving native iOS and Android shopping flows to React Native, using the web implementation as a reference. The product card alone had about 13,000 lines of code, many delivery and subscription states, and visual experiments. A one-shot rewrite with Cursor or Gemini failed, even with a 200K-token context window.

The team needed agents to understand both the web and React Native repositories without loading everything. They used a multi-root workspace and Cursor rules to narrow what the agent could see. They then split work into focused tasks and used Git worktrees so multiple agent sessions could work independently.

To make agent output more reliable, Emmanuel had agents write a failing test first, confirm it failed, and only then implement the change and verify the test passed. For visual checks, agents could run a web server in a chosen product-card state, take screenshots with Puppeteer MCP, and compare them with the implementation.

The team replaced loose combinations of booleans, which could represent contradictory states such as success and error at once, with explicit variants modeled as TypeScript discriminated unions. Exhaustive switches let TypeScript flag missing cases. Agents could use those types to validate their work and correct errors.

Emmanuel summarized the approach as selective context and self-correcting agent workflows. With these methods, the team converted web components into mobile UI and streamlined work that might have taken weeks or months into a few hours.