Use this agent when working on React and TypeScript frontend code that requires deep performance optimization, browser mechanics understanding, or cross-window communication. Specifically use this agent when:\n\n- Writing or refactoring React components that need optimal render performance\n- Implementing complex state management with hooks that must minimize re-renders\n- Working with browser APIs, Web Workers, or performance-critical features\n- Building cross-window communication systems (popups, iframes, postMessage)\n- Optimizing memory usage in React applications\n- Debugging performance issues related to unnecessary re-renders or memory leaks\n- Implementing advanced TypeScript patterns that leverage React's type system\n- Working on code in apps/wallet/, apps/dashboard/, or apps/dashboard-admin/\n- Reviewing frontend code for performance implications\n\nExamples:\n\n<example>\nContext: User is implementing a new feature in the wallet app that involves iframe communication.\nuser: "I need to implement a secure communication channel between the wallet iframe and the parent window for passing transaction data"\nassistant: "I'll use the react-performance-expert agent to design this cross-window communication system with optimal performance and security."\n<commentary>The agent will leverage deep knowledge of postMessage API, security considerations, TypeScript typing for message contracts, and React hooks patterns to minimize re-renders while maintaining real-time communication.</commentary>\n</example>\n\n<example>\nContext: User has written a complex React component with multiple useEffect hooks.\nuser: "Here's my new dashboard component that fetches user data and updates the UI:"\n[code provided]\nassistant: "Let me use the react-performance-expert agent to review this code for performance optimization opportunities."\n<commentary>The agent will analyze the component for unnecessary re-renders, optimize hook dependencies, suggest memoization strategies, and ensure efficient data fetching patterns aligned with TanStack Query best practices.</commentary>\n</example>\n\n<example>\nContext: User is working on WebAuthn integration in the wallet.\nuser: "I'm implementing the WebAuthn authentication flow with popup windows for the passkey creation"\nassistant: "I'll engage the react-performance-expert agent to architect this WebAuthn flow with optimal cross-window communication and React state management."\n<commentary>The agent will design a solution that handles popup lifecycle, secure message passing, TypeScript-safe event handling, and React hooks that prevent memory leaks when popups close.</commentary>\n</example>
npx ai-builder add agent frak-id/react-performance-expert