developer-tools

Use this agent when you need to refactor code to improve readability, reduce complexity, or enhance maintainability without altering functionality. This includes simplifying complex logic, removing redundancy, improving naming, extracting methods, reducing nesting, and applying clean code principles. The agent preserves all public APIs and external behavior unless explicitly authorized to change them.

Elite code review expert specializing in modern AI-powered code analysis, security vulnerabilities, performance optimization, and production reliability. Masters static analysis tools, security scanning, and configuration review with 2024/2025 best practices. Use PROACTIVELY for code quality assurance.

Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.

Use this agent when you need to implement features based on detailed specifications (PRD, ADR, UI/UX briefs). This agent excels at translating comprehensive design documents into production-ready code while maintaining strict adherence to architectural patterns and best practices. <example> Context: The user has a set of design documents and needs to implement a new feature. user: "I have a PRD for a user profile feature, an ADR defining our microservices architecture, and UI/UX mockups. Please implement the profile management functionality." assistant: "I'll use the coder agent to implement this feature based on your specifications." <commentary> Since the user has detailed specifications that need to be translated into code, use the coder agent to ensure proper implementation following all design documents. </commentary> </example> <example> Context: The user needs to implement a feature with strict architectural requirements. user: "Here's the specification for our new payment processing module. It needs to follow our layered architecture with proper separation of concerns." assistant: "Let me use the coder agent to implement this payment module according to your specifications and architectural requirements." <commentary> The user has specifications that require careful adherence to architectural patterns, making this a perfect use case for the coder agent. </commentary> </example>

Debugging specialist for errors, test failures, and unexpected behavior. Use proactively when encountering any issues.

Expert modern frontend developer specializing in React 19+, Vue 3, and cutting-edge web development. Masters component composition, performance optimization, and modern tooling (Vite, Vitest, Biome). Builds type-safe, accessible, performant applications using latest patterns. Use PROACTIVELY for UI development, SPA creation, or modern frontend architecture.

Expert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns. Use PROACTIVELY for frontend security implementations or client-side security code reviews.

Expert Next.js 14+ developer specializing in App Router architecture, React Server Components, and edge-first performance. Masters server actions, streaming SSR, partial pre-rendering, and modern full-stack patterns. Excels at building production-grade applications with exceptional Core Web Vitals. Use PROACTIVELY for Next.js architecture decisions, performance optimization, and complex feature implementation.

Review UI code for compliance with modern web interface standards. Output concise but comprehensive—sacrifice grammar for brevity. High signal-to-noise.

Expert TypeScript developer focused on writing "inevitable code" - TypeScript that feels natural, obvious, and effortless to understand. Use for type-safe implementations, refactoring, and creating maintainable TypeScript architectures.

Orchestrates specialist coding agents (TypeScript, React, frontend, security, debugging) to handle coding tasks. Automatically selects the right specialist based on the task. Make sure to use this skill whenever the user needs help writing, debugging, refactoring, or reviewing code — it coordinates the best specialist agent for the job.

Audits React and Next.js components for performance issues, unnecessary re-renders, bundle size problems, and waterfall patterns using 57 rules organized by priority. Make sure to use this skill whenever the user asks to review React or Next.js code, check performance, optimize rendering, reduce bundle size, or mentions re-renders — even if they just say "is my React code good?"