Development Team Claude Code Agents
17 agents in the Development Team category. Each installs in one command and drops straight into your .claude directory.
Frontend Developer
"Use when building complete frontend applications across React, Vue, and Angular frameworks requiring multi-framework expertise and full-stack integration. Specifically:\n\n<example>\nContext: Starting a new React frontend for an e-commerce platform with complex state management and real-time updates\nuser: \"Build a React frontend for product catalog with filtering, cart management, and checkout flow. Need TypeScript, responsive design, and 85% test coverage.\"\nassistant: \"I'll create a scalable React frontend with component architecture, server state via TanStack Query, client state via Zustand, responsive Tailwind v4 CSS styling, WCAG 2.2 accessibility compliance, and comprehensive testing with Vitest + Testing Library. First, let me query the context-manager for your existing infrastructure, design language, and API contracts.\"\n<commentary>\nUse frontend-developer when you need full frontend application development with multiple pages, complex state, user interactions, and integration with backend APIs. This agent handles the complete frontend lifecycle from architecture to deployment.\n</commentary>\n</example>\n\n<example>\nContext: Migrating legacy jQuery frontend to modern Vue 3 with existing PHP backend\nuser: \"We need to modernize our PHP web app's frontend from jQuery to Vue 3.5. The backend is stable. Need to maintain existing functionality while improving UX and code maintainability.\"\nassistant: \"I'll architect a Vue 3.5 migration strategy preserving backend contracts, gradually replace jQuery components with Vue Single File Components using the Composition API and reactive props destructure, implement TypeScript for type safety, add Pinia for state management, ensure 90% test coverage with Vitest, and maintain zero-downtime during rollout.\"\n<commentary>\nUse frontend-developer when modernizing existing frontend codebases across different frameworks. This agent excels at strategic migrations, maintaining backward compatibility, and integrating with established backend systems.\n</commentary>\n</example>\n\n<example>\nContext: Building shared component library for multi-team organization using different frameworks\nuser: \"Create a component library that works across our React, Vue, and Angular projects. Need consistent design tokens, accessibility, documentation, and framework-agnostic design patterns.\"\nassistant: \"I'll design a framework-agnostic component architecture with TypeScript interfaces, implement components in multiple frameworks maintaining API consistency, establish design token system with CSS custom properties, write Storybook documentation, create migration guides for teams, and ensure WCAG 2.2 compliance across all implementations — including Focus Appearance and Target Size Minimum criteria.\"\n<commentary>\nUse frontend-developer for multi-framework solutions, design system work, and component library architecture. This agent bridges different frontend ecosystems while maintaining consistency and quality standards.\n</commentary>\n</example>"
Ui Ux Designer
Use proactively when reviewing UI/UX design, evaluating visual interfaces, auditing web components for usability issues, checking accessibility compliance, or critiquing design aesthetics. Invoke when the user shares screenshots, mockup files, CSS, HTML, design tokens, or asks for feedback on visual design decisions, font choices, color palettes, layout structure, or user experience. Also use when asked to evaluate AI chat interfaces, copilot UIs, or prompt-driven interface patterns.
Backend Architect
"Backend system architecture and API design specialist. Use PROACTIVELY for greenfield service design, monolith decomposition, API paradigm selection (REST/gRPC/GraphQL), microservice boundaries, database schemas, scalability planning, event-driven architecture, and observability design. This agent focuses on architecture and design decisions — for writing implementation code use the backend-developer agent instead.\n\n<example>\nContext: An existing Rails monolith is growing too large and needs to be split into independent services.\nuser: \"We need to split our Rails monolith into services — where do we start?\"\nassistant: \"I'll analyze the monolith's bounded contexts, data dependencies, and traffic patterns to produce a phased decomposition roadmap with service boundary definitions, API contracts between services, and a strangler-fig migration strategy.\"\n<commentary>\nMonolith decomposition is a core architecture concern: service boundaries, migration sequencing, and managing the transition period without downtime. Use backend-architect for design decisions; use backend-developer to implement the resulting services.\n</commentary>\n</example>\n\n<example>\nContext: A startup is building a new real-time ride-sharing platform from scratch and needs an initial backend architecture.\nuser: \"Design the backend architecture for a real-time ride-sharing platform expected to handle 50k concurrent users at launch.\"\nassistant: \"I'll design a service architecture covering trip lifecycle management, driver matching, real-time location tracking, and payment processing — including API contracts, event-driven communication via Kafka, PostgreSQL + PostGIS schema, caching strategy with Redis, an OpenAPI 3.1 spec for the public API, and an observability plan with OpenTelemetry and SLO thresholds.\"\n<commentary>\nGreenfield service architecture requires upfront decisions on API paradigms, data consistency, scaling approach, and observability before any code is written. This is backend-architect territory.\n</commentary>\n</example>"
Fullstack Developer
"Use this agent when you need to build complete features spanning database, API, and frontend layers together as a cohesive unit. Specifically:\\n\\n<example>\\nContext: User wants to build a new user authentication system for a web application that requires database schema, API endpoints, and frontend forms.\\nuser: \"Build a complete user registration feature with PostgreSQL schema, Node.js API endpoints, and React forms including validation and error handling.\"\\nassistant: \"I'll implement this as a full-stack feature. Let me start by analyzing the existing database schema, then design the API contracts, and finally build the React components with proper integration and testing across all layers.\"\\n<commentary>\\nThis is a core fullstack-developer use case: new feature that touches all stack layers requires coordinated development from database to UI. The agent needs context on existing patterns and must ensure type-safety and consistency across all three layers.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Existing backend API needs frontend implementation along with database optimization to support a new real-time dashboard.\\nuser: \"We have the API endpoints ready, but need to build the React dashboard UI and optimize the database queries for real-time data streaming.\"\\nassistant: \"I'll examine your API structure and database schema, then build the React components with WebSocket integration for real-time updates, and optimize the queries for performance. This ensures the frontend, API, and database work together seamlessly.\"\\n<commentary>\\nWhen an incomplete feature chain exists (missing frontend or backend) and requires end-to-end integration testing, use the fullstack developer to coordinate across all layers and ensure optimal data flow, caching, and performance.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Refactoring payment processing system to change from polling to event-driven architecture across all layers.\\nuser: \"Refactor our payment system from polling the database to an event-driven model using WebSockets and message queues, affecting database design, API middleware, and frontend state management.\"\\nassistant: \"I'll redesign the database schema for event sourcing, implement the API event handlers and WebSocket server, rebuild the frontend state management for real-time updates, and ensure proper error recovery across the entire flow.\"\\n<commentary>\\nUse the fullstack developer for complex architectural changes that require synchronized updates across database design, API patterns, and frontend state management. The agent's cross-layer perspective prevents silos and ensures consistent implementation.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User wants to add a semantic search feature powered by AI to an existing product catalog.\\nuser: \"Add AI-powered semantic search to our product catalog using embeddings and a vector database.\"\\nassistant: \"I'll design the full pipeline: generate and store embeddings in pgvector via a background job, expose a /search API route using the Anthropic SDK for query embedding, stream results to the React frontend with useChat, and add an evaluation harness to measure retrieval quality.\"\\n<commentary>\\nAI feature work spanning embedding ingestion, RAG pipeline, streaming API, and frontend integration requires coordinated fullstack development. The agent ensures data flow, latency, and prompt versioning are handled coherently across all layers.\\n</commentary>\\n</example>"
Mobile Developer
"Use this agent when building cross-platform mobile applications requiring native performance optimization, platform-specific features, and offline-first architecture. Use for React Native and Flutter projects where code sharing must exceed 80% while maintaining iOS and Android native excellence. Specifically:\\n\\n<example>\\nContext: User is starting a new React Native project that needs to support iOS 18+ and Android 15+ with biometric authentication and offline data synchronization.\\nuser: \"I need to build a fitness tracking app with React Native that works offline, has Face ID/fingerprint login, and syncs data when the network returns.\"\\nassistant: \"I'll invoke the mobile-developer agent to architect a cross-platform solution with WatermelonDB for offline sync, native biometric modules via TurboModules, and optimized platform-specific UI following iOS HIG and Material Design 3.\"\\n<commentary>\\nUse the mobile-developer agent when designing new mobile applications that require native module integration, offline-first architecture, and platform-specific optimizations. This agent handles the full stack from architecture through deployment.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: An existing React Native app has performance issues - slow startup time (3.2s cold start), high memory usage (280MB), and battery drain complaints.\\nuser: \"Our React Native app is too slow and drains battery fast. Cold start is 3.2 seconds and memory usage hits 280MB. How can we fix this?\"\\nassistant: \"I'll use the mobile-developer agent to profile the app with Flipper, optimize the bundle with Hermes engine, implement list virtualization with FlashList, reduce memory leaks, and optimize background tasks - targeting 1.5s cold start and 120MB memory baseline.\"\\n<commentary>\\nInvoke the mobile-developer agent for performance optimization tasks on existing mobile apps. This agent specializes in profiling, bottleneck identification, and platform-specific optimizations using tools like Flipper and DevTools.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: A team needs to add deep linking, push notifications (APNs and FCM), and prepare their app for App Store submission with automated CI/CD.\\nuser: \"We're ready to ship our iOS and Android apps but need help setting up Universal Links, push notifications, code signing, and deployment automation.\"\\nassistant: \"I'll coordinate with the mobile-developer agent to configure Universal Links and deep linking validation, set up APNs and FCM push notifications with proper certificates, implement code signing with Fastlane, and establish automated CI/CD pipelines for TestFlight and Play Store.\"\\n<commentary>\\nUse the mobile-developer agent when preparing for production deployment, requiring certificate management, push notification infrastructure, deep linking setup, and CI/CD pipeline configuration across platforms.\\n</commentary>\\n</example>"
Devops Engineer
DevOps and infrastructure specialist for CI/CD, deployment automation, and cloud operations. Use PROACTIVELY for pipeline setup, infrastructure provisioning, monitoring, security implementation, and deployment optimization.
Ios Developer
Native iOS development specialist with Swift and SwiftUI. Use PROACTIVELY for iOS applications, UIKit/SwiftUI components, Core Data integration, app lifecycle management, and App Store optimization.
Backend Developer
"Use this agent when building server-side APIs, microservices, and backend systems that require robust architecture, scalability planning, and production-ready implementation. Specifically:\\n\\n<example>\\nContext: A project needs a new RESTful API service with database persistence, authentication, and caching for handling high-traffic requests.\\nuser: \"We need to build a user service API that handles 10k RPS with sub-100ms latency. It should support OAuth2 authentication, PostgreSQL for persistence, and Redis caching.\"\\nassistant: \"I'll design and implement this service architecture. First, let me query the context manager for existing infrastructure. Then I'll build the service with proper API design, database optimization, authentication middleware, and caching strategy. I'll ensure 80%+ test coverage and OpenAPI documentation.\"\\n<commentary>\\nUse the backend-developer agent when you need to implement complete backend services with API endpoints, database integration, authentication, and performance optimization. This agent handles the full stack from architecture decisions to production-ready code.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: An existing monolith needs refactoring to introduce microservices with proper service communication patterns and data consistency.\\nuser: \"We're starting to decompose our monolith. We need a new orders service that communicates with user and inventory services via gRPC, with Kafka for async events and eventual consistency.\"\\nassistant: \"I'll architect this service decomposition. I'll design service boundaries, implement gRPC communication with circuit breakers, set up Kafka consumers for event handling, and configure proper database isolation. I'll include monitoring instrumentation and deployment configurations.\"\\n<commentary>\\nInvoke this agent when building individual microservices that need to integrate with other services, handle distributed transactions, and maintain data consistency patterns in a larger system.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: The backend team needs to add real-time features to their existing system with WebSocket support and message streaming.\\nuser: \"Add WebSocket endpoints to our notification service so clients get real-time updates. Need to handle connection pooling, graceful disconnects, and failover to fallback mechanisms.\"\\nassistant: \"I'll implement WebSocket support with connection management, implement health checks and automatic reconnection handling, set up message broadcasting with proper error handling, and integrate with your existing authentication. I'll add load testing and monitoring for connection metrics.\"\\n<commentary>\\nUse this agent for implementing real-time features, WebSocket integration, and async communication patterns within your backend services.\\n</commentary>\\n</example>"
Cli Ui Designer
CLI interface design specialist. Use PROACTIVELY to create terminal-inspired user interfaces with modern web technologies. Expert in CLI aesthetics, terminal themes, and command-line UX patterns.
Ui Designer
"Use this agent when designing visual interfaces, creating design systems, building component libraries, or refining user-facing aesthetics requiring expert visual design, interaction patterns, and accessibility considerations. Specifically:\n\n<example>\nContext: Product team needs a complete design system for a new fintech application with dark mode, multiple device sizes, and strict accessibility requirements.\nuser: \"We need to create a comprehensive design system for our fintech app. Include component library, design tokens, typography scale, color palette, interactive patterns, and dark mode support. Must meet WCAG 2.1 AA.\"\nassistant: \"I'll create a complete design system starting with understanding your brand guidelines and user base through the context-manager. I'll build a modular component library with documented specs, design tokens in multiple formats (CSS, JSON, Figma), responsive patterns across web and mobile, dark mode variants, and comprehensive accessibility annotations. I'll deliver Figma files, design documentation, and developer handoff specifications.\"\n<commentary>\nUse ui-designer when you need to establish or refine a complete design system, including component libraries, design tokens, and comprehensive visual standards. This agent excels at creating reusable design assets and documentation that scale across teams and platforms.\n</commentary>\n</example>\n\n<example>\nContext: A frontend team is building a new feature but needs UI design and interaction patterns before development.\nuser: \"Design the booking flow for our travel app. Need 3 screen variations, empty/loading/error states, mobile and desktop layouts, and clear interaction patterns for each step.\"\nassistant: \"I'll design a complete booking flow with wireframes, visual mockups, and interaction specifications. First, let me check the context-manager for your existing design system and style guide. Then I'll create all screen states, document interaction patterns, provide motion design specifications, and ensure alignment with your design language and accessibility standards.\"\n<commentary>\nInvoke ui-designer when your frontend developers need detailed visual designs, interaction specifications, and asset files before implementation. The agent provides a clear handoff package that developers can build from.\n</commentary>\n</example>\n\n<example>\nContext: A redesign initiative is underway and you need UI improvements to an existing product.\nuser: \"Our dashboard needs a visual refresh. The functionality is fine but the UX feels dated. Improve the visual hierarchy, modernize colors and typography, add micro-interactions, and ensure it works on mobile.\"\nassistant: \"I'll analyze your current dashboard using the context-manager, identify visual improvement opportunities, redesign layouts for better hierarchy and scannability, update colors and typography to modern standards, add meaningful micro-interactions, and ensure responsive design. I'll provide before/after comparisons, design rationale, and implementation specifications for your developers.\"\n<commentary>\nUse ui-designer for visual refinements, redesigns, and aesthetic improvements to existing interfaces. This agent modernizes dated UIs while respecting existing functionality and providing clear upgrade paths.\n</commentary>\n</example>"
Mobile App Developer
"Use this agent when developing iOS and Android mobile applications with focus on native or cross-platform implementation, performance optimization, and platform-specific user experience. This agent covers both platforms (native iOS + native Android, or cross-platform frameworks spanning both); for iOS-only work use ios-developer, and for React Native/Flutter-first cross-platform projects use mobile-developer. Specifically:\\n\\n<example>\\nContext: Project requires building a high-performance native iOS and Android app with offline sync, push notifications, and biometric authentication for a consumer app targeting 50k+ users.\\nuser: \"We need to build a fitness tracking app for both iOS and Android. Users need offline workout logging, real-time sync when online, push reminders, and Face ID/Touch ID login. App size should be under 50MB and startup time under 2 seconds.\"\\nassistant: \"I'll architect this native app for iOS (Swift/SwiftUI) and Android (Kotlin/Jetpack Compose) separately. I'll design the offline-first architecture with Core Data (iOS) and Room (Android), implement background sync using WorkManager and background tasks, add biometric authentication, configure push notifications via APNS and FCM, and optimize bundle sizes. I'll target the performance metrics you specified with comprehensive testing on real devices.\"\\n<commentary>\\nUse mobile-app-developer when building native iOS/Android applications requiring platform-specific optimization, device integration (biometrics, location, camera), and performance targets. This differs from frontend-developer (which focuses on web/cross-browser) and ux-designer (which focuses on interaction design).\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Team wants to share codebase across iOS and Android using a cross-platform framework, weighing tradeoffs between code reuse and native performance.\\nuser: \"We're building a financial app for iOS and Android. We have a small team and need code sharing, but we also need 60fps animations and smooth gesture responses. Should we use React Native, Flutter, or go native?\"\\nassistant: \"Based on your constraints, I'll help you choose between frameworks. For financial apps with demanding animations, Flutter offers better performance with Dart's compilation and Skia rendering, plus easier access to platform channels for secure features. React Native is better if you have existing React expertise. Let me build a prototype with each to measure actual performance on your target devices, then recommend the architecture that balances code sharing with native-level responsiveness.\"\\n<commentary>\\nInvoke this agent when making critical framework decisions for mobile apps. The agent evaluates platform-specific constraints, performance targets, team expertise, and feature requirements to recommend the optimal approach.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Existing mobile app has performance issues: slow startup (4+ seconds), high memory usage, and crashes on older devices. Team needs systematic optimization.\\nuser: \"Our app startup takes 4.5 seconds on iPhone 11s and we're seeing crashes on Android 10 devices with 3GB RAM. Crash rate is at 0.3%. Can you optimize performance and stabilize the app?\"\\nassistant: \"I'll conduct comprehensive performance profiling using Xcode Instruments and Android Studio Profiler. I'll identify startup bottlenecks (dependency injection, data loading, image decoding), optimize memory management with proper lifecycle handling, implement lazy initialization patterns, reduce app size through code splitting and asset optimization, and add device capability detection. I'll target sub-2s startup, <0.1% crash rate, and compatibility with older devices.\"\\n<commentary>\\nUse this agent when existing mobile apps have performance or stability issues requiring deep platform knowledge, profiling expertise, and optimization patterns specific to iOS/Android architectures.\\n</commentary>\\n</example>"
Code Architect
Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences
Test Generator
Analyzes code changes and generates comprehensive test cases by understanding existing test patterns, edge cases, and testing conventions in the codebase
Code Explorer
Deeply analyzes existing codebase features by tracing execution paths, mapping architecture layers, understanding patterns and abstractions, and documenting dependencies to inform new development
Test Runner
Executes tests, analyzes results, identifies failures, diagnoses root causes, and provides actionable fixes for failing tests
Electron Pro
"Use this agent when building Electron desktop applications that require native OS integration, cross-platform distribution, security hardening, and performance optimization. Use electron-pro for complete desktop app development from architecture to signed, distributable installers. Specifically:\\n\\n<example>\\nContext: A team is building a professional desktop productivity app for Windows, macOS, and Linux with auto-updates and system tray integration.\\nuser: \"We need to build a desktop note-taking app with offline functionality, cross-platform support, and auto-updates. It needs to integrate with the system tray and have native menus.\"\\nassistant: \"I'll architect and implement this Electron app with proper process isolation, IPC security, and native OS integration. I'll set up secure context isolation, implement preload scripts for safe IPC, integrate native menus, configure auto-updates with signature verification, and optimize performance to meet the 180MB memory and 2.5s startup targets. The app will be code-signed and ready for distribution.\"\\n<commentary>\\nUse electron-pro when building complete Electron applications from architecture to distribution, especially when you need native OS features like system tray, native menus, and secure auto-update mechanisms.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: A security-critical desktop application needs hardened Electron implementation with context isolation, permission handling, and certificate pinning.\\nuser: \"We're building a financial data application for desktop with strict security requirements. We need context isolation enabled everywhere, secure IPC patterns, and proper permission request handling.\"\\nassistant: \"I'll implement security-first architecture with mandatory context isolation, disabled Node integration in renderers, strict CSP, secure preload scripts for API exposure, IPC channel validation, and certificate pinning for external communications. I'll configure code signing and set up crash reporting with security auditing.\"\\n<commentary>\\nInvoke electron-pro when security hardening and process isolation are critical requirements. This agent specializes in implementing Electron security best practices and defending against common desktop app vulnerabilities.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: An existing web application needs to be adapted for desktop with performance targets and multi-window support across different OS platforms.\\nuser: \"We're bringing our web app to desktop. We need multi-window coordination, persistent window state, platform-specific keyboard shortcuts, and performance under 200MB memory idle.\"\\nassistant: \"I'll structure the application with proper window management patterns, implement state persistence and restoration, add platform-specific shortcuts for Windows/macOS/Linux conventions, optimize startup time and memory footprint, and configure GPU acceleration. I'll also set up monitoring for performance metrics and memory leak detection.\"\\n<commentary>\\nUse this agent when adapting web applications to desktop or when you need sophisticated window management, multi-window coordination, and platform-specific behavior implementation with strict performance budgets.\\n</commentary>\\n</example>"
Sdd Spec Writer
A ready-to-install Claude Code component.
Other Agents Categories
Catalog data and component content are sourced from the open-source davila7/claude-code-templates project (MIT license). ToolZip curates the listing and writes original descriptions; every component links back to its original source. Claude Code is a product of Anthropic. ToolZip is an independent catalog and is not affiliated with or endorsed by Anthropic.