# Product Showcase

Generate a comprehensive marketing website for a web app, multi-page with real...

- Repository: https://github.com/jezweb/claude-skills (1094 stars)
- Category: Marketing
- License: MIT
- Last updated: 2026-10-09
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add jezweb/claude-skills --skill product-showcase -g -a claude-code -y`
Codex: `npx skills add jezweb/claude-skills --skill product-showcase -g -a codex -y`
Cursor: `npx skills add jezweb/claude-skills --skill product-showcase -g -a cursor -y`
Gemini CLI: `npx skills add jezweb/claude-skills --skill product-showcase -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add jezweb/claude-skills`

## Description

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'.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:

1. **Chrome MCP** (`mcp__claude-in-chrome__*`), preferred for authenticated apps
2. **Playwright MCP** (`mcp__plugin_playwright_playwright__*`), for public apps
3. **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.

The rest: https://github.com/jezweb/claude-skills/blob/HEAD/plugins/frontend/skills/product-showcase/SKILL.md