Agentic Frontend development

COMPLETED March 03, 2026
Summary

Briefing: Agentic Frontend development

Purpose: We've been struggling with doing front-end development with Claude code. We're looking for information on how we can improve our process. Some specific questions that we have: - We've recently installed playwright-cli. How can we optimize its usage and can we make e2e integration tests with it - Highlight some timeless principals on product design. - Frontend testing best practices for agentic coding and compound engineering - React Native specific advice. Especially in a codebase that will eventually be shared between web, android, and iOS*

Key Insights

  • Shift E2E testing from manual scripting to agentic generation. While optimizing playwright-cli is valuable, the agentic frontier is moving toward tools like Meticulous AI that automatically generate and maintain evolving E2E suites without developer input. In an agentic workflow, the best practice is shifting from "writing tests" to "auditing generated tests," as new agents like the WorkOS auth tool now write code, typecheck it, and fix their own build errors autonomously.

  • External import maps, a big Bun release, and Node.js schedule changes

  • Mandatory architecture changes in React Native require immediate migration strategies. Expo SDK 55 and React Native 0.83 now mandate the "New Architecture," dropping support for the legacy system. For codebases shared across Web/iOS/Android, this is a critical junction; you must migrate to ensure compatibility with modern libraries (like react-native-reanimated v4) that now exclusively support the New Architecture.

  • How to upgrade to Expo SDK 55

  • Shared navigation logic faces fundamental paradigm conflicts. Achieving a shared codebase between web and mobile is complicated by navigation: the web destroys pages upon navigation, while mobile (iOS/Android) stacks screens in memory. React Native Screens v5 is rewriting its stack to focus purely on native primitives and the New Architecture to manage this resource allocation, suggesting that "write once, run anywhere" navigation logic remains the most fragile part of shared development.

  • RNR 354 - React Native Screens with Krzysztof Magiera

  • Agentic coding requires "Development Builds" over standard clients. When using AI agents (like Claude Code) to modify React Native projects, reliance on "Expo Go" is an anti-pattern because it cannot replicate native config changes (app.json/app.config.js). The recommended workflow is compiling "Development Builds," which allows agents to modify native code while providing a test environment that matches production parity.

  • How to upgrade to Expo SDK 55

  • Human oversight remains the "Check" in Agentic CI/CD. Even teams deeply integrated with Claude Code (like the Expo team) emphasize that LLMs cannot foresee every scenario during complex tasks like SDK upgrades. The emerging best practice is to treat the agent as a "doer" but enforce a strict human-in-the-loop validation step, particularly when agents are granted permission to attempt automatic error correction.

  • How to upgrade to Expo SDK 55

Emerging Patterns

Agentic Self-Correction Loops A distinct pattern is forming where frontend agents do not just "output code" but interact with the build system to verify it. The WorkOS agent writes integration code and immediately runs typechecks to self-repair build errors. Similarly, Expo uses specific "skills" (context-aware scripts) with Claude Code to handle upgrades, establishing a pattern where agents are given tool-access (compilers, linters) to validate their own work before human review. - External import maps, a big Bun release, and Node.js schedule changes - How to upgrade to Expo SDK 55

Read & Act

What to read

  • How to upgrade to Expo SDK 55 — Essential reading for your React Native workflow. It details how the Expo team actually uses Claude Code for upgrades and explains why moving to Development Builds is critical for reliable testing.
  • RNR 354 - React Native Screens with Krzysztof Magiera — Critical for the "shared codebase" goal. It explains the "Why" behind the New Architecture and the friction points between web and native navigation paradigms that you will inevitably encounter.

What to do

  • Implement a "Split Upgrade" strategy. Do not attempt to upgrade your React Native version and Architecture simultaneously. Upgrade to the New Architecture on your current SDK version first, verify stability, and then upgrade the SDK.
  • Switch from Expo Go to Development Builds. Configure your CI/CD to produce Development Builds. This ensures that when Claude Code modifies native configurations (which generic clients hide), you catch the errors immediately.
  • Audit your navigation primitives. Review your current navigation stack against React Native Screens v5 requirements. If you rely heavily on shared web/native navigation logic, verify that your abstraction layer accounts for the "stack vs. page replacement" memory model differences.
Source Articles