refactor(playwright): split into playwright-js + playwright-py variants

Rename `playwright-skill/` → `playwright-js/` and add `playwright-py/`
as a verbatim fork of Anthropic's official `webapp-testing` skill
(Apache-2.0). Cross-pollinate: each skill gains patterns and helpers
inspired by the other's strengths, with upstream semantics preserved.

## playwright-js (JS/TS stack)

Renamed from playwright-skill; upstream lackeyjb MIT content untouched.
New sections added (clearly marked, preserving upstream semantics):

- Static HTML vs Dynamic Webapp decision tree (core Anthropic methodology)
- Reconnaissance-Then-Action pattern (navigate → networkidle → inspect → act)
- Console Log Capture snippet (page.on console/pageerror/requestfailed)

Description updated to clarify JS/TS stack fit (React/Next/Vue/Svelte/Node)
and reference `/playwright-py` as the Python sibling.

## playwright-py (Python stack)

Verbatim fork of anthropics/skills/skills/webapp-testing; upstream SKILL.md
and bundled `scripts/with_server.py` + examples kept intact. New scripts
and examples added (all lackeyjb-style conveniences in Python):

Scripts:
  scripts/detect_dev_servers.py   Probe common localhost ports for HTTP
                                  servers; outputs JSON of found services.
  scripts/safe_actions.py         safe_click, safe_type (retry-wrapped),
                                  handle_cookie_banner (common selectors),
                                  build_context_with_headers (env-var-
                                  driven: PW_HEADER_NAME / PW_HEADER_VALUE /
                                  PW_EXTRA_HEADERS='{…json…}').

Examples:
  examples/login_flow.py          Login form + wait_for_url.
  examples/broken_links.py        Scan visible external hrefs via HEAD.
  examples/responsive_sweep.py    Multi-viewport screenshots to /tmp.

SKILL.md gains 5 "Added:" sections documenting the new scripts, retry
helpers, env-header injection, and /tmp script discipline. Attribution
notes explicitly mark upstream vs local additions.

## Makefile

SKILLS: playwright-skill → playwright-js + playwright-py
deps target: extended Playwright step to install Python package +
  Chromium via `python3 -m pip install --user playwright && python3 -m
  playwright install chromium` when playwright-py/ is present. Idempotent
  (detected via `python3 -c "import playwright"`).

## Usage

Both skills symlinked globally via `make install`. Invoke whichever
matches the project stack — cross-references in descriptions route you
to the right one. Run `make deps` once to install both runtimes.

6 files changed, 272 insertions, 0 deletions

diff --git a/playwright-py/examples/broken_links.py b/playwright-py/examples/broken_links.py
new file mode 100644
index 0000000..c78520f
--- /dev/null
+++ b/playwright-py/examples/broken_links.py
@@ -0,0 +1,58 @@
+"""Worked example: scan visible external links on a page for broken URLs.
+
+Env vars used:
+  TARGET_URL (default: http://localhost:5173)
+
+Run:
+  python examples/broken_links.py
+"""
+
+import os
+import sys
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+from playwright.sync_api import sync_playwright
+from scripts.safe_actions import build_context_with_headers
+
+TARGET_URL = os.environ.get("TARGET_URL", "http://localhost:5173")
+
+
+def main() -> int:
+    with sync_playwright() as p:
+        browser = p.chromium.launch(headless=True)
+        context = build_context_with_headers(browser)
+        page = context.new_page()
+
+        page.goto(TARGET_URL)
+        page.wait_for_load_state("networkidle")
+
+        # Collect unique external hrefs
+        links = page.locator('a[href^="http"]').all()
+        urls = sorted(
+            {link.get_attribute("href") for link in links if link.get_attribute("href")}
+        )
+
+        ok, bad, err = 0, 0, 0
+        for url in urls:
+            try:
+                resp = page.request.head(url, timeout=5000)
+                status = resp.status
+                if status < 400:
+                    ok += 1
+                    print(f"✓ {status} {url}")
+                else:
+                    bad += 1
+                    print(f"✗ {status} {url}")
+            except Exception as ex:
+                err += 1
+                print(f"✗ ERR {url}  ({type(ex).__name__}: {ex})")
+
+        print(f"\n{ok} ok, {bad} broken, {err} errored out of {len(urls)} total")
+        browser.close()
+        return 0 if (bad == 0 and err == 0) else 1
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/playwright-py/examples/console_logging.py b/playwright-py/examples/console_logging.py
new file mode 100644
index 0000000..9329b5e
--- /dev/null
+++ b/playwright-py/examples/console_logging.py
@@ -0,0 +1,35 @@
+from playwright.sync_api import sync_playwright
+
+# Example: Capturing console logs during browser automation
+
+url = 'http://localhost:5173'  # Replace with your URL
+
+console_logs = []
+
+with sync_playwright() as p:
+    browser = p.chromium.launch(headless=True)
+    page = browser.new_page(viewport={'width': 1920, 'height': 1080})
+
+    # Set up console log capture
+    def handle_console_message(msg):
+        console_logs.append(f"[{msg.type}] {msg.text}")
+        print(f"Console: [{msg.type}] {msg.text}")
+
+    page.on("console", handle_console_message)
+
+    # Navigate to page
+    page.goto(url)
+    page.wait_for_load_state('networkidle')
+
+    # Interact with the page (triggers console logs)
+    page.click('text=Dashboard')
+    page.wait_for_timeout(1000)
+
+    browser.close()
+
+# Save console logs to file
+with open('/mnt/user-data/outputs/console.log', 'w') as f:
+    f.write('\n'.join(console_logs))
+
+print(f"\nCaptured {len(console_logs)} console messages")
+print(f"Logs saved to: /mnt/user-data/outputs/console.log")
\ No newline at end of file
diff --git a/playwright-py/examples/element_discovery.py b/playwright-py/examples/element_discovery.py
new file mode 100644
index 0000000..917ba72
--- /dev/null
+++ b/playwright-py/examples/element_discovery.py
@@ -0,0 +1,40 @@
+from playwright.sync_api import sync_playwright
+
+# Example: Discovering buttons and other elements on a page
+
+with sync_playwright() as p:
+    browser = p.chromium.launch(headless=True)
+    page = browser.new_page()
+
+    # Navigate to page and wait for it to fully load
+    page.goto('http://localhost:5173')
+    page.wait_for_load_state('networkidle')
+
+    # Discover all buttons on the page
+    buttons = page.locator('button').all()
+    print(f"Found {len(buttons)} buttons:")
+    for i, button in enumerate(buttons):
+        text = button.inner_text() if button.is_visible() else "[hidden]"
+        print(f"  [{i}] {text}")
+
+    # Discover links
+    links = page.locator('a[href]').all()
+    print(f"\nFound {len(links)} links:")
+    for link in links[:5]:  # Show first 5
+        text = link.inner_text().strip()
+        href = link.get_attribute('href')
+        print(f"  - {text} -> {href}")
+
+    # Discover input fields
+    inputs = page.locator('input, textarea, select').all()
+    print(f"\nFound {len(inputs)} input fields:")
+    for input_elem in inputs:
+        name = input_elem.get_attribute('name') or input_elem.get_attribute('id') or "[unnamed]"
+        input_type = input_elem.get_attribute('type') or 'text'
+        print(f"  - {name} ({input_type})")
+
+    # Take screenshot for visual reference
+    page.screenshot(path='/tmp/page_discovery.png', full_page=True)
+    print("\nScreenshot saved to /tmp/page_discovery.png")
+
+    browser.close()
\ No newline at end of file
diff --git a/playwright-py/examples/login_flow.py b/playwright-py/examples/login_flow.py
new file mode 100644
index 0000000..d114ac6
--- /dev/null
+++ b/playwright-py/examples/login_flow.py
@@ -0,0 +1,55 @@
+"""Worked example: log in and verify redirect.
+
+Env vars used:
+  TARGET_URL (default: http://localhost:5173)
+  TEST_USER  (default: test@example.com)
+  TEST_PASS  (default: password123)
+
+Run from within the skill directory (so `scripts.safe_actions` resolves):
+  python examples/login_flow.py
+"""
+
+import os
+import sys
+from pathlib import Path
+
+# Make sibling scripts/ importable
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+from playwright.sync_api import sync_playwright
+from scripts.safe_actions import (
+    handle_cookie_banner,
+    safe_click,
+    safe_type,
+    build_context_with_headers,
+)
+
+TARGET_URL = os.environ.get("TARGET_URL", "http://localhost:5173")
+TEST_USER = os.environ.get("TEST_USER", "test@example.com")
+TEST_PASS = os.environ.get("TEST_PASS", "password123")
+
+
+def main() -> int:
+    with sync_playwright() as p:
+        browser = p.chromium.launch(headless=True)
+        context = build_context_with_headers(browser)
+        page = context.new_page()
+
+        page.goto(f"{TARGET_URL}/login")
+        page.wait_for_load_state("networkidle")
+
+        handle_cookie_banner(page)
+
+        safe_type(page, 'input[name="username"], input[name="email"]', TEST_USER)
+        safe_type(page, 'input[name="password"]', TEST_PASS)
+        safe_click(page, 'button[type="submit"]')
+
+        page.wait_for_url("**/dashboard", timeout=5000)
+        print(f"✓ Logged in; redirected to {page.url}")
+
+        browser.close()
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/playwright-py/examples/responsive_sweep.py b/playwright-py/examples/responsive_sweep.py
new file mode 100644
index 0000000..d890d5b
--- /dev/null
+++ b/playwright-py/examples/responsive_sweep.py
@@ -0,0 +1,51 @@
+"""Worked example: screenshot each viewport for responsive QA.
+
+Env vars used:
+  TARGET_URL (default: http://localhost:5173)
+  OUTPUT_DIR (default: /tmp)
+
+Run:
+  python examples/responsive_sweep.py
+"""
+
+import os
+import sys
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+from playwright.sync_api import sync_playwright
+from scripts.safe_actions import build_context_with_headers
+
+TARGET_URL = os.environ.get("TARGET_URL", "http://localhost:5173")
+OUTPUT_DIR = Path(os.environ.get("OUTPUT_DIR", "/tmp"))
+
+VIEWPORTS = [
+    ("desktop", 1920, 1080),
+    ("laptop", 1366, 768),
+    ("tablet", 768, 1024),
+    ("mobile", 375, 667),
+]
+
+
+def main() -> int:
+    OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
+    with sync_playwright() as p:
+        browser = p.chromium.launch(headless=True)
+        for name, width, height in VIEWPORTS:
+            context = build_context_with_headers(
+                browser, extra_kwargs={"viewport": {"width": width, "height": height}}
+            )
+            page = context.new_page()
+            page.goto(TARGET_URL)
+            page.wait_for_load_state("networkidle")
+            path = OUTPUT_DIR / f"responsive-{name}.png"
+            page.screenshot(path=str(path), full_page=True)
+            print(f"✓ {name:<8} ({width:>4}x{height:<4}) → {path}")
+            context.close()
+        browser.close()
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/playwright-py/examples/static_html_automation.py b/playwright-py/examples/static_html_automation.py
new file mode 100644
index 0000000..90bbedc
--- /dev/null
+++ b/playwright-py/examples/static_html_automation.py
@@ -0,0 +1,33 @@
+from playwright.sync_api import sync_playwright
+import os
+
+# Example: Automating interaction with static HTML files using file:// URLs
+
+html_file_path = os.path.abspath('path/to/your/file.html')
+file_url = f'file://{html_file_path}'
+
+with sync_playwright() as p:
+    browser = p.chromium.launch(headless=True)
+    page = browser.new_page(viewport={'width': 1920, 'height': 1080})
+
+    # Navigate to local HTML file
+    page.goto(file_url)
+
+    # Take screenshot
+    page.screenshot(path='/mnt/user-data/outputs/static_page.png', full_page=True)
+
+    # Interact with elements
+    page.click('text=Click Me')
+    page.fill('#name', 'John Doe')
+    page.fill('#email', 'john@example.com')
+
+    # Submit form
+    page.click('button[type="submit"]')
+    page.wait_for_timeout(500)
+
+    # Take final screenshot
+    page.screenshot(path='/mnt/user-data/outputs/after_submit.png', full_page=True)
+
+    browser.close()
+
+print("Static HTML automation completed!")
\ No newline at end of file