Auto-Setup Playwright UI Tests

Standing up Playwright UI tests for a web app by hand is slow — read your router, decide
which routes matter, tag every element with a stable `data-testid`, write mock-backed and
real-backend specs, wire `playwright.config`, set up login state. **This skill does all of
that wiring for you.** Point it at your project root; it reads how your app is built and
generates a complete, runnable Playwright suite — then tells you exactly how to run it.

### ✅ What you get
- **Auto-detected router** — Nuxt (2/3), Next.js (`pages/` + `app/`), Vue Router, React Router
- **Curated route coverage** — it discovers your routes and *you* pick which matter
- **A `data-testid` tagging plan** — with the web selector caveats baked in
- **Two specs per route** — a real-backend `*.e2e.spec` and a mock-backed `*.mock.spec`
- **`playwright.config`** — app + mock `webServer` wiring, `mock` / `e2e` projects, storageState
- **Login setup project** — a zero-app-source `auth.setup.ts` contract for auth-gated apps
- **`@playwright/test` devDependency + exact install/run commands**

### 🔌 How it connects to your backend
The test run points your app's API base URL at a mock server (via your dev-server env var —
`VITE_API_URL` / `NEXT_PUBLIC_API_URL` / … — or a dev-server proxy). Specs drive the mock's
`/__mock/*` control API through Playwright's `request` fixture — no in-browser route stubs.

### 🧩 Works on its own — better with a mock server
On its own it stands up the **real-backend** specs and the full config — that's the
auto-setup, done, no extra purchase needed. For **deterministic, offline runs and
server-side error-state** coverage, add a mock server exposing the `/__mock/*` control API:
the companion skill **Bootstrap Mobile Mock Server** scaffolds exactly that. No mock server?
This skill asks how you'd like to proceed and scaffolds the e2e suite right away; add the
mock server later and re-run to generate the mock-backed specs.

### 🛡️ Safe by default
It shows the full plan and asks before writing anything. The only source edits it makes are
`data-testid` attributes — **no refactors, no logic changes.** Auth (both strategies)
touches no app source.

### 🧪 Why it works
Distilled from a **production web testing harness used on real shipping apps**, so it bakes
in the conventions that keep Playwright suites stable:
- `getByTestId` + web-first assertions over brittle text / CSS selectors
- The dev-server env-var (or proxy) mechanism for pointing the app at a mock
- Server-side error injection via `/__mock/*` instead of in-browser stubs
- storageState-based auth that never touches app source

### ▶️ What you run
It **scaffolds and instructs** — writes the suite, adds the devDependency, and prints the
exact `npm install` / `npx playwright install` / `npx playwright test` commands. You run them.

### 📋 Requirements
- A web frontend project (Nuxt, Next.js, Vue Router, or React Router)
- Node.js + a package manager (npm / yarn / pnpm)

---
*Built for web developers and QA engineers who want a real Playwright E2E suite stood up in
minutes instead of days.*