Web To Prd

---
name: spartan:web-to-prd
description: Scan a live web app, extract all features, generate PRD with epics/stories/tasks, export to Notion
argument-hint: "[URL of the web app to scan]"
---

# Web-to-PRD: {{ args[0] | default: "https://example.com" }}

You are the **Web-to-PRD pipeline** — scan a live web app, extract every feature, create PM artifacts, and push to Notion.

**Target URL:** {{ args[0] | default: "https://example.com" }}

---

## Step 0: Prerequisite Check

**This step is mandatory. Do NOT skip it.**

**IMPORTANT: `claude mcp add/remove` does NOT make tools available mid-session.** MCP tools only load when Claude Code starts. NEVER try to install or reconfigure MCP servers during a running session — it changes the config but won't load the tools. This causes the session to get stuck in a loop.

### Check 1: Playwright MCP (REQUIRED)

Try to call any Playwright MCP tool (like `browser_snapshot` or `browser_navigate`).

**If the tool works** → check config is good:

```bash
cat ~/.claude.json 2>/dev/null | grep -A5 playwright || \
cat .claude.json 2>/dev/null | grep -A5 playwright || \
echo "NO_CONFIG_FOUND"

Config	Status	Action
--user-data-dir with .playwright-profile	Good	Proceed
--user-data-dir pointing to real Chrome profile	Risky	Warn: extensions cause timeouts
No --user-data-dir (clean mode)	OK for public sites	Proceed
--cdp-endpoint	Advanced mode	Proceed

If the tool is NOT found → Playwright MCP is not loaded. Show this and STOP:

Playwright MCP is not available. I need it to control a browser.

Run this in your terminal (outside Claude Code):

  claude mcp add playwright -- npx @playwright/mcp@latest --user-data-dir=$HOME/.playwright-profile --browser=chrome

Then restart Claude Code and run:

  /spartan:web-to-prd {{ args[0] | default: "URL" }}

Do NOT try to run claude mcp add yourself. It won't load the tools in this session.

Check 2: Notion MCP (OPTIONAL)

Try to call notion-search with query "test".

• If found → will export to Notion at the end.
• If not found → note it, PRD will be saved locally. This is fine — continue the crawl.

Notion is a nice-to-have. The PRD always saves locally regardless.

Show status and proceed

Prerequisite Check:
  Playwright MCP: [connected / not found]
  Notion MCP:     [connected / not found] (optional)

[If Playwright connected]: Ready to scan. Proceeding...
[If Playwright missing]:   Install instructions above. STOP.

Only Playwright is required. Notion is optional.

---

Step 1: Navigate and Handle Login

This step ensures we're fully logged in before exploring anything.

1-pre. Clean up stale browser processes (MANDATORY before first navigate)

Playwright MCP leaves orphan Chrome processes from previous runs. These cause "Opening in existing browser session" errors. Always run this before the first browser_navigate call:

# Remove stale lock files (safe — doesn't kill any processes)
rm -f "$HOME/.playwright-profile/SingletonLock" \
      "$HOME/.playwright-profile/SingletonCookie" \
      "$HOME/.playwright-profile/SingletonSocket" 2>/dev/null

echo "Browser cleanup done"

WARNING: Do NOT run pkill -f "playwright-profile" — it kills the Playwright MCP server process too, disconnecting the tools mid-session. Only remove lock files.

If browser_navigate still fails with "Opening in existing browser session":

1. Run the cleanup again
2. Wait 2 seconds
3. Retry once
4. If still fails → tell user to restart Claude Code (MCP server needs fresh start)

Now navigate to the target URL using Playwright. Take a snapshot.

1a. Check if login is needed

Look at the snapshot for login signals:

• Login/Sign-in form fields (email, password)
• "Sign in", "Log in", "Create account" text
• OAuth buttons (Google, GitHub, SSO)
• URL contains /login, /signin, /auth
• Redirect to a different domain (auth provider)

1b. If login page detected — STOP and handle login

Playwright opens a visible browser window (headed mode). The user can see and interact with it.

Tell the user:

"This app needs login before I can see all the features. A Chrome window should be open on your screen.

Please log in directly in that browser window. I won't see or store your credentials.

Tell me when you're logged in."

Wait for user confirmation. Do NOT proceed until they say "done", "logged in", or similar.

After user confirms:

1. Take a snapshot of the current page
2. Check if still on login page → "Still seeing the login page. Try again?"
3. Check if on dashboard/home/main content → "Logged in. Proceeding."
4. If unclear → ask user: "I see [page title]. Is this the main page after login?"

Repeat until login is confirmed. Do NOT start crawling while on a login page.

Login security rules:

• Never use browser_type to enter passwords — user types directly in browser
• Never ask for credentials in chat
• Never screenshot login pages (could capture pre-filled credentials)
• SSO/OAuth popups work normally — wait for user to complete

1c. If NOT a login page — proceed directly

The site is public or already logged in (cookies from previous session).

1d. Verify access level

After login (or on public site), check what's visible:

"I can see [dashboard/home page]. I see these navigation sections:

1. [Section name]
2. [Section name] ...

Does this look like full access? Or are there sections I'm missing? (Some apps hide admin/settings pages behind roles)"

Wait for user to confirm before starting the full crawl. This prevents generating a PRD from a limited view.

1e. Show crawl plan

Crawl Plan: [App Name]
URL:        [target URL]
Type:       [SPA / Multi-page / Hybrid]
Auth:       [Logged in / Public]
Estimated pages: ~[N]
Estimated time:  [N] minutes

Sections to explore:
  1. [Section name] — [N sub-items]
  2. [Section