Skip to main content
affpapa.org
RU EN
skill CX Codex

web-to-prd — Claude Code skill: what it does, how to install

Inspects live web applications using Playwright, drafts PRD documents with user stories, and syncs the backlog into Notion.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add c0x12c/ai-toolkit --skill web-to-prd -a claude-code
Open on GitHub

What web-to-prd does

This skill navigates a target web application using Playwright to inspect user interface elements across screens. It arranges discovered capabilities into functional areas, then drafts a PRD alongside epics and prioritized task lists.

Exporting requirements requires the Notion MCP server to build linked databases in your workspace. Firecrawl MCP can optionally replace the initial Playwright crawl if you prefer faster site mapping.

Claude Code only loads MCP servers at startup. Adding an MCP integration during a running session will not expose its tools without a client restart. The workflow defaults to a dedicated profile at ~/.playwright-profile because everyday Chrome extensions frequently trigger timeout errors during automation.

What it helps with

  • generate a PRD directly from an operational web interface
  • break down competitor product workflows into epics and stories
  • sync product requirements and backlog databases into Notion
  • document web applications without existing specifications

Example prompts for the agent

  • /spartan:web-to-prd
  • Analyze this running app via Playwright and export the feature backlog to Notion
  • Inspect the live web application and generate a PRD with user stories

How to install web-to-prd

1Skills CLI (Vercel)

npx skills add c0x12c/ai-toolkit --skill web-to-prd -a claude-code

2Manually: put the files in place

~/.claude/skills/web-to-prd/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/web-to-prd/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about web-to-prd

How to install web-to-prd in Claude Code?

Run npx skills add c0x12c/ai-toolkit --skill web-to-prd -a claude-code. The tool specification will be stored at ~/.claude/skills/web-to-prd/SKILL.md.

What does web-to-prd do?

It inspects running web applications via Playwright, maps UI features, and drafts structured PRD files with tasks that export directly into Notion.

Which MCP integrations does web-to-prd need?

The skill requires Playwright MCP to automate the browser and Notion MCP to create database entries. Firecrawl MCP is an optional addition.

Similar skills

All skills for Browser and scraping →
agent-browser vercel-labs A CLI skill for browser control: it opens pages, fills forms, clicks buttons, and tests web apps. Use it when an agent needs to act inside a website. CX Codex +1 1,200,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs computer-use stablyai This skill drives a visible app window through orca computer: accessibility tree, clicks, typing, screenshots. Reach for it when the job sits behind a GUI. CX Codex +1 239,600installs browser-use browser-use Hands the agent a real Chrome over CDP: clicks, typing, screenshots, and pages that need JS or your logged-in session. CX Codex +1 98,200installs playwright-cli microsoft A skill that hands your agent a browser: open a page, click elements, grab a snapshot, and work with Playwright tests. CX Codex +1 195,700installs last30days mvanhorn Pulls posts and engagement on any topic from the last 30 days across Reddit, X, YouTube, TikTok, Hacker News, Polymarket, GitHub and the web. Useful when you want what people actually said, not what a blog summarized. CX Codex +1 53,000installs

From the same set33

testing-strategies Gives your coding agent ready test patterns for a Micronaut and Kotlin backend: integration tests, repository tests, test data builders. CX Codex +1 ★ 109repo stars terraform-service-scaffold Generates service-level Terraform infrastructure with AWS modules, environment configurations, and ArgoCD GitOps templates. CX Codex +1 ★ 109repo stars terraform-security-audit Reviews Terraform files for security issues across six areas and returns a pass-or-fail report. Run it before a deployment or when reviewing a new service. CX Codex +1 ★ 109repo stars terraform-review Walks Terraform changes through an 8-category checklist and returns a verdict: Approved, Needs Changes or Blocked. Useful before merging an infrastructure PR. CX Codex +1 ★ 109repo stars terraform-module-creator Builds clean Terraform modules with separate resource files, strict variable validation, and outputs. Ideal for turning messy root configurations into shared infrastructure blocks. CX Codex +1 ★ 109repo stars terraform-best-practices This skill guides Terraform code reviews and authoring, covering file layout, modules, state, and security. Use it when shaping infrastructure configuration. CX Codex +1 ★ 109repo stars startup-pipeline Moves a startup idea through four stages: brainstorm, validation, market research and pitch materials. Gates between stages stop weak ideas early. CX Codex +1 ★ 109repo stars service-debugging A structured backend troubleshooting runbook that guides the agent from symptom gathering and log analysis to root-cause isolation. CX Codex +1 ★ 109repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor