product-showcase
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'.
npx skills add jezweb/claude-skills --skill product-showcase --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Generates a comprehensive, multi-page marketing site for a web app. It gathers input about the app, captures screenshots from the running app, creates animated GIF walkthroughs, and assembles a deployable site with home, features, how-it-works, use cases, and more. It emphasizes real screenshots, workflow demonstrations, and progressive depth from overview to detailed explanations. It is designed for complex or agentic apps where static screenshots don’t convey value.
How it works
The workflow includes:
- Depth levels: quick (single page), standard (multi-page with screenshots), thorough (comprehensive with per-feature pages, GIFs, use cases, and comparison). Default is standard.
- Browser Tool Detection: detects available tools (Chrome MCP, Playwright MCP, playwright-cli) to run the capture flows.
- Gather Input: collects App URL, App name, optional tagline, audience, pricing, CTA, and testimonials.
- Capture Screenshots: uses capture-screenshots (in bin/) to capture pages with options for authentication, pages list, and output path. Includes steps for first impression, features, how-it-works flow, detail shots, and dark mode variants.
- Post-capture optimization: runs img-process batch to optimise images.
- GIFs: instructions to capture and assemble animated GIFs from sequences, including guidelines for frame counts, sizes, and display.
- Generate the Site: builds Quick, Standard, or Thorough site structure with specific file layouts (index.html, features pages, how-it-works, use-cases, etc.). Includes guidance for hero, feature grid, workflow steps, and per-feature deep-dives.
- Animated GIF Walkthroughs: describes how to capture and assemble GIFs via Playwright/Chrome MCP, plus display in a browser-frame mockup.
- Explaining Agentic Apps: provides patterns (Before/After, Timeline, Result showcase, Side-by-side, Magic moment) and copy tips tailored to agentic apps.
- Screenshot Presentation: shows how to present screenshots in a CSS browser-frame, including code snippets for visuals.
- Site Navigation: prescribes consistent navigation across multi-page sites with sticky nav and mobile menu.
- Output: after generation, instructs preview and deployment steps and notes on placeholder content and GIF sizes.
- Design Patterns and Deployment: outlines color, typography, responsiveness, dark mode, performance, and deployment options (Cloudflare Workers, Cloudflare Pages).
When to use it
Use when building marketing collateral for a web app that benefits from real interaction visuals rather than static screenshots, especially for complex or agentic apps where demonstrating actual workflows and outcomes helps explain value. Triggers include phrases like 'showcase site', 'product page', 'marketing site', 'demo site', 'explain the app', and others.
What it can touch
- Tools: claude-code (required); references to shell commands like capture-screenshots, img-process, and Python/gif generation scripts.
- File structure: expects a showcase-like directory layout with index.html, features/, how-it-works.html, use-cases/, screenshots/, styles.css, etc. Output generates a full static site in the showcase/ folder.
Caveats
- License: MIT (as per metadata).
- Compatibility: explicitly for claude-code-only workflows; behavior relies on available browser tools (Chrome MCP, Playwright MCP, playwright-cli).
- Placeholder content: user must replace placeholder text/images as indicated.
- GIFs: guidance on size limits and frame counts; large GIFs can be trimmed by adjusting frames.
# 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
- Depth Levels
- Browser Tool Detection
- Workflow
- 1. Gather Input
- 2. Capture Screenshots
- 3. Generate the Site
- 4. Animated GIF Walkthroughs
- 5. Explaining Agentic / AI Apps
- 5. Screenshot Presentation
- 6. Site Navigation (multi-page)
- 7. Output
- Design Patterns
- Making It Look Premium
- Screenshot Enhancement
capture-screenshots http://localhost:5173 \
capture-screenshots https://app.example.com \
img-process batch showcase/screenshots --action optimise --max-width 1920 -o showcase/screenshots-opt
Capture each step with a sequential prefix
capture-screenshots http://localhost:5173/clients \
capture-screenshots http://localhost:5173/clients/new \
Combine frames into GIF (Python one-liner using Pillow)
python3 -c "
from PIL import Image; import glob
frames = [Image.open(f) for f in sorted(glob.glob('.jez/screenshots/workflow-*.png'))]What does the product-showcase skill do?
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'.
How do I install it?
Run `npx skills add jezweb/claude-skills --skill product-showcase --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From jezweb/claude-skills, a repository with 954 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.