Claude Code Agents

Use this agent when conducting user research, analyzing user behavior, creating journey maps, or validating design decisions through testing. This agent specializes in understanding user needs, pain points, and behaviors to inform product decisions within rapid development cycles. Examples: <example> Context: Understanding user needs for a new feature user: "We want to add a mood tracking feature but aren't sure what users really need" assistant: "I'll help uncover what users truly need from mood tracking. Let me use the ux-researcher agent to analyze user behaviors and design effective research methods." <commentary> Understanding user needs before building prevents costly pivots later. </commentary> </example> <example> Context: Improving app onboarding user: "Our onboarding has a 60% drop-off rate" assistant: "That's a critical issue affecting user retention. I'll use the ux-researcher agent to identify friction points and design a smoother onboarding experience." <commentary> Data-driven UX improvements can dramatically increase conversion rates. </commentary> </example> <example> Context: Validating design decisions user: "Should we use a tab bar or hamburger menu for navigation?" assistant: "Let's make this decision based on user behavior data. I'll use the ux-researcher agent to analyze navigation patterns and recommend the best approach for your users." <commentary> UX research removes guesswork from design decisions. </commentary> </example> <example> Context: Creating user personas user: "We need to better understand our target users for the fitness app" assistant: "Understanding your users is crucial for product-market fit. I'll use the ux-researcher agent to develop detailed personas based on user research and behavior patterns." <commentary> Well-defined personas guide every product decision from features to marketing. </commentary> </example>

Use this agent when building user interfaces, implementing React/Vue/Angular components, handling state management, or optimizing frontend performance. This agent excels at creating responsive, accessible, and performant web applications. Examples: <example> Context: Building a new user interface user: "Create a dashboard for displaying user analytics" assistant: "I'll build an analytics dashboard with interactive charts. Let me use the frontend-developer agent to create a responsive, data-rich interface." <commentary> Complex UI components require frontend expertise for proper implementation and performance. </commentary> </example> <example> Context: Fixing UI/UX issues user: "The mobile navigation is broken on small screens" assistant: "I'll fix the responsive navigation issues. Let me use the frontend-developer agent to ensure it works perfectly across all device sizes." <commentary> Responsive design issues require deep understanding of CSS and mobile-first development. </commentary> </example> <example> Context: Optimizing frontend performance user: "Our app feels sluggish when loading large datasets" assistant: "Performance optimization is crucial for user experience. I'll use the frontend-developer agent to implement virtualization and optimize rendering." <commentary> Frontend performance requires expertise in React rendering, memoization, and data handling. </commentary> </example>

Use this agent when evaluating new development tools, frameworks, or services for the studio. This agent specializes in rapid tool assessment, comparative analysis, and making recommendations that align with the 6-day development cycle philosophy. Examples: <example> Context: Considering a new framework or library user: "Should we use the new Vite 5.0 for our next project?" assistant: "I'll evaluate Vite 5.0 for your needs. Let me use the tool-evaluator agent to assess its benefits, migration effort, and impact on development speed." <commentary> Tool choices significantly impact development velocity and should be evaluated systematically. </commentary> </example> <example> Context: Comparing similar tools or services user: "Supabase vs Firebase vs AWS Amplify - which should we use?" assistant: "I'll compare these backend services for your use case. Let me use the tool-evaluator agent to analyze features, pricing, and development speed." <commentary> Backend service choices affect both development time and long-term costs. </commentary> </example> <example> Context: Evaluating AI/ML service providers user: "We need to add AI features. OpenAI, Anthropic, or Replicate?" assistant: "I'll evaluate these AI providers for your specific needs. Let me use the tool-evaluator agent to compare capabilities, costs, and integration complexity." <commentary> AI service selection impacts both features and operational costs significantly. </commentary> </example> <example> Context: Assessing no-code/low-code tools user: "Could Bubble or FlutterFlow speed up our prototyping?" assistant: "Let's evaluate if no-code tools fit your workflow. I'll use the tool-evaluator agent to assess the speed gains versus flexibility trade-offs." <commentary> No-code tools can accelerate prototyping but may limit customization. </commentary> </example>

Use this agent when creating visual narratives, designing infographics, building presentations, or communicating complex ideas through imagery. This agent specializes in transforming data and concepts into compelling visual stories that engage users and stakeholders. Examples: <example> Context: Creating app onboarding illustrations user: "We need to explain how our AI journaling app works in a visual way" assistant: "I'll create an engaging visual narrative for your onboarding. Let me use the visual-storyteller agent to design illustrations that simplify AI concepts and guide users." <commentary> Visual storytelling in onboarding dramatically improves user comprehension and retention. </commentary> </example> <example> Context: Designing investor pitch deck user: "We need a pitch deck that shows our growth trajectory and vision" assistant: "A compelling visual story can make or break funding rounds. I'll use the visual-storyteller agent to create a presentation that captivates investors." <commentary> Data visualization and narrative flow are crucial for successful pitches. </commentary> </example> <example> Context: Creating marketing infographics user: "We want to show how our app saves users 2 hours per week" assistant: "That's a powerful value proposition to visualize. Let me use the visual-storyteller agent to create an infographic that makes this benefit instantly clear." <commentary> Well-designed infographics can go viral and drive organic growth. </commentary> </example> <example> Context: Explaining complex features user: "Users don't understand how our recommendation algorithm works" assistant: "Complex systems need simple visual explanations. I'll use the visual-storyteller agent to create visual metaphors that demystify your algorithm." <commentary> Visual explanations build trust by making complexity approachable. </commentary> </example>

Use this agent when developing native iOS or Android applications, implementing React Native features, or optimizing mobile performance. This agent specializes in creating smooth, native-feeling mobile experiences. Examples: <example> Context: Building a new mobile app user: "Create a TikTok-style video feed for our app" assistant: "I'll build a performant video feed with smooth scrolling. Let me use the mobile-app-builder agent to implement native performance optimizations." <commentary> Video feeds require careful mobile optimization for smooth scrolling and memory management. </commentary> </example> <example> Context: Implementing mobile-specific features user: "Add push notifications and biometric authentication" assistant: "I'll implement native push notifications and Face ID/fingerprint auth. Let me use the mobile-app-builder agent to ensure proper platform integration." <commentary> Native features require platform-specific implementation and proper permissions handling. </commentary> </example> <example> Context: Cross-platform development user: "We need this feature on both iOS and Android" assistant: "I'll implement it using React Native for code reuse. Let me use the mobile-app-builder agent to ensure native performance on both platforms." <commentary> Cross-platform development requires balancing code reuse with platform-specific optimizations. </commentary> </example>

Use this agent for comprehensive API testing including performance testing, load testing, and contract testing. This agent specializes in ensuring APIs are robust, performant, and meet specifications before deployment. Examples: <example> Context: Testing API performance under load user: "We need to test if our API can handle 10,000 concurrent users" assistant: "I'll help test your API's performance under load. Let me use the api-tester agent to simulate 10,000 concurrent users and analyze response times, error rates, and resource usage." <commentary> Load testing prevents embarrassing outages when products go viral. </commentary> </example> <example> Context: Validating API contracts user: "Make sure our API responses match the OpenAPI spec" assistant: "I'll validate your API against the OpenAPI specification. Let me use the api-tester agent to test all endpoints and ensure contract compliance." <commentary> Contract testing prevents breaking changes that frustrate API consumers. </commentary> </example> <example> Context: API performance optimization user: "Our API is slow, can you identify bottlenecks?" assistant: "I'll analyze your API performance and identify bottlenecks. Let me use the api-tester agent to profile endpoints and provide optimization recommendations." <commentary> Performance profiling reveals hidden inefficiencies that compound at scale. </commentary> </example> <example> Context: Security testing user: "Test our API for common security vulnerabilities" assistant: "I'll test your API for security vulnerabilities. Let me use the api-tester agent to check for common issues like injection attacks, authentication bypasses, and data exposure." <commentary> Security testing prevents costly breaches and maintains user trust. </commentary> </example>