Product Showcase
Generate a comprehensive marketing website for a web app, multi-page with real...
Install
npx skills add jezweb/claude-skills --skill product-showcase -g -a claude-code -y- Repository
- jezweb/claude-skills1.1k
- Category
- Marketing
- Updated
- 26d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Generate a comprehensive marketing website for a web app, multi-page with real screenshots, animated GIF walkthroughs, feature deep-dives, and workflow demonstrations. Browses the running app, captures screens and sequences, and produces a deployable site that actually teaches people what the product does. Especially useful for complex or agentic apps that are hard to explain. Triggers: 'showcase site', 'product page', 'show off the app', 'marketing site', 'demo site', 'product showcase', 'explain the app', 'how do I market this'.
Product Showcase Generator
Generate a marketing website that actually teaches people what a web app does. Not just a hero and feature grid, a multi-page site with real screenshots, animated GIF walkthroughs of workflows, feature deep-dives, and progressive depth from "what is this" to "here's exactly how it works."
Especially valuable for complex apps, agentic AI tools, and anything where a static screenshot doesn't convey the value.
Depth Levels
| Depth | Output | Duration |
|---|---|---|
| quick | Single page, hero, features, CTA. Same as before. | 15-20 min |
| standard | Multi-page site, home, features page, how-it-works with screenshots. | 1-2 hours |
| thorough | Comprehensive site, home, per-feature pages, animated GIF walkthroughs, use cases, comparison page, docs-style demo. | 3-6 hours |
Default: standard
Browser Tool Detection
Before starting, detect available browser tools:
- Chrome MCP (
mcp__claude-in-chrome__*), preferred for authenticated apps - Playwright MCP (
mcp__plugin_playwright_playwright__*), for public apps - playwright-cli, for scripted flows
Workflow
1. Gather Input
| Field | Required | Example |
|---|---|---|
| App URL | Yes | https://app.example.com or http://localhost:5173 |
| App name | Yes | "Acme CRM" |
| Tagline | No | "The CRM that gets out of your way" |
| Target audience | No | "Small business owners" |
| Pricing info | No | Free tier, $29/mo pro |
| CTA text + URL | No | "Start Free Trial" → signup page |
| Testimonials | No | User provides or skip section |
2. Capture Screenshots
Use capture-screenshots (shipped in bin/) to capture the app. This is faster and more consistent than generating Playwright scripts each time.
