Expert code review specialist. Use immediately after writing or modifying code, or when explicitly requested to review recent changes. Examples:\n\n<example>\nContext: The user has just written a new function or modified existing code.\nuser: "Please implement a function to calculate fibonacci numbers"\nassistant: "Here's the fibonacci function implementation:"\n<function implementation shown>\nassistant: "Now let me use the code-reviewer agent to review this implementation"\n<commentary>\nSince a new function was just implemented, use the Task tool to launch the code-reviewer agent to analyze the code quality.\n</commentary>\n</example>\n\n<example>\nContext: The user explicitly asks for code review.\nuser: "Review my recent changes"\nassistant: "I'll use the code-reviewer agent to analyze your recent code changes"\n<commentary>\nThe user explicitly requested a code review, so use the Task tool to launch the code-reviewer agent.\n</commentary>\n</example>\n\n<example>\nContext: After fixing a bug or refactoring code.\nuser: "I've refactored the authentication module"\nassistant: "I'll invoke the code-reviewer agent to review your refactored authentication module"\n<commentary>\nSince code was refactored, use the Task tool to launch the code-reviewer agent to ensure quality.\n</commentary>\n</example>
Evaluate extensibility patterns, abstraction layers, and configuration approaches in frameworks. Use when (1) assessing base class/protocol design, (2) understanding dependency injection patterns, (3) evaluating plugin/extension systems, (4) comparing code-first vs config-first approaches, or (5) determining framework flexibility for customization.
Use this agent when you need expert UI/UX feedback on components or pages in the application. This agent will navigate to the specific page using Playwright, capture screenshots, and provide detailed design analysis and improvement recommendations based on modern design principles and the project's established style patterns. Perfect for design reviews, UI polish tasks, and ensuring consistency across the application.\n\nExamples:\n- <example>\n Context: The user wants feedback on a newly implemented dashboard component.\n user: "Can you review the dashboard UI and suggest improvements?"\n assistant: "I'll use the ui-ux-analyzer agent to navigate to the dashboard, capture screenshots, and provide detailed UI/UX feedback."\n <commentary>\n Since the user is asking for UI review and improvements, use the ui-ux-analyzer agent to analyze the visual design and user experience.\n </commentary>\n</example>\n- <example>\n Context: After implementing a new feature, the developer wants to ensure it matches the project's design standards.\n user: "I just finished the user profile page. Please check if it follows our design system."\n assistant: "Let me launch the ui-ux-analyzer agent to review the user profile page against our design standards."\n <commentary>\n The user needs design validation, so use the ui-ux-analyzer agent to assess consistency with the project's style guide.\n </commentary>\n</example>
Comprehensive React component coding guidelines, refactoring principles, and architectural patterns. **CRITICAL**: Focuses on patterns AI commonly fails to implement correctly, especially testability, props control, and component responsibility separation. Reference this skill when implementing or refactoring React components during Phase 2.
Automated code quality fixer that safely applies AST-GREP fixes with regression testing. Use PROACTIVELY when quality issues are detected or when /fix-quality is invoked.
Use this agent when you need expert code review after making changes to the codebase, particularly after rust-analyzer has confirmed technical standards are met. This agent focuses on higher-level concerns like architecture, design patterns, security implications, and code maintainability rather than syntax or compilation issues. <example>\nContext: The user has just implemented a new WAF detection module and wants to ensure it follows best practices.\nuser: "I've added a new CloudFlare detection module to our WAF detector"\nassistant: "I'll review the implementation to ensure it follows our design patterns and security standards"\n<commentary>\nSince new code has been written for the WAF detector, use the code-reviewer agent to analyze the design, security, and logic quality.\n</commentary>\nassistant: "Let me use the code-reviewer agent to analyze the design and security aspects of your CloudFlare detection module"\n</example>\n<example>\nContext: After fixing a bug, the user wants to ensure the solution is well-designed.\nuser: "I've fixed the false positive issue in the AWS WAF detector"\nassistant: "I'll review your fix to ensure it addresses the root cause properly"\n<commentary>\nAfter a bug fix, use the code-reviewer agent to verify the solution follows good design principles and doesn't introduce new issues.\n</commentary>\nassistant: "Now I'll use the code-reviewer agent to review the design and logic of your fix"\n</example>
Provides React patterns for hooks, effects, refs, and component design. Covers escape hatches, anti-patterns, and correct effect usage. Must use when reading or writing React components (.tsx, .jsx files with React imports).
Use this agent when you have written or modified code and need a thorough review before committing. This agent should be called after completing a logical chunk of work but before running git commit. Examples: <example>Context: User has just implemented a new feature for markdown parsing. user: 'I've added support for parsing metadata properties in markdown files. Here's the diff...' assistant: 'Let me use the code-reviewer agent to review this implementation before you commit.' <commentary>Since the user has completed a code change, use the code-reviewer agent to analyze the diff for quality, design, and architectural alignment.</commentary></example> <example>Context: User has refactored a component in the Dioxus UI. user: 'I refactored the file browser component to use better state management' assistant: 'I'll review this refactoring with the code-reviewer agent to ensure it follows best practices.' <commentary>The user has made changes that need review before committing, so use the code-reviewer agent.</commentary></example>
Review documentation changes for compliance with the Metabase writing style guide. Use when reviewing pull requests, files, or diffs containing documentation markdown files.
Expert code review specialist for quality, security, and maintainability. Use PROACTIVELY after writing or modifying code to ensure high development standards.