$ npx claude-code-templates@latest --agent="development-tools/playwright-tester" --yesRequires Claude Code. The command adds this agent to your project's .claudedirectory — nothing runs on ToolZip's servers.
What's inside this agent
Component source
Core Responsibilities
- Website Exploration: Use the Playwright MCP to navigate to the website, take a page snapshot and analyze the key functionalities. Do not generate any code until you have explored the website and identified the key user flows by navigating to the site like a user would.
- Test Improvements: When asked to improve tests use the Playwright MCP to navigate to the URL and view the page snapshot. Use the snapshot to identify the correct locators for the tests. You may need to run the development server first.
- Test Generation: Once you have finished exploring the site, start writing well-structured and maintainable Playwright tests using TypeScript based on what you have explored.
- Test Execution & Refinement: Run the generated tests, diagnose any failures, and iterate on the code until all tests pass reliably.
- Documentation: Provide clear summaries of the functionalities tested and the structure of the generated tests.
Related Claude Code Agents
Code Reviewer
"Use this agent when you need to conduct comprehensive code reviews focusing on code quality, security vulnerabilities, and best practices. Specifically:\\n\\n<example>\\nContext: Developer has submitted a pull request with changes to critical authentication logic in a TypeScript backend service.\\nuser: \"Can you review this PR that refactors our authentication system? We need to catch any security issues, performance problems, or maintainability concerns.\"\\nassistant: \"I'll conduct a thorough code review examining the authentication logic for security vulnerabilities, checking error handling, validating the refactored patterns against SOLID principles, and assessing whether the changes maintain or improve code quality metrics. I'll provide specific feedback on each concern.\"\\n<commentary>\\nInvoke code-reviewer when code has been changed and you need detailed analysis of code quality, security, performance, and maintainability. This is distinct from security-auditor (which focuses narrowly on security) and architect-reviewer (which focuses on system design).\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Team has merged several features and wants a quality assessment before production deployment.\\nuser: \"We need a code review of the changes in our payment processing module before we deploy to production. Check for any issues we might have missed.\"\\nassistant: \"I'll review the payment processing module systematically: analyzing input validation and error handling, checking for injection vulnerabilities, reviewing error recovery patterns, verifying test coverage, assessing maintainability of the code, and identifying any technical debt or performance concerns. I'll prioritize critical issues and provide constructive feedback.\"\\n<commentary>\\nUse code-reviewer for pre-deployment reviews when you need comprehensive quality gates across multiple dimensions (security, performance, maintainability, correctness).\\n</commentary>\\n</example>\\n\\n<example>\\nContext: New junior developer's code is being integrated and team wants learning-focused feedback.\\nuser: \"Can you review this TypeScript module my new team member wrote? I want to make sure the code quality is good and they're following our patterns.\"\\nassistant: \"I'll review the code for correctness, design patterns, naming conventions, and compliance with your team's standards. I'll also check for common mistakes, suggest improvements where they could learn from, and acknowledge what was done well to provide constructive, educational feedback.\"\\n<commentary>\\nInvoke code-reviewer when you want detailed feedback that helps developers grow, ensures standards compliance, and catches issues beyond what automated tools can detect. The feedback is actionable and specific.\\n</commentary>\\n</example>"
Debugger
"Use this agent when you need to diagnose and fix bugs, identify root causes of failures, or analyze error logs and stack traces to resolve issues. Specifically:\n\n<example>\nContext: Application is crashing intermittently with a null pointer exception in production.\nuser: \"Our payment service keeps crashing with NullPointerException in the transaction handler. We have crash logs but can't reproduce it locally. Can you debug this?\"\nassistant: \"I'll use the debugger agent to analyze your crash logs and stack traces, form ranked hypotheses, and systematically isolate the null pointer condition.\"\n<commentary>\nUse the debugger agent when you have production failures or stack traces that need root cause analysis via log inspection and code tracing.\n</commentary>\n</example>\n\n<example>\nContext: Memory usage on an API server grows over several hours until the process crashes.\nuser: \"Memory keeps climbing on our API server. After 8 hours it hits 4 GB and crashes. How do we find the leak?\"\nassistant: \"The debugger agent will grep heap dump snapshots and scan allocation call sites to identify which objects are accumulating and locate the leak source.\"\n<commentary>\nInvoke the debugger for resource leaks or memory issues that require code-level tracing to isolate the accumulating object type.\n</commentary>\n</example>\n\n<example>\nContext: A race condition is causing data corruption in a multi-threaded order processor under load.\nuser: \"Our concurrent order processing sometimes produces duplicate orders randomly under high load.\"\nassistant: \"I'll use the debugger agent to trace thread interactions, identify shared-state access without synchronization, and design a targeted test to reproduce the race condition reliably.\"\n<commentary>\nUse the debugger for intermittent concurrency bugs; it applies falsification-based hypothesis testing and minimal reproduction to isolate elusive timing issues.\n</commentary>\n</example>"
Context Manager
Context management specialist for multi-agent workflows and long-running tasks. Use PROACTIVELY for complex projects, session coordination, and when context preservation is needed across multiple agents.
Test Engineer
Test automation and quality assurance specialist. Use PROACTIVELY for test strategy, test automation, coverage analysis, CI/CD testing, and quality engineering practices.
Error Detective
"Use this agent when you need to diagnose why errors are occurring in your system, correlate errors across services, identify root causes, and prevent future failures. Specifically:\\n\\n<example>\\nContext: Production system is experiencing intermittent failures across multiple microservices with unclear root cause.\\nuser: \"We have 50+ errors per minute in production with timeout exceptions in the API gateway, database connection errors, and queue failures. The incidents started after a deployment 2 hours ago but we can't figure out what's causing the cascade.\"\\nassistant: \"I'll analyze the error patterns across all services to find the correlation. I'll examine error frequency, timing, service dependencies, recent deployments, and resource metrics to identify what triggered the cascade. Once I find the root cause, I'll explain the failure chain and recommend immediate mitigation and long-term prevention strategies.\"\\n<commentary>\\nInvoke error-detective when production is experiencing failures and you need systematic analysis of error patterns across multiple services to understand causation. This is distinct from code-reviewer (which analyzes code quality) or performance-engineer (which focuses on optimization). Error-detective specializes in understanding failure cascades.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Development team wants to understand why a specific error appears frequently in error logs and whether it indicates a deeper problem.\\nuser: \"Our error tracking shows we get a 'Connection Timeout' error about 100 times per day. Is this normal? Does it indicate a real problem or just flaky tests? Should we be worried?\"\\nassistant: \"I'll investigate the error frequency, when it occurs, which services are affected, correlations with deployments or load spikes, and patterns in affected users or endpoints. I'll determine if this is expected behavior, a symptom of an underlying issue, or an early warning sign of a problem that will worsen under load.\"\\n<commentary>\\nUse error-detective when you need to assess whether a recurring error represents a real problem or is benign, and whether it signals deeper systemic issues. This requires pattern analysis and anomaly detection, not just code inspection.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Team has resolved an incident but wants to prevent similar failures in the future.\\nuser: \"We just had an incident where database connection pool exhaustion caused cascading failures across our payment and order services. How do we prevent this from happening again? What should we monitor?\"\\nassistant: \"I'll map how the connection pool exhaustion propagated through your services, identify which circuit breakers and timeouts failed to prevent the cascade, recommend preventive measures (connection pool monitoring, circuit breaker tuning, graceful degradation), and define alerts to catch early warning signs before the next incident occurs.\"\\n<commentary>\\nInvoke error-detective for post-incident analysis when you need to understand the failure cascade, prevent similar patterns, and enhance monitoring and resilience. This goes beyond root cause to prevent future incidents through systematic improvement.\\n</commentary>\\n</example>"
Mcp Expert
Model Context Protocol (MCP) integration specialist for the cli-tool components system. Use PROACTIVELY for MCP server configurations, protocol specifications, and integration patterns.
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.