메뉴
Use when a user-reported or ticketed browser issue must be reproduced in an actual Playwright browser before coding, especially when exact URL, account/role, data state, screenshots, network calls, and as-is/to-be comparison evidence are needed.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when starting a non-trivial backend task in a legacy or multi-service codebase — especially when you've never touched the affected area, the blast radius is unclear, or a quick fix would be tempting but risky
Use when a change has been deployed to a dev/stg/audit/prod project environment and browser-level E2E proof against the deployed URL is needed — typically after /verify passes and the deploy lands, for post-deploy smoke checks, or standalone when a specific deployed flow needs ad-hoc browser verification. Not for localhost — /verify owns that.
Use when code changes have been made to backend HTTP endpoints and HTTP-level proof against a running service is needed — typically after /work completes, or standalone when you have an endpoint plus at least one payload to probe ad-hoc
Use when an approved exploration report exists at <artifact-root>/.backend/<YYYYMM>/<slug>/explore.md, including service-local .backend folders, and it is time to implement the plan
| name | reproduce |
| description | Use when a user-reported or ticketed browser issue must be reproduced in an actual Playwright browser before coding, especially when exact URL, account/role, data state, screenshots, network calls, and as-is/to-be comparison evidence are needed. |
/reproduce is the browser-first gate before fixing UI-visible issues. It captures the current as-is behavior with a runnable Playwright script or spec, raw evidence, and optional read-only data proof so /explore, /work, and later to-be checks can compare against the same user path.
Core principle: reproduce the user's exact issue before explaining or fixing it. If the browser path, account, URL, data row, or expected/actual behavior is unclear, surface that gap instead of inventing a flow.
NO CODE FIX BEFORE THE AS-IS REPRODUCTION STATUS IS RECORDED
NO BROWSER RUN OR SCRIPT CREATION BEFORE A REPRODUCTION PLAN IS PRESENTED
NO SYNTHETIC USER STEPS WHEN THE TICKET OR USER PROVIDED EXACT STEPS
NO PASS CLAIM WITHOUT PLAYWRIGHT COMMAND OUTPUT AND ARTIFACT PATHS
NO DATA MUTATION FROM THIS SKILL; READ-ONLY DATA CHECKS ONLY
NO PROD DATA CHANGE OR PROD-ONLY EXPERIMENT
Use when the user says /reproduce, asks to reproduce a browser issue, asks for as-is/to-be comparison setup, or provides a URL/account/screenshot and wants the current issue captured before a fix.
Use especially for:
Skip for:
/verify./explore./qa-engineer.Before any file edit or browser run, state:
reproduced, not-reproduced, blocked-env, blocked-data, or inconclusive.Default recommendation:
.backend/<YYYYMM>/<slug>/e2e/specs/ if no stronger convention exists..backend/<YYYYMM>/<slug>/.Ask only for missing inputs that cannot be safely inferred, such as account, target environment, exact URL, or permission for any shared-env run.
| Source | What to extract |
|---|---|
| Ticket key/URL | Summary, description, comments, attachments, exact steps, expected/actual. |
| User message | Target URL, role/account, data identifiers, exact click path, expected/actual wording. |
| Existing E2E setup | Playwright config, page objects, nearby *-as-is.spec.ts and *-to-be.spec.ts. |
| Browser runtime | Screenshots, trace/video, console, page errors, request failures, relevant API responses. |
| Data state | Optional read-only SQL/API checks for data existence and shape. |
| Target | Allowed | Guardrail |
|---|---|---|
| local/dev | Browser reproduction, read-only DB/API checks | Bound samples, redact PII |
| stg/audit/shared test | Browser reproduction with user-approved account/session | No destructive setup; record target URL |
| prod | Read-only browser observation only | No DB checks, no data mutation, no destructive/user-visible experiment |
If target env is ambiguous, ask before running. If prod is selected, ask for explicit confirmation and keep every action read-only.
Default to repo root unless the issue clearly belongs to a service with its own .backend convention:
.backend/<YYYYMM>/<slug>/
reproduce.md
runs/run-1.log
network/*.json
screenshots/*.png
db/*.md
e2e/
specs/<ticket-or-slug>-as-is.spec.ts
specs/<ticket-or-slug>-to-be.spec.ts # only if useful or explicitly requested
artifacts/run-<YYYYMMDD-HHMM>-<env>/
If the repo already has a Playwright test tree, keep the spec there and store the raw evidence/report under .backend/<YYYYMM>/<slug>/.
| Status | Meaning |
|---|---|
reproduced | Browser evidence shows the reported bug on the selected target. |
not-reproduced | The exact path ran, but the reported bug did not appear. Record differences; do not call it fixed. |
blocked-env | Login, URL, service, browser, auth, or downstream environment prevented the run. |
blocked-data | Required account/content/database state is missing or ambiguous. |
inconclusive | Evidence conflicts or the issue lacks enough specificity to decide. |
For as-is specs, it is valid for the test to pass when the bug is observed. Name that assertion clearly as reproduction proof. A separate to-be spec should fail before the fix and pass after the fix when the corrected behavior is known.
Complete each phase before the next.
<YYYYMM> from current date.<slug> from ticket key + short issue name, kebab-case.Then proceed if the user already requested implementation. If the plan reveals risky ambiguity, ask the shortest blocking question.
.backend/<YYYYMM>/<slug>/e2e/ after recording that no harness exists.Record the issue source and harness choice in reproduce.md.
Create the smallest spec or script that follows the exact reported path.
Minimum capture:
Spec pattern:
import { test, expect } from '@playwright/test';
import * as fs from 'fs';
import * as path from 'path';
const SLUG = 'ticket-or-short-slug';
const ARTIFACT_DIR = process.env.REPRO_ARTIFACT_DIR || path.resolve('.backend', 'YYYYMM', SLUG);
const SCREENSHOT_DIR = path.join(ARTIFACT_DIR, 'screenshots');
const NETWORK_DIR = path.join(ARTIFACT_DIR, 'network');
test.beforeEach(async ({ page }) => {
fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
fs.mkdirSync(NETWORK_DIR, { recursive: true });
page.on('pageerror', error => {
fs.appendFileSync(path.join(NETWORK_DIR, 'page-errors.log'), `${new Date().toISOString()} ${error.message}\n`);
});
});
test('AS-IS: reported symptom is visible', async ({ page }) => {
await page.goto(process.env.REPRO_URL!);
// Follow the exact user/ticket steps here.
await page.screenshot({ path: path.join(SCREENSHOT_DIR, 'as-is-target.png'), fullPage: true });
// Assert the current bug condition as reproduction proof.
await expect(page.getByText(/reported wrong text|error message/i)).toBeVisible();
});
Adjust only slug, URL/env, auth/bootstrap, navigation steps, and the final as-is assertion.
Run the focused spec with the selected target URL and env:
REPRO_URL='<target-url>' npx playwright test <spec-path> --reporter=list
For headed debugging when needed:
REPRO_URL='<target-url>' npx playwright test <spec-path> --headed
Save command output to .backend/<YYYYMM>/<slug>/runs/run-1.log. Preserve Playwright trace, video, and screenshot paths when produced.
Use only when the browser result depends on a specific row/account/content state.
Rules:
SELECT, SHOW, DESCRIBE, EXPLAIN, or safe read-only project APIs.LIMIT.Save findings under .backend/<YYYYMM>/<slug>/db/*.md and cite them in reproduce.md.
Write .backend/<YYYYMM>/<slug>/reproduce.md with:
reproduced / not-reproduced / blocked-env / blocked-data / inconclusive./explore, /work, /verify, /qa-engineer, or ask user for missing input.Final response:
reproduce.md.not-reproduced a fix..backend/./explore consumes reproduce.md as concrete symptom evidence./work may add a to-be spec or convert the as-is assertion into a regression test./verify proves backend HTTP contracts after the fix./qa-engineer proves the fixed deployed browser flow.