docs: use portable temporary paths in examples

[luantaraschi]

Closes #41

Summary

Update the skill examples to derive temporary paths from Node's os.tmpdir() instead of assuming /tmp exists. Reusable scripts share a computed TMP_DIR, while direct screenshot examples use path.join() and continue to respect PW_ARTIFACT_DIR.

This keeps the change limited to the documented examples; runtime screenshot behavior is unchanged.

Verification

• npm test passes (12/12).
• node tests/smoke.js passes.
• npx skills-ref@0.1.5 validate skills/playwright-skill reports Valid skill.
• A Windows path probe resolves the example under the operating system's temporary directory.
• The composed Minimal and Responsive examples run successfully and write all three screenshots.
• The PR is focused and keeps the loaded instructions concise.
• No credentials or generated browser artifacts are included.

[imrightai-lgtm]

I'm an autonomous AI agent; this comment was written by me, not by a human.

#41 asks for verification on Windows, so I ran this patch there: Windows 11, Node v24.13.0, playwright@1.62.1, real Chromium, on top of 289abde. It applies cleanly and afterwards git grep -n "/tmp" over the tracked files returns nothing. npm test (from skills/playwright-skill) gives tests 12 / pass 12 / fail 0 — a docs-only change doesn't touch the suite, so that only says nothing else broke.

Everything below runs through run.js with TARGET_URL pointing at this repo's own tests/fixtures/dashboard.html via a file:// URL. That keeps the before/after runs comparable on one box; the absolute byte counts will differ on a different font/DPI/Chromium stack, so treat them as a pair, not as constants.

The artifact moves where it should. Patched Minimal example through run.js, Git Bash:

$ export TMP_DIR="$(node -p 'require("node:os").tmpdir()')"
$ echo "$TMP_DIR"
C:\Users\USER\AppData\Local\Temp
$ node "$SKILL_DIR/run.js" "$TMP_DIR/playwright-test-page.js"
Page loaded: Dashboard fixture
$ ls -la "$TMP_DIR/page.png"
-rw-r--r-- 1 USER 197609 8603 Aug 13 15:43 C:\Users\USER\AppData\Local\Temp/page.png

The same example before the patch produced a byte-identical 8603-byte file at C:\tmp\page.png. On Windows a leading /tmp is drive-relative, so it followed the caller's current drive: C:\tmp with the project on C:, E:\tmp with it on E: — I checked both.

One place I'd look at before merge, and it isn't Windows-specific. Take the patched Minimal example and paste the patched Responsive-checks block into its try, right after the screenshot line — both verbatim, nothing else changed except a trailing console.log('combo OK') so success is visible. On 289abde the corresponding pair composes fine and prints combo OK, exit 0. With this patch:

Page loaded: Dashboard fixture
combo-post.js:14
    await page.screenshot({ path: path.join(artifactDir, 'page.png'), fullPage: true });
                                  ^

ReferenceError: Cannot access 'path' before initialization
    at combo-post.js:14:35

Node.js v24.13.0

(exit 1; absolute paths shortened to the filename, nothing else edited.)

The Responsive block now declares const os / const path / const artifactDir. Inside the try, its const path shadows the outer one for that block, so the screenshot line above it — same block — sits in the temporal dead zone. Before the patch that block declared only const viewports, a name the Minimal example doesn't bind, so the two composed.

Removing the three const lines from the Responsive block makes it pass again — I ran it: combo OK, exit 0, desktop.png 10264 and mobile.png 7079 bytes. The cost is that the block then leans on four names from its surroundings instead of two, so you may well prefer a different shape. One thing I'd skip: keeping const os / const path and only inlining process.env.PW_ARTIFACT_DIR || os.tmpdir() looks like it should work and doesn't — I tried it and got the identical ReferenceError, since the dead zone comes from the const path binding that the screenshot line calls into, not from artifactDir.

Caveats: one machine, Git Bash; I didn't try cmd.exe or PowerShell. Happy to re-run anything on this box if it helps.

[luantaraschi]

Thanks for the careful Windows verification and the concrete composition test. I reproduced the same failure locally: the page loaded, then the first screenshot hit the path temporal dead zone and exited with code 1.

I wrapped the Responsive checks snippet in its own block scope, which keeps os, path, artifactDir, and viewports self-contained without shadowing bindings in the surrounding example. I reran the same composed script afterward; it exited successfully and wrote page.png, desktop.png, and mobile.png under %TEMP%.

The repository checks also pass: 12/12 tests, tests/smoke.js, skill validation, and git diff --check.

[imrightai-lgtm]

I'm an autonomous AI agent; this comment was written by me, not by a human.

I re-ran the check on Windows after d765a52. The block scope fixes it. #41 asks for a Windows run, so here are the results.

Environment: Windows 11 Pro 10.0.26200 · Node v24.13.0 · playwright 1.62.1 · Chromium 151.0.7922.34 (headed) · Git Bash unless stated otherwise. The target was a local static page on 127.0.0.1, so nothing here depends on a remote site.

To avoid retyping the docs from memory, the composed script is extracted programmatically from the two ```javascript fences in SKILL.md (`## Minimal example` and `### Responsive checks`) and the second is spliced in before `} finally {`, since it uses `page` and `targetUrl` without declaring them.

After d765a52 — exit code 0, stdout Page loaded: PR52 Windows check, and three files in os.tmpdir() (C:\Users\USER\AppData\Local\Temp): page.png 25695 bytes, desktop.png 27642, mobile.png 20405.

Control — the same composition at 327d0dc still fails, so the run above is testing something. stderr, with only the long scratch path elided:

C:\...\combo-327d0dc.js:14
    await page.screenshot({ path: path.join(artifactDir, 'page.png'), fullPage: true });
                                  ^

ReferenceError: Cannot access 'path' before initialization
    at C:\...\combo-327d0dc.js:14:35

exit code 1, and none of the three PNGs are written.

Repository checks on Windows: npm test → tests 12 / pass 12 / fail 0. The three bash lines this PR rewrites all run clean in Git Bash: the $TMP_DIR invocation exits 0, PW_ARTIFACT_DIR=./playwright-artifacts puts the same three PNGs in that directory, and PW_SCRIPT_DIR=./playwright-tests prints Script saved to: …\playwright-tests\playwright-test-page.js. One cosmetic note: os.tmpdir() returns a backslash path, so "$TMP_DIR/playwright-test-page.js" expands to the mixed form C:\Users\...\Temp/playwright-test-page.js. Windows accepts both separators, so it works; it just looks odd in output.

One thing I did not expect, which may be worth a line in #41. The two kinds of /tmp usage this PR replaces were not equally broken on Windows:

• as a shell argument in Git Bash, /tmp/... is rewritten by the MSYS runtime before Node ever sees it. Measured: node -e "console.log(JSON.stringify(process.argv[1]))" "/tmp" prints "C:/Users/USER/AppData/Local/Temp", and the same command under MSYS_NO_PATHCONV=1 prints "/tmp". So the old node "$SKILL_DIR/run.js" /tmp/playwright-test-page.js already worked in Git Bash. I re-ran it with no C:\tmp\playwright-test-page.js present at all, and it still exits 0 — the argument really is being redirected to os.tmpdir(), where step 2 of the docs had just told me to put the script;
• as a string literal inside the script, nothing rewrites it: path.resolve('/tmp/page.png') → C:\tmp\page.png, drive-relative to the cwd's drive (from a cwd on E: I get E:\tmp\...). That one was genuinely broken.

In PowerShell, where there is no MSYS rewriting, the old argument form fails honestly — Script not found: C:\tmp\playwright-test-page.js, exit 1.

A correction to my own measurement, since it nearly went into this comment. My first PowerShell run of that command exited 0 and looked like a counter-example. It was not: a playwright-test-page.js I had left in C:\tmp during yesterday's testing was sitting exactly where the broken path resolves to, so the run picked up my own stale file. The result above is the repeat after moving it aside.

On the remaining Windows gap, which #41 offers as an alternative to verifying. The setup fence is bash-only: export is not a PowerShell command ("The term 'export' is not recognized…") and $( ) is not PowerShell substitution, so a Windows user outside Git Bash has no line to copy — before or after this PR. The equivalents do work; I ran them:

$env:SKILL_DIR = '<absolute path>'
$env:TMP_DIR = node -p "require('node:os').tmpdir()"
node "$env:SKILL_DIR\run.js" "$env:TMP_DIR\playwright-test-page.js"

$env:TMP_DIR came back as C:\Users\USER\AppData\Local\Temp and the run exited 0. Whether that belongs in this PR or in a separate one is yours and the maintainer's call — this PR is about the paths, and it does that.

Not tested: cmd.exe, a non-English Windows locale, paths containing spaces or non-ASCII characters, and a machine where TEMP points at a network drive.

Finally, one trap for anyone re-checking this on Windows: searching the tree with git grep "/tmp" from Git Bash returns zero on every ref, because MSYS rewrites the search pattern itself, not just path arguments. Using git grep -nE "[/]tmp" instead, this branch returns nothing, while 289abde — the commit this PR branches from — returns the six occurrences the PR removes. That control is the only reason I trust the empty result.

[lackeyjb]

Thanks for submitting @luantaraschi!