product-showcase

Name: product-showcase
Author: jezweb

865installs96forks

How to install product-showcase?

jezweb/claude-skills/product-showcase

$npx -y skills add jezweb/claude-skills --skill product-showcase

Installs into the current project.

Summary

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 p

Files · 1

View on GitHub

SKILL.md

1	# Product Showcase Generator
2
3	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."
4
5	Especially valuable for complex apps, agentic AI tools, and anything where a static screenshot doesn't convey the value.
6
7	## Depth Levels
8
9	\| Depth \| Output \| Duration \|
10	\|-------\|--------\|----------\|
11	\| quick \| Single page — hero, features, CTA. Same as before. \| 15-20 min \|
12	\| standard \| Multi-page site — home, features page, how-it-works with screenshots. \| 1-2 hours \|
13	\| thorough \| Comprehensive site — home, per-feature pages, animated GIF walkthroughs, use cases, comparison page, docs-style demo. \| 3-6 hours \|
14
15	Default: standard
16
17	## Browser Tool Detection
18
19	Before starting, detect available browser tools:
20
21	1. Chrome MCP (`mcp__claude-in-chrome__*`) — preferred for authenticated apps
22	2. Playwright MCP (`mcp__plugin_playwright_playwright__*`) — for public apps
23	3. playwright-cli — for scripted flows
24
25	## Workflow
26
27	### 1. Gather Input
28
29	\| Field \| Required \| Example \|
30	\|-------\|----------\|---------\|
31	\| App URL \| Yes \| `https://app.example.com` or `http://localhost:5173` \|
32	\| App name \| Yes \| "Acme CRM" \|
33	\| Tagline \| No \| "The CRM that gets out of your way" \|
34	\| Target audience \| No \| "Small business owners" \|
35	\| Pricing info \| No \| Free tier, $29/mo pro \|
36	\| CTA text + URL \| No \| "Start Free Trial" → signup page \|
37	\| Testimonials \| No \| User provides or skip section \|
38
39	### 2. Capture Screenshots
40
41	Use `capture-screenshots` (shipped in `bin/`) to capture the app. This is faster and more consistent than generating Playwright scripts each time.
42
43	#### Quick capture (all key pages at once):
44	```bash
45	capture-screenshots http://localhost:5173 \
46	--pages /,/dashboard,/contacts,/settings \
47	--output showcase/screenshots \
48	--prefix screen \
49	--mobile --dark
50	```
51
52	This produces desktop (1280x720), mobile (375px), and dark mode variants for each page in one run.
53
54	#### For authenticated apps:
55	```bash
56	capture-screenshots https://app.example.com \
57	--pages /,/dashboard,/settings \
58	--auth user:password \
59	--output showcase/screenshots \
60	--mobile --dark
61	```
62
63	#### What to capture:
64
65	a. First Impression — the main page/dashboard becomes the hero image. Note the immediate value proposition.
66
67	b. Features — each major section. Use `--pages` with all nav paths. Capture 6-10 key screens that tell the product story.
68
69	c. "How It Works" flow — the main workflow in sequence. Run `capture-screenshots` multiple times with `--prefix workflow-step` as you navigate through the flow steps.
70
71	d. Detail shots — zoom into specific UI elements. Use `--full-page` for scrollable content.
72
73	e. Both modes — `--dark` flag captures light and dark variants automatically. Use the best-looking mode for the hero.
74
75	#### Post-capture optimisation:
76	```bash
77	img-process batch showcase/screenshots --action optimise --max-width 1920 -o showcase/screenshots-opt
78	```
79
80	#### f. Extract the Value Propositions
81	Don't just list features. For each one, answer: why does the user care?
82	- BAD: "Contact management page"
83	- GOOD: "See every client, their history, and what needs attention — in one view"
84	- BAD: "Search functionality"
85	- GOOD: "Find anything in seconds — semantic search understands what you mean, not just what you type"
86
87	### 3. Generate the Site
88
89	#### Quick Mode: Single Page (same as before)
90	One HTML file: hero + feature grid + CTA. Use for MVPs and quick marketing.
91
92	#### Standard Mode: Multi-Page Site
93
94	```
95	showcase/
96	├── index.html # Home — hero, overview, feature highlights, CTA
97	├── features.html # All features with screenshots and descriptions
98	├── how-it-works.html # Step-by-step workflow walkthrough with screenshots
99	├── screenshots/ # All captured images
100	│ ├── hero.png
101	│ ├── feature-*.png
102	│ ├── workflow-step-*.png
103	│ └── *.gif # Animated walkthroughs
104	└── styles.css # Shared styles (or inline Tailwind CDN)
105	```
106
107	Home page: Hero with animated GIF or key screenshot, 3-4 feature highlights (not all features — just the best), "How It Works" summary (3 steps), CTA.
108
109	Features page: Every feature with a real screenshot and bene

People who liked this also viewed

6 picks

Type

product-showcase

865installs96forks

View on GitHub

How to install product-showcase?

jezweb/claude-skills/product-showcase

$npx -y skills add jezweb/claude-skills --skill product-showcase

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Product Showcase Generator
2
3	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."
4
5	Especially valuable for complex apps, agentic AI tools, and anything where a static screenshot doesn't convey the value.
6
7	## Depth Levels
8
9	\| Depth \| Output \| Duration \|
10	\|-------\|--------\|----------\|
11	\| quick \| Single page — hero, features, CTA. Same as before. \| 15-20 min \|
12	\| standard \| Multi-page site — home, features page, how-it-works with screenshots. \| 1-2 hours \|
13	\| thorough \| Comprehensive site — home, per-feature pages, animated GIF walkthroughs, use cases, comparison page, docs-style demo. \| 3-6 hours \|
14
15	Default: standard
16
17	## Browser Tool Detection
18
19	Before starting, detect available browser tools:
20
21	1. Chrome MCP (`mcp__claude-in-chrome__*`) — preferred for authenticated apps
22	2. Playwright MCP (`mcp__plugin_playwright_playwright__*`) — for public apps
23	3. playwright-cli — for scripted flows
24
25	## Workflow
26
27	### 1. Gather Input
28
29	\| Field \| Required \| Example \|
30	\|-------\|----------\|---------\|
31	\| App URL \| Yes \| `https://app.example.com` or `http://localhost:5173` \|
32	\| App name \| Yes \| "Acme CRM" \|
33	\| Tagline \| No \| "The CRM that gets out of your way" \|
34	\| Target audience \| No \| "Small business owners" \|
35	\| Pricing info \| No \| Free tier, $29/mo pro \|
36	\| CTA text + URL \| No \| "Start Free Trial" → signup page \|
37	\| Testimonials \| No \| User provides or skip section \|
38
39	### 2. Capture Screenshots
40
41	Use `capture-screenshots` (shipped in `bin/`) to capture the app. This is faster and more consistent than generating Playwright scripts each time.
42
43	#### Quick capture (all key pages at once):
44	```bash
45	capture-screenshots http://localhost:5173 \
46	--pages /,/dashboard,/contacts,/settings \
47	--output showcase/screenshots \
48	--prefix screen \
49	--mobile --dark
50	```
51
52	This produces desktop (1280x720), mobile (375px), and dark mode variants for each page in one run.
53
54	#### For authenticated apps:
55	```bash
56	capture-screenshots https://app.example.com \
57	--pages /,/dashboard,/settings \
58	--auth user:password \
59	--output showcase/screenshots \
60	--mobile --dark
61	```
62
63	#### What to capture:
64
65	a. First Impression — the main page/dashboard becomes the hero image. Note the immediate value proposition.
66
67	b. Features — each major section. Use `--pages` with all nav paths. Capture 6-10 key screens that tell the product story.
68
69	c. "How It Works" flow — the main workflow in sequence. Run `capture-screenshots` multiple times with `--prefix workflow-step` as you navigate through the flow steps.
70
71	d. Detail shots — zoom into specific UI elements. Use `--full-page` for scrollable content.
72
73	e. Both modes — `--dark` flag captures light and dark variants automatically. Use the best-looking mode for the hero.
74
75	#### Post-capture optimisation:
76	```bash
77	img-process batch showcase/screenshots --action optimise --max-width 1920 -o showcase/screenshots-opt
78	```
79
80	#### f. Extract the Value Propositions
81	Don't just list features. For each one, answer: why does the user care?
82	- BAD: "Contact management page"
83	- GOOD: "See every client, their history, and what needs attention — in one view"
84	- BAD: "Search functionality"
85	- GOOD: "Find anything in seconds — semantic search understands what you mean, not just what you type"
86
87	### 3. Generate the Site
88
89	#### Quick Mode: Single Page (same as before)
90	One HTML file: hero + feature grid + CTA. Use for MVPs and quick marketing.
91
92	#### Standard Mode: Multi-Page Site
93
94	```
95	showcase/
96	├── index.html # Home — hero, overview, feature highlights, CTA
97	├── features.html # All features with screenshots and descriptions
98	├── how-it-works.html # Step-by-step workflow walkthrough with screenshots
99	├── screenshots/ # All captured images
100	│ ├── hero.png
101	│ ├── feature-*.png
102	│ ├── workflow-step-*.png
103	│ └── *.gif # Animated walkthroughs
104	└── styles.css # Shared styles (or inline Tailwind CDN)
105	```
106
107	Home page: Hero with animated GIF or key screenshot, 3-4 feature highlights (not all features — just the best), "How It Works" summary (3 steps), CTA.
108
109	Features page: Every feature with a real screenshot and bene

People who liked this also viewed

6 picks

Type