本文へ移動
cccskills
無料GitHub で公開

senior-qa

Testing for React/Next.js with Jest, React Testing Library, and Playwright. Use when generating tests, writing unit tests, analyzing coverage, scaffolding E2E tests, configuring Jest, or improving test quality.

インストール方法を見る

含まれるファイル(10)

  • SKILL.md6.2 KB
  • README.md5.6 KB
  • references/qa_best_practices.md23.2 KB
  • references/qa-workflows-and-tools.md11.6 KB
  • references/test_automation_patterns.md24.4 KB
  • references/testing_strategies.md16.8 KB
  • references/tool-cli-reference.md6.2 KB
  • scripts/coverage_analyzer.py29.2 KB
  • scripts/e2e_test_scaffolder.py25.8 KB
  • scripts/test_suite_generator.py19.4 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Senior QA Engineer

Test automation, coverage analysis, and quality assurance patterns for React and Next.js applications. Generates Jest + React Testing Library unit test stubs, analyzes Istanbul/LCOV coverage for gaps, and scaffolds Playwright E2E suites for App Router and Pages Router projects.

Core Capabilities

  • Unit test generation — scan React/TypeScript components and emit Jest + RTL stubs (render, interaction, state, optional jest-axe a11y).
  • Coverage analysis — parse Istanbul/LCOV reports, identify gaps by severity, flag critical business-logic paths, and emit text/HTML/JSON recommendations.
  • E2E scaffolding — detect Next.js routes (dynamic segments, route groups, auth pages) and generate Playwright specs, Page Object Models, fixtures, and config.
  • Test strategy — the testing pyramid, coverage targets by code type, and test organization patterns.
  • Automation patterns — Page Object Model, data factories, MSW mocking, fixtures, and custom render utilities.
  • Quality practices — testable code design, AAA structure, test isolation, flaky-test elimination, and quality metrics.

When to Use

  • Setting up unit tests for new or existing React components.
  • Improving test coverage or preparing for release.
  • Setting up Playwright E2E tests for a Next.js project.
  • Configuring Jest thresholds or improving overall test quality.

Clarify First

Before generating tests, confirm these inputs. If any is unknown or vague, ASK — do not assume:

  • Test layer — unit (Jest+RTL) vs E2E (Playwright) (selects test_suite_generator vs e2e_test_scaffolder)
  • Source path — the components or Next.js routes to generate tests from (the scaffolder's input)
  • Coverage focus — happy path only vs interaction/state/a11y (jest-axe) (sets which test stubs are emitted)

Stop rule: ask only the 2-3 that most change the output. If the user says "just draft it," proceed and list your assumptions at the top of the artifact.

Tools

ToolPurposeCommand
test_suite_generator.pyGenerate Jest + RTL test stubs from React componentspython scripts/test_suite_generator.py src/components/ --output __tests__/
coverage_analyzer.pyAnalyze Istanbul/LCOV coverage and report gapspython scripts/coverage_analyzer.py coverage/coverage-final.json --threshold 80
e2e_test_scaffolder.pyScaffold Playwright E2E tests from Next.js routespython scripts/e2e_test_scaffolder.py src/app/ --output e2e/

References

Load the reference that matches the task — keep this file lean and pull detail on demand:

  • references/qa-workflows-and-tools.md — quick start, the three tool overviews with sample output, the unit-test/coverage/E2E workflows, common pattern snippets (RTL queries, async, MSW, Playwright locators, jest thresholds), common commands, troubleshooting table, and success criteria. Read when running a workflow.
  • references/tool-cli-reference.md — full flag tables, examples, output formats, and generated artifacts for all three scripts. Read before running the scripts.
  • references/testing_strategies.md — the testing pyramid, testing types, coverage targets and thresholds, and test organization patterns. Read when designing test strategy.
  • references/test_automation_patterns.md — Page Object Model, data factories, fixture management, mocking strategies (MSW), and custom test utilities. Read when writing test code.
  • references/qa_best_practices.md — writing testable code, naming conventions, AAA pattern, test isolation, flaky-test debugging, and quality metrics. Read when improving test quality.

Scope & Limitations

This skill covers:

  • Unit test stub generation for React/TypeScript functional and class components using Jest and React Testing Library.
  • Coverage analysis and gap identification from Istanbul JSON and LCOV report formats.
  • E2E test scaffolding for Next.js App Router and Pages Router projects using Playwright.
  • Accessibility test generation via jest-axe integration.

This skill does NOT cover:

  • Backend API testing (see senior-backend for Express/Node.js testing patterns).
  • Performance or load testing (see senior-devops for infrastructure and performance tooling).
  • Visual regression testing or screenshot comparison workflows.
  • Mobile-native testing (React Native, Flutter) -- this skill targets web browser-based testing only.

Integration Points

SkillIntegrationData Flow
senior-frontendGenerated test stubs align with component patterns from the frontend skillFrontend components --> test_suite_generator.py --> test files
senior-fullstackCode quality analyzer consumes the same coverage reports produced herecoverage_analyzer.py output --> fullstack quality dashboard
senior-devopsE2E test scaffolder generates CI-ready Playwright configs that plug into DevOps pipelinese2e_test_scaffolder.py --> playwright.config.ts --> GitHub Actions workflow
code-reviewerCoverage gaps feed directly into code review checklists for untested changescoverage_analyzer.py gaps --> review checklist items
tdd-guideTDD workflow references this skill's test generator for initial red-phase stub creationTDD cycle --> test_suite_generator.py --scan-only --> write tests --> implement
qa-browser-automationPage Object Models generated here are consumed by the browser automation skill for advanced E2E scenariose2e_test_scaffolder.py --include-pom --> POM classes --> browser automation flows

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

This skill should be used when the user asks to "check accessibility", "audit WCAG compliance", "scan HTML for a11y issues", "check color contrast", or "find accessibility violations in web pages".

日本語の概要は準備中です。原文の説明を表示しています。

borghei/Claude-Skills9002026年10月7日 更新

Design and run statistically rigorous A/B tests and experiments. Use when planning experiments, calculating sample sizes, designing test variants, selecting metrics, analyzing results, or when someone says "let's test that."

日本語の概要は準備中です。原文の説明を表示しています。

borghei/Claude-Skills9002026年10月7日 更新

Design and analyze A/B tests: sample size, test duration, and statistical significance for conversion experiments. Use when setting up an A/B test, calculating sample size, designing an experiment, or analyzing results.

日本語の概要は準備中です。原文の説明を表示しています。

borghei/Claude-Skills9002026年10月7日 更新

Sales execution across pipeline, discovery, demos, negotiation, and closing. Use when qualifying opportunities, running MEDDIC discovery, building account plans, handling objections, structuring proposals, or forecasting pipeline.

日本語の概要は準備中です。原文の説明を表示しています。

borghei/Claude-Skills9002026年10月7日 更新

Design ad creative across Google, Meta, LinkedIn, Twitter/X, and TikTok with platform format specs, headline formulas, and A/B testing. Use when writing ad copy, generating headline variations, creating ad sets, or validating creative.

日本語の概要は準備中です。原文の説明を表示しています。

borghei/Claude-Skills9002026年10月7日 更新

aeo

無料

Answer Engine Optimization (AEO): optimize content to be cited by LLMs (ChatGPT, Claude, Perplexity, Gemini) in their answers. Use when designing content for LLM citation, auditing citability, or structuring Q&A schema.

日本語の概要は準備中です。原文の説明を表示しています。

borghei/Claude-Skills9002026年10月7日 更新

borghei のスキルをすべて見る

このスキルの問題を報告する