skills.rest
EliasOulkadi
EliasOulkadiCOMMUNITY
Explore all skills by this author →
𝕏@EliasOulkadiGitHub

test-commander

Generate unit, integration, E2E, and visual regression tests with MSW and Playwright.

110|14|Updated May 12, 2026
Search Tags:#integration testing#test generation#visual regression#playwright e2e#ci sharding#msw mocking#vitest jest
One-click install
npx skills add https://github.com/EliasOulkadi/shokunin --skill test-commander
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: test-commander
Source: https://github.com/EliasOulkadi/shokunin/tree/main/.pack/skills/test-commander
Command: npx skills add https://github.com/EliasOulkadi/shokunin --skill test-commander

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Test failures and regressions often slip through when coverage focuses on happy paths or shallow unit checks, leaving integration points, async behavior, and UI flows unverified.

Core Features & Use Cases

  • Testing Trophy structure (80/10/10): Builds a practical mix of integration, unit, and E2E tests that targets the most bug-prone areas.
  • MSW-powered integration realism: Mocks API/network boundaries with precise loading, empty, error, and success states to reduce flaky tests.
  • Visual regression protection: Adds screenshot-based checks for critical components/pages using Playwright and visual tooling workflows.
  • Deterministic, scalable test design: Uses test factories (Faker), flaky-test protocol, and CI sharding to keep suites maintainable.

Example use case: You’re adding a new UserProfile component and want confidence that loading, empty, error-with-retry, success rendering, and race conditions are all covered, plus a small set of Playwright E2E checks for critical flows.

Quick Start

Write integration-focused tests for your component with MSW mocked API responses so you cover loading, empty, error, success, and race conditions end-to-end.

Frequently Asked Questions about test-commander

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate integration tests that cover API loading, empty, and error states?▼

You can generate integration tests covering API loading, empty, and error states by using MSW to mock network boundaries. This approach precisely targets component behavior across async data fetching and race conditions to reduce flaky tests.

What is the Testing Trophy methodology for structuring unit, integration, and E2E tests?▼

The Testing Trophy methodology structures tests with an 80/10/10 mix of integration, unit, and E2E tests. This structure targets the most bug-prone areas of your application, prioritizing integration checks over shallow happy-path unit tests.

How do I add visual regression tests for critical components using Playwright?▼

You add visual regression tests using Playwright by implementing screenshot-based UI diffing for critical components and pages. This visual tooling workflow validates rendering changes and protects against unexpected UI regressions.

Can I use Vitest and Jest with MSW mocking and Testing Library patterns?▼

Yes, you can use Vitest or Jest with MSW mocking and Testing Library patterns. The test generation requires Vitest or Jest alongside Testing Library, MSW patterns, snapshot strategy, and Faker-based factories to build deterministic test suites.

How do I keep large E2E test suites maintainable with CI sharding and test factories?▼

You keep large E2E test suites maintainable by applying CI sharding alongside deterministic test factories using Faker. This scalable test design, combined with a flaky-test protocol, ensures suites remain reliable as your application grows.

Does this test generation approach cover performance load testing or type-level testing?▼

No, this test generation approach explicitly excludes performance load testing and type-level testing. It focuses solely on unit, integration, E2E, and visual regression tests using the Testing Trophy methodology to verify component behavior and UI flows.

Related Skills

Explore More Software Engineering Skills→
AratKruglikAratKruglik
9

nextjs-testing

Automate Next.js testing workflows across server, client, and end-to-end layers.

Community
Advanced
anhtesteranhtester
129

Flaky Test Analyzer

Analyze intermittent test failures and propose remediation steps.

Community
Intermediate
sgcarstrendssgcarstrends
21

mock-data

Generate realistic mock data with Faker.js for testing and development environments.

Official
Intermediate
Smooth-OperationSmooth-Operation

testing-anti-patterns

Enforce the Five Iron Laws to eliminate testing anti-patterns.

Official
Basic