Agentic Frontend development
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
- Adopt "Agentic Engineering" over "Vibe Coding" to improve reliability. To improve your process with Claude, shift from "vibe coding" (reckless prompting, accepting output without review) to "agentic engineering." This workflow requires writing detailed plans and specifications before prompting, breaking work into well-defined tasks, and treating the AI as a junior developer whose work requires rigorous code review. The irony of AI development is that it rewards traditional engineering discipline—better specs and comprehensive tests yield significantly better AI outputs.
- Agentic Engineering
-
Leverage automated testing as the primary feedback loop for agents. The single biggest differentiator in agentic workflows is the presence of a solid test suite. Tests allow the AI agent to iterate independently until the code passes, providing high confidence in the result. For integration, define clear tool descriptions and input/output schemas; if the AI doesn't understand when or why to use a tool (like a database query or API call), it will fail to orchestrate complex tasks effectively.
- Agentic Engineering
-
Utilize new React Native libraries to unify native and web rendering. For your shared codebase, look into "React Native Teleport," which allows components to use the native rendering layer for stateful transitions (rather than JS-based portals). Additionally, "React Native Worklets" are now a standalone library, enabling high-performance tasks (like frame processing) to run on the UI thread, with potential for background HTTP requests.
-
091 - Gesture Handler v3, AI Agents Everywhere, Animated Components & Tiny Harvest Momentum
-
Prepare your architecture for "Compound Engineering" by exposing tools via WebMCP. WebMCP is a new standard allowing websites to expose functionality directly to AI agents via the website itself, without separate servers. By adding specific attributes (like
tool-name) to HTML forms or registering tools via JavaScript, you allow agents to interact with your site programmatically. This is significantly faster and more token-efficient than having agents infer functionality by parsing the DOM or accessibility trees (a common bottleneck in tools like Playwright). -
Timeless Design Principle: Treat reliability as a core product feature. Reliability should not be an afterthought; users notice its absence immediately. To manage this in an agentic workflow, implement "error budgets"—if you have 99.9% uptime, the 0.1% is your budget for innovation. Furthermore, avoid "hero culture" by building systems that don't require manual intervention to save the day; document knowledge so the system functions independently of specific individuals.
- 14 More Lessons from 14 years at Google
Emerging Patterns
- The shift from "Writer" to "Architect and Reviewer." Across multiple sources, a consensus is forming that the developer's role is shifting away from writing syntax. One source notes that 99% of their app is now implemented by AI, with the human focusing entirely on high-level architecture, code review, and iterating on the solution strategy. However, this creates a risk of skill atrophy for junior developers who may rely on AI without understanding the fundamentals necessary to review the output effectively.
- 091 - Gesture Handler v3, AI Agents Everywhere, Animated Components & Tiny Harvest Momentum
- Agentic Engineering
-
Upfront Context as the Primary Optimization. Whether it is called "planning," "context priming," or "specs," the quality of AI output is now viewed as a direct function of the preparation done before generation begins. Establishing strong code patterns and context upfront reduces the need for refactoring later. The longest phases of development are now planning and reviewing, with the actual coding phase becoming negligible.
- 978: Should A New Coder Use AI?
- Agentic Engineering
Dissenting Views
- Total Reliance vs. Strategic Augmentation. While some developers claim there is "no way back" to manual coding and that AI outperforms junior developers (creating 99% of their apps via AI), others warn against passivity. Dissenting voices argue that treating AI as a "slot machine" for code leads to a dopamine-loop of gambling on outputs rather than engineering solutions. They emphasize that developers must remain active problem solvers to avoid becoming "dumb" or producing unmaintainable, hallucinated code.
- 091 - Gesture Handler v3, AI Agents Everywhere, Animated Components & Tiny Harvest Momentum
- 978: Should A New Coder Use AI?
Read & Act
What to read
- Agentic Engineering — Crucial for fixing your process. This article provides the definitions and workflow corrections needed to move from frustrating "vibe coding" to a reliable, professional AI-assisted process.
- 979: WebMCP: New Standard to Expose Your Apps to AI — Relevant for testing and architecture. It introduces a standardized way to make your frontend "agent-readable," which directly impacts how you might build integration tests and agent interfaces in the future.
- 091 - Gesture Handler v3, AI Agents Everywhere, Animated Components & Tiny Harvest Momentum — Essential for React Native. This episode aggregates specific library updates (Teleport, Worklets, Gesture Handler v3) that are vital for a modern, shared web/mobile codebase.
What to do
- Implement a "Spec-First" Workflow: Before feeding a task to Claude, write a brief design document or spec. Define the architecture, the task scope, and the success criteria. Do not prompt until the plan is clear.
- Audit Your Tool Descriptions: If using agentic coding tools (like LangChain or custom implementations), review the descriptions of the functions you provide to the LLM. Ensure they explain when and why to use the tool, not just how, to improve the agent's decision-making accuracy.
- Experiment with React Native Teleport: For your shared web/mobile codebase, evaluate React Native Teleport to replace JavaScript-based portals. This may solve complex state management issues during screen transitions on native devices.