product-showcase

Generate multi-page marketing websites with real screenshots and animated GIF walkthroughs for web apps.

1|Updated Aug 18, 2026
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill product-showcase-scsm-unrestrict
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: product-showcase
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/product-showcase
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill product-showcase-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow.

What problem does it solve? Explaining what a web app actually does is hard with a single landing page, especially for complex or agentic products where static screenshots fail to convey the value. This Skill browses the running app, captures real screens and workflow sequences, and produces a deployable multi-page marketing site that teaches visitors how the product works. ## Core Features & Use Cases - Automated Screenshot Capture: Uses the bundled capture-screenshots tool to grab desktop, mobile, and dark-mode variants of key pages, including authenticated apps. - Animated GIF Walkthroughs: Combines sequential screenshots into looping GIFs that demonstrate real workflows like creating records, searching, or drag-and-drop interactions. - Three Depth Levels: Quick single-page sites, standard multi-page sites (home, features, how-it-works), or thorough sites with per-feature deep-dives, use cases, and comparison pages. - Use Case: You have an agentic CRM running locally and need a marketing site. The Skill captures the dashboard and workflows, writes benefit-focused copy, generates GIFs of the AI in action, and outputs a static site ready to deploy to Cloudflare Pages or Netlify. ## Quick Start Ask the agent to generate a standard product showcase site for your app running at http://localhost:5173 with screenshots and a how-it-works walkthrough.

Frequently Asked Questions about product-showcase

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a marketing website with real app screenshots?

Provide the running app's URL and let the Skill capture key pages using the bundled capture-screenshots tool with desktop, mobile, and dark-mode variants. It then generates a multi-page HTML site with hero, features, and how-it-works sections using those screenshots.

How to make animated GIF walkthroughs of a web app workflow?

Capture sequential screenshots at each workflow step with a numbered prefix, then combine the frames into a looping GIF using a Pillow one-liner. Keep GIFs under 10 seconds and 20 frames, captured at 1280x720 and displayed at half size.

Can I capture screenshots of an app that requires login?

Yes, the capture-screenshots tool supports authenticated apps via the --auth flag with user:password credentials. Chrome MCP is the preferred browser tool for authenticated sessions, while Playwright MCP suits public apps.

What are the limitations of marketing agentic AI apps with screenshots?

Static screenshots of agentic apps often show only a chat interface, which fails to convey invisible background work. The Skill addresses this with before/after comparisons, timeline views, result showcases, and magic-moment GIFs instead of raw UI captures.

Where can I deploy the generated showcase site?

The output is plain HTML, CSS, and images with no build step, so any static host works. Recommended options include Cloudflare Workers with static assets, Cloudflare Pages drag-and-drop, Netlify, Vercel, or GitHub Pages, ideally on a custom domain.