archflow

Use this agent when you need to evaluate, improve, or ensure accessibility compliance in UI components, web pages, or applications. This includes reviewing existing code for accessibility issues, providing guidance on implementing WCAG AA standards, auditing component libraries, or when building new features that need to be accessible to users with disabilities. Examples: <example>Context: User has just implemented a custom dropdown component and wants to ensure it meets accessibility standards. user: 'I just created this dropdown component, can you review it for accessibility?' assistant: 'I'll use the a11y-expert agent to review your dropdown component for WCAG AA compliance and provide specific recommendations.' <commentary>Since the user is asking for accessibility review of a component, use the a11y-expert agent to evaluate WCAG compliance.</commentary></example> <example>Context: User is planning to build a form and wants proactive accessibility guidance. user: 'I'm about to build a complex multi-step form. What accessibility considerations should I keep in mind?' assistant: 'Let me use the a11y-expert agent to provide comprehensive accessibility guidance for your multi-step form implementation.' <commentary>The user needs proactive accessibility guidance, so use the a11y-expert agent to provide WCAG-compliant recommendations.</commentary></example>

Use this agent when you need to define API contracts between frontend and backend teams. This includes creating clear specifications for endpoints, HTTP methods, request/response parameters, and example payloads. The agent should be used early in the development process before implementation begins, when planning new features that require API integration, or when documenting existing APIs for team alignment. Examples: <example>Context: The user needs to define API contracts for a new user authentication feature. user: "We need to create API contracts for our new authentication system including login, logout, and password reset" assistant: "I'll use the api-contract-architect agent to create comprehensive API contracts for the authentication system" <commentary>Since the user needs API contract documentation between frontend and backend teams, use the api-contract-architect agent to create clear specifications.</commentary></example> <example>Context: The user is planning a new feature and needs API specifications. user: "Let's define the API endpoints for the shopping cart feature" assistant: "I'm going to use the Task tool to launch the api-contract-architect agent to create the API contracts for the shopping cart feature" <commentary>The user needs API contract definitions for a new feature, so the api-contract-architect agent should be used.</commentary></example>

Use this agent when you need to build backend services using Node.js (NestJS), MySQL, and REST APIs. This includes creating API routes, implementing authentication, setting up error handling, defining database schemas, creating ER diagrams, and generating OpenAPI specifications. Examples: <example>Context: User needs to build a user management system backend. user: 'I need to create a user registration and login system with JWT authentication' assistant: 'I'll use the api-engineer agent to build the complete backend system with NestJS, MySQL schema, and authentication endpoints' <commentary>Since the user needs backend API development with the specified stack, use the api-engineer agent to handle the complete implementation.</commentary></example> <example>Context: User is building an e-commerce platform and needs product management APIs. user: 'Create REST endpoints for managing products - CRUD operations with categories and inventory tracking' assistant: 'Let me use the api-engineer agent to design the database schema and implement the product management API endpoints' <commentary>This requires backend API development with database design, perfect for the api-engineer agent.</commentary></example>

Use this agent when you need to review code output from any engineering agent to ensure quality, identify issues, and suggest improvements. Examples: After generating a new React component, use this agent to review the code for best practices and potential issues. When an API engineer creates new endpoints, use this agent to check for security vulnerabilities and performance concerns. After a mobile engineer implements a feature, use this agent to verify the code follows platform-specific guidelines and doesn't contain anti-patterns.

Consolidated DevOps engineer handling complete deployment lifecycle - CI/CD pipelines, infrastructure automation, containerization, release management, app store preparation, and version planning. Manages end-to-end deployment from development to production across web and mobile platforms.

Use this agent when you need to create or update comprehensive documentation for your project, including API documentation, onboarding guides, and internal documentation. Examples: <example>Context: User has just completed implementing a new API endpoint and needs documentation. user: 'I just finished implementing the user authentication API endpoints. Can you help document them?' assistant: 'I'll use the doc-writer agent to create comprehensive API documentation for your authentication endpoints.' <commentary>Since the user needs API documentation created, use the doc-writer agent to analyze the code and generate proper API.md documentation.</commentary></example> <example>Context: New team member is joining and needs onboarding documentation. user: 'We have a new developer starting next week. We need an onboarding guide for the project.' assistant: 'I'll use the doc-writer agent to create a comprehensive onboarding guide for your new team member.' <commentary>Since onboarding documentation is needed, use the doc-writer agent to create ONBOARDING_GUIDE.md with project setup, architecture overview, and development workflows.</commentary></example>

Consolidated DSL generator that converts wireframes/mockups into structured YAML layout DSL, then enriches it with theme styling to create complete styled-dsl.yaml specifications ready for platform implementation.

Use this agent when you need to translate high-level product vision or requirements into structured, actionable feature specifications. Examples: <example>Context: User has a product concept and needs to break it down into development-ready features. user: 'I want to build a task management app for remote teams with real-time collaboration' assistant: 'I'll use the feature-planner agent to break this down into structured features and user stories' <commentary>The user has provided a product vision that needs to be translated into structured features, which is exactly what the feature-planner agent is designed for.</commentary></example> <example>Context: Product manager needs to organize existing feature ideas into development phases. user: 'Here are some features we want: user authentication, project boards, file sharing, notifications, and team chat. Can you organize these?' assistant: 'Let me use the feature-planner agent to structure these features into epics and development phases' <commentary>The user has a list of features that need to be organized and structured, which requires the feature-planner's expertise in breaking down and organizing features.</commentary></example>

Consolidated internationalization engineer handling all platforms - React/Vue/Angular web apps, React Native, iOS SwiftUI, and Android Jetpack Compose. Refactors hardcoded strings into proper i18n patterns and generates locale-aware resource files for global market readiness.

Use this agent when you need to identify and resolve performance bottlenecks across web, backend, or mobile applications. Examples: <example>Context: User has noticed their React app is experiencing slow rendering and wants to identify the root cause. user: 'My React dashboard is taking 3-4 seconds to load and feels sluggish when scrolling through the data table' assistant: 'I'll use the performance-optimizer agent to analyze your React app's rendering performance and identify optimization opportunities' <commentary>The user is reporting performance issues with their React application, which requires specialized performance analysis and optimization recommendations.</commentary></example> <example>Context: User's API endpoints are responding slowly and they need to optimize database queries. user: 'Our PostgreSQL queries are timing out during peak hours, especially the user analytics endpoint' assistant: 'Let me use the performance-optimizer agent to profile your backend API latency and database query efficiency' <commentary>The user is experiencing backend performance issues that require database query analysis and API optimization.</commentary></example> <example>Context: User's mobile app has poor startup performance and high memory usage. user: 'Users are complaining about our Android app taking 8+ seconds to start and crashing on older devices' assistant: 'I'll deploy the performance-optimizer agent to analyze your mobile app's cold start time and memory usage patterns' <commentary>The user needs mobile-specific performance analysis for startup time and memory optimization.</commentary></example>

Use this agent when an implementation phase has been completed and needs to be validated against the acceptance criteria defined in roadmap.yaml. This agent runs Maestro mobile/web UI tests to verify that the delivered work meets the product requirements. It should be triggered after each implementation phase (Phase 3 features, Phase 4 quality passes, etc.) before marking a sprint story or feature as complete.\n\nExamples:\n\n- Example 1:\n user: "Implement the login screen with email/password authentication"\n assistant: "Here is the login screen implementation with email/password auth:"\n <implementation work completed>\n assistant: "The login screen is implemented. Now let me use the pm-maestro-reviewer agent to validate this work against the acceptance criteria in roadmap.yaml."\n <launches pm-maestro-reviewer via Task tool>\n\n- Example 2:\n user: "Build the agent creation wizard with all 4 steps"\n assistant: "I've completed the agent creation wizard with template selection, configuration, channel binding, and review steps."\n assistant: "Now let me launch the pm-maestro-reviewer agent to run Maestro tests against the acceptance criteria for this feature."\n <launches pm-maestro-reviewer via Task tool>\n\n- Example 3 (proactive, after any Phase 3 feature completion):\n Context: The api-engineer and ui-engineer subagents have both completed their work on a sprint story.\n assistant: "Both the backend API and frontend UI for the skill management feature are complete. Let me now launch the pm-maestro-reviewer agent to verify all acceptance criteria are met before we mark this story as done."\n <launches pm-maestro-reviewer via Task tool>\n\n- Example 4:\n user: "Run the acceptance tests for sprint 10 story S10-04"\n assistant: "I'll launch the pm-maestro-reviewer agent to run Maestro tests validating S10-04's acceptance criteria from roadmap.yaml."\n <launches pm-maestro-reviewer via Task tool>

Use this agent when you need to analyze post-launch product performance, integrate analytics tools, or develop data-driven improvement strategies. Examples: <example>Context: User has just launched a mobile app and wants to understand user behavior patterns. user: 'Our app has been live for 2 weeks and we're getting decent downloads but I'm not sure how users are actually engaging with it' assistant: 'Let me use the post-launch-analyst agent to help you set up comprehensive analytics tracking and analyze your user engagement patterns' <commentary>Since the user needs post-launch analysis and engagement insights, use the post-launch-analyst agent to provide analytics setup and user behavior analysis.</commentary></example> <example>Context: Product team wants to understand conversion funnels and identify improvement opportunities. user: 'We have Google Analytics set up but I need help interpreting the data and figuring out what features to prioritize next' assistant: 'I'll use the post-launch-analyst agent to analyze your analytics data and provide actionable improvement recommendations' <commentary>User needs data interpretation and roadmap guidance based on analytics, which is exactly what the post-launch-analyst agent specializes in.</commentary></example>

Use this agent when you need to define or refine product strategy, establish product vision, identify target users and their pain points, set business goals and KPIs, or create strategic product documentation. Examples: <example>Context: User is starting a new product development project and needs strategic foundation. user: 'I have an idea for a task management app but need help defining the strategy and vision' assistant: 'I'll use the product-strategist agent to help you develop a comprehensive product strategy and vision document.' <commentary>Since the user needs product strategy development, use the product-strategist agent to create strategic foundation.</commentary></example> <example>Context: User has a product but wants to reassess market positioning. user: 'Our SaaS product isn't gaining traction - can you help me rethink our strategy?' assistant: 'Let me engage the product-strategist agent to analyze your current position and develop a refined strategic approach.' <commentary>User needs strategic reassessment, so use the product-strategist agent to evaluate and redefine strategy.</commentary></example>

Consolidated QA engineer handling all testing platforms - Jest/RTL for web, Detox for React Native, XCTest/XCUITest for iOS, and Espresso/JUnit for Android. Provides comprehensive test coverage from unit to e2e across web, mobile, and backend platforms.

Use this agent when you need to add smooth, performant animations and transitions to user interface components. Examples include: implementing fade-in effects for modal dialogs, creating slide transitions between screens, adding micro-interactions like button hover states, designing loading animations, implementing gesture-driven animations like swipe-to-dismiss, or when you need to enhance user experience with motion design that follows platform-specific guidelines. Call this agent after UI components are built but before final polish, or when users specifically request animation enhancements to existing interfaces.

Consolidated UI engineer handling all frontend platforms - React/TypeScript/Tailwind for web, React Native for cross-platform mobile, SwiftUI for iOS, Jetpack Compose for Android, and HTML/CSS conversion from DSL. Replaces 6 specialized agents with unified cross-platform expertise.

Consolidated UX designer handling user flows, wireframes, visual design systems, and brand identity. Creates comprehensive user journeys with Mermaid diagrams and develops scalable theme systems in YAML format for consistent cross-platform experiences.

Phase-based development workflow manager that guides projects through structured phases from strategy and design through implementation, quality assurance, and launch. Manages roadmaps, feature branches, agent orchestration, and MCP server configuration.

1 hook across 1 event