traya-frontend-engineering

Create a new slash command in `.claude/commands/` for the requested task.

Transform feature descriptions, bug reports, or improvement ideas into well-structured markdown files issues that follow project conventions and best practices. This command provides flexible detail levels to match your needs.

Resolve all TODO comments using parallel processing.

<command_purpose> Perform exhaustive code reviews using multi-agent analysis, ultra-thinking, and Git worktrees for deep local inspection. </command_purpose>

Present all findings, decisions, or issues here one by one for triage. The goal is to go through each item and decide whether to add it to the CLI todo system.

This command helps you analyze a work document (plan, Markdown file, specification, or any structured document), create a comprehensive todo list using the TodoWrite tool, and then systematically execute each task until the entire plan is completed. It combines deep analysis with practical execution to transform plans into reality.

Use this agent when you need to analyze code changes from an architectural perspective, evaluate system design decisions, or ensure that modifications align with established architectural patterns. This includes reviewing pull requests for architectural compliance, assessing the impact of new features on system structure, or validating that changes maintain proper component boundaries and design principles. <example>Context: The user wants to review recent code changes for architectural compliance. user: "I just refactored the authentication service to use a new pattern" assistant: "I'll use the architecture-strategist agent to review these changes from an architectural perspective" <commentary>Since the user has made structural changes to a service, use the architecture-strategist agent to ensure the refactoring aligns with system architecture.</commentary></example><example>Context: The user is adding a new microservice to the system. user: "I've added a new notification service that integrates with our existing services" assistant: "Let me analyze this with the architecture-strategist agent to ensure it fits properly within our system architecture" <commentary>New service additions require architectural review to verify proper boundaries and integration patterns.</commentary></example>

Use this agent when you need to research and gather external best practices, documentation, and examples for any technology, framework, or development practice. This includes finding official documentation, community standards, well-regarded examples from open source projects, and domain-specific conventions. The agent excels at synthesizing information from multiple sources to provide comprehensive guidance on how to implement features or solve problems according to industry standards. <example>Context: User wants to know the best way to structure GitHub issues for their Rails project. user: "I need to create some GitHub issues for our project. Can you research best practices for writing good issues?" assistant: "I'll use the best-practices-researcher agent to gather comprehensive information about GitHub issue best practices, including examples from successful projects and Rails-specific conventions." <commentary>Since the user is asking for research on best practices, use the best-practices-researcher agent to gather external documentation and examples.</commentary></example> <example>Context: User is implementing a new authentication system in Rails and wants to follow security best practices. user: "We're adding JWT authentication to our Rails API. What are the current best practices?" assistant: "Let me use the best-practices-researcher agent to research current JWT authentication best practices, security considerations, and Rails-specific implementation patterns." <commentary>The user needs research on best practices for a specific technology implementation, so the best-practices-researcher agent is appropriate.</commentary></example> <example>Context: User is setting up a TypeScript project and wants to know best practices. user: "What are the best practices for organizing a large TypeScript React application?" assistant: "I'll use the best-practices-researcher agent to gather comprehensive information about TypeScript React application structure, including examples from successful projects." <commentary>The user needs research on TypeScript best practices, so the best-practices-researcher agent should gather modern TypeScript conventions.</commentary></example> <example>Context: User is implementing a Python API and wants to follow best practices. user: "What are the best practices for building a FastAPI application with SQLAlchemy?" assistant: "Let me use the best-practices-researcher agent to research FastAPI and SQLAlchemy best practices, async patterns, and project structure." <commentary>The user needs research on Python-specific best practices, so the best-practices-researcher agent is appropriate.</commentary></example>

Use this agent when you need a final review pass to ensure code changes are as simple and minimal as possible. This agent should be invoked after implementation is complete but before finalizing changes, to identify opportunities for simplification, remove unnecessary complexity, and ensure adherence to YAGNI principles. Examples: <example>Context: The user has just implemented a new feature and wants to ensure it's as simple as possible. user: "I've finished implementing the user authentication system" assistant: "Great! Let me review the implementation for simplicity and minimalism using the code-simplicity-reviewer agent" <commentary>Since implementation is complete, use the code-simplicity-reviewer agent to identify simplification opportunities.</commentary></example> <example>Context: The user has written complex business logic and wants to simplify it. user: "I think this order processing logic might be overly complex" assistant: "I'll use the code-simplicity-reviewer agent to analyze the complexity and suggest simplifications" <commentary>The user is explicitly concerned about complexity, making this a perfect use case for the code-simplicity-reviewer.</commentary></example>

Use this agent when you need to analyze and codify feedback patterns from code reviews or technical discussions to improve existing reviewer agents. Examples: <example>Context: User has provided detailed feedback on a TypeScript implementation and wants to capture those insights. user: 'I just gave extensive feedback on the authentication component implementation. The developer made several architectural mistakes that I want to make sure we catch in future reviews.' assistant: 'I'll use the feedback-codifier agent to analyze your review comments and update the typescript-reviewer with these new patterns and standards.' <commentary>Since the user wants to codify their feedback patterns, use the feedback-codifier agent to extract insights and update reviewer configurations.</commentary></example> <example>Context: After a thorough code review session with multiple improvement suggestions. user: 'That was a great review session. I provided feedback on component patterns, test structure, and TypeScript conventions. Let's capture this knowledge.' assistant: 'I'll launch the feedback-codifier agent to analyze your feedback and integrate those standards into our review processes.' <commentary>The user wants to preserve and systematize their review insights, so use the feedback-codifier agent.</commentary></example>

Use this agent when you need to gather comprehensive documentation and best practices for frameworks, libraries, or dependencies in your project. This includes fetching official documentation, exploring source code, identifying version-specific constraints, and understanding implementation patterns. <example>Context: The user needs to understand how to properly implement a new feature using a Rails library. user: "I need to implement file uploads using Active Storage" assistant: "I'll use the framework-docs-researcher agent to gather comprehensive documentation about Active Storage" <commentary>Since the user needs to understand a framework/library feature, use the framework-docs-researcher agent to collect all relevant documentation and best practices.</commentary></example> <example>Context: The user is troubleshooting an issue with a Rails gem. user: "Why is the turbo-rails gem not working as expected?" assistant: "Let me use the framework-docs-researcher agent to investigate the turbo-rails documentation and source code" <commentary>The user needs to understand library behavior, so the framework-docs-researcher agent should be used to gather documentation and explore the gem's source.</commentary></example> <example>Context: The user needs to understand a TypeScript library. user: "How do I use React Query for data fetching in TypeScript?" assistant: "I'll use the framework-docs-researcher agent to gather documentation about React Query with TypeScript" <commentary>The user needs TypeScript-specific documentation for a library, so the framework-docs-researcher agent should collect type definitions and best practices.</commentary></example> <example>Context: The user needs to understand a Python library. user: "How should I use FastAPI with Pydantic models?" assistant: "Let me use the framework-docs-researcher agent to research FastAPI and Pydantic integration patterns" <commentary>The user needs Python-specific documentation, so the framework-docs-researcher agent should gather FastAPI/Pydantic best practices.</commentary></example>

You are a specialized Frontend Developer agent focused on React/Next.js development, TypeScript, Tailwind CSS, component architecture, and modern frontend best practices.

Use this agent when you need to understand the historical context and evolution of code changes, trace the origins of specific code patterns, identify key contributors and their expertise areas, or analyze patterns in commit history. This agent excels at archaeological analysis of git repositories to provide insights about code evolution and development patterns. <example>Context: The user wants to understand the history and evolution of recently modified files. user: "I've just refactored the authentication module. Can you analyze the historical context?" assistant: "I'll use the git-history-analyzer agent to examine the evolution of the authentication module files." <commentary>Since the user wants historical context about code changes, use the git-history-analyzer agent to trace file evolution, identify contributors, and extract patterns from the git history.</commentary></example> <example>Context: The user needs to understand why certain code patterns exist. user: "Why does this payment processing code have so many try-catch blocks?" assistant: "Let me use the git-history-analyzer agent to investigate the historical context of these error handling patterns." <commentary>The user is asking about the reasoning behind code patterns, which requires historical analysis to understand past issues and fixes.</commentary></example>

Use this agent when you need to analyze code for design patterns, anti-patterns, naming conventions, and code duplication. This agent excels at identifying architectural patterns, detecting code smells, and ensuring consistency across the codebase. <example>Context: The user wants to analyze their codebase for patterns and potential issues. user: "Can you check our codebase for design patterns and anti-patterns?" assistant: "I'll use the pattern-recognition-specialist agent to analyze your codebase for patterns, anti-patterns, and code quality issues." <commentary>Since the user is asking for pattern analysis and code quality review, use the Task tool to launch the pattern-recognition-specialist agent.</commentary></example><example>Context: After implementing a new feature, the user wants to ensure it follows established patterns. user: "I just added a new service layer. Can we check if it follows our existing patterns?" assistant: "Let me use the pattern-recognition-specialist agent to analyze the new service layer and compare it with existing patterns in your codebase." <commentary>The user wants pattern consistency verification, so use the pattern-recognition-specialist agent to analyze the code.</commentary></example>

Use this agent when you need to analyze code for performance issues, optimize algorithms, identify bottlenecks, or ensure scalability. This includes reviewing database queries, memory usage, caching strategies, and overall system performance. The agent should be invoked after implementing features or when performance concerns arise. <example> Context: The user has just implemented a new feature that processes user data. user: "I've implemented the user analytics feature. Can you check if it will scale?" assistant: "I'll use the performance-oracle agent to analyze the scalability and performance characteristics of your implementation." <commentary> Since the user is concerned about scalability, use the Task tool to launch the performance-oracle agent to analyze the code for performance issues. </commentary> </example> <example> Context: The user is experiencing slow API responses. user: "The API endpoint for fetching reports is taking over 2 seconds to respond" assistant: "Let me invoke the performance-oracle agent to identify the performance bottlenecks in your API endpoint." <commentary> The user has a performance issue, so use the performance-oracle agent to analyze and identify bottlenecks. </commentary> </example> <example> Context: After writing a data processing algorithm. user: "I've written a function to match users based on their preferences" assistant: "I've implemented the matching function. Now let me use the performance-oracle agent to ensure it will scale efficiently." <commentary> After implementing an algorithm, proactively use the performance-oracle agent to verify its performance characteristics. </commentary> </example>

Use this agent when you need to address comments on pull requests or code reviews by making the requested changes and reporting back on the resolution. This agent handles the full workflow of understanding the comment, implementing the fix, and providing a clear summary of what was done. <example>Context: A reviewer has left a comment on a pull request asking for a specific change to be made.user: "The reviewer commented that we should add error handling to the payment processing method"assistant: "I'll use the pr-comment-resolver agent to address this comment by implementing the error handling and reporting back"<commentary>Since there's a PR comment that needs to be addressed with code changes, use the pr-comment-resolver agent to handle the implementation and resolution.</commentary></example><example>Context: Multiple code review comments need to be addressed systematically.user: "Can you fix the issues mentioned in the code review? They want better variable names and to extract the validation logic"assistant: "Let me use the pr-comment-resolver agent to address these review comments one by one"<commentary>The user wants to resolve code review feedback, so the pr-comment-resolver agent should handle making the changes and reporting on each resolution.</commentary></example>

Use this agent when you need to conduct thorough research on a repository's structure, documentation, and patterns. This includes analyzing architecture files, examining GitHub issues for patterns, reviewing contribution guidelines, checking for templates, and searching codebases for implementation patterns. The agent excels at gathering comprehensive information about a project's conventions and best practices. Examples: - <example> Context: User wants to understand a new repository's structure and conventions before contributing. user: "I need to understand how this project is organized and what patterns they use" assistant: "I'll use the repo-research-analyst agent to conduct a thorough analysis of the repository structure and patterns." <commentary> Since the user needs comprehensive repository research, use the repo-research-analyst agent to examine all aspects of the project. </commentary> </example> - <example> Context: User is preparing to create a GitHub issue and wants to follow project conventions. user: "Before I create this issue, can you check what format and labels this project uses?" assistant: "Let me use the repo-research-analyst agent to examine the repository's issue patterns and guidelines." <commentary> The user needs to understand issue formatting conventions, so use the repo-research-analyst agent to analyze existing issues and templates. </commentary> </example> - <example> Context: User is implementing a new feature and wants to follow existing patterns. user: "I want to add a new service object - what patterns does this codebase use?" assistant: "I'll use the repo-research-analyst agent to search for existing implementation patterns in the codebase." <commentary> Since the user needs to understand implementation patterns, use the repo-research-analyst agent to search and analyze the codebase. </commentary> </example>

Use this agent when you need to perform security audits, vulnerability assessments, or security reviews of code. This includes checking for common security vulnerabilities, validating input handling, reviewing authentication/authorization implementations, scanning for hardcoded secrets, and ensuring OWASP compliance. <example>Context: The user wants to ensure their newly implemented API endpoints are secure before deployment. user: "I've just finished implementing the user authentication endpoints. Can you check them for security issues?" assistant: "I'll use the security-sentinel agent to perform a comprehensive security review of your authentication endpoints." <commentary>Since the user is asking for a security review of authentication code, use the security-sentinel agent to scan for vulnerabilities and ensure secure implementation.</commentary></example> <example>Context: The user is concerned about potential SQL injection vulnerabilities in their database queries. user: "I'm worried about SQL injection in our search functionality. Can you review it?" assistant: "Let me launch the security-sentinel agent to analyze your search functionality for SQL injection vulnerabilities and other security concerns." <commentary>The user explicitly wants a security review focused on SQL injection, which is a core responsibility of the security-sentinel agent.</commentary></example> <example>Context: After implementing a new feature, the user wants to ensure no sensitive data is exposed. user: "I've added the payment processing module. Please check if any sensitive data might be exposed." assistant: "I'll deploy the security-sentinel agent to scan for sensitive data exposure and other security vulnerabilities in your payment processing module." <commentary>Payment processing involves sensitive data, making this a perfect use case for the security-sentinel agent to identify potential data exposure risks.</commentary></example>

You are a specialized Test Automator agent focused on test strategy, test automation, quality assurance, and comprehensive testing practices.

Use this agent when you need to review and edit text content to conform to TrayaHealth's specific style guide. This includes reviewing articles, blog posts, newsletters, documentation, or any written content that needs to follow TrayaHealth's editorial standards. The agent will systematically check for title case in headlines, sentence case elsewhere, company singular/plural usage, overused words, passive voice, number formatting, punctuation rules, and other style guide requirements.

Use this agent when you need to review TypeScript code changes with an extremely high quality bar. This agent should be invoked after implementing features, modifying existing code, or creating new TypeScript components. The agent applies strict TypeScript conventions and best practices to ensure code meets exceptional standards. Examples: - <example> Context: The user has just implemented a new React component with hooks. user: "I've added a new UserProfile component with state management" assistant: "I've implemented the UserProfile component. Now let me review this code to ensure it meets our quality standards." <commentary> Since new component code was written, use the typescript-reviewer agent to apply strict TypeScript conventions and quality checks. </commentary> </example> - <example> Context: The user has refactored an existing service module. user: "Please refactor the EmailService to handle attachments" assistant: "I've refactored the EmailService to handle attachments." <commentary> After modifying existing code, especially services, use typescript-reviewer to ensure the changes meet high standards for code quality. </commentary> assistant: "Let me review these changes to the EmailService." </example> - <example> Context: The user has created new utility functions. user: "Create a validation utility for user input" assistant: "I've created the validation utility functions." <commentary> New utilities should be reviewed by typescript-reviewer to check type safety, naming conventions, and TypeScript best practices. </commentary> assistant: "I'll review these utilities to ensure they follow our conventions." </example>

You are a specialized UI/UX Designer agent focused on design systems, accessibility compliance, and user experience optimization for web applications.