product-showcase

product-showcase is a skill for Claude Code from jezweb/claude-skills. It costs 117 tokens per session (4,975 once invoked), scanned A, original, MIT.

A tool for creating a marketing website that explains a web app through pages, real screenshots, feature details, and workflow demonstrations. It is intended for products whose behaviour is difficult to understand from a single image.

In plain words
What is it for?
Use it to build product pages, feature explanations, walkthroughs, use cases, and comparison content for a web app.
Why use it?
It helps visitors understand how a complex app works instead of relying on a short description and a static feature list.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the frontend plugin — 9 skills, 7 commands shipped together

Good fit Use it to build product pages, feature explanations, walkthroughs, use cases, and comparison content for a web app.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/jezweb/claude-skills/product-showcase
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add jezweb/claude-skills --skill product-showcase
Clone the repo
git clone --depth 1 https://github.com/jezweb/claude-skills

Made for: Claude Code.

Or install frontend, the plugin that ships this one along with the rest of its 9 skills, 7 commands.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for product-showcase

README.md
[![agentmods](https://agentmods.dev/badge/skills/jezweb/claude-skills/product-showcase/github.svg)](https://agentmods.dev/skills/jezweb/claude-skills/product-showcase)
Your own site
<a href="https://agentmods.dev/skills/jezweb/claude-skills/product-showcase"><img src="https://agentmods.dev/badge/skills/jezweb/claude-skills/product-showcase/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for product-showcase

Your own site · 80×15
<a href="https://agentmods.dev/skills/jezweb/claude-skills/product-showcase"><img src="https://agentmods.dev/badge/skills/jezweb/claude-skills/product-showcase.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 117 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,975 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • Socket warn 14 May 2026
  • Snyk fail 14 May 2026
  • NVIDIA SkillSpector warn 7 Sept 2026
SkillSpector: 1 finding, up to medium

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

  • medium MCP Rug Pull · line 382
    npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.
    Fix: Pin the version: npx @scope/[email protected]
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00117 $0.04975
Opus 5 $0.00059 $0.02488
Sonnet 5 $0.00023 $0.00995
Haiku 4.5 $0.00012 $0.00498

Measured 8d ago against content hash f815f7392056, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

product-showcase scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/frontend/skills/product-showcase/SKILL.md · 488 lines

How it starts

The opening of the file, as written. The whole thing — 488 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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.

Quick capture (all key pages at once):
capture-screenshots http://localhost:5173 \
  --pages /,/dashboard,/contacts,/settings \
  --output showcase/screenshots \
  --prefix screen \
  --mobile --dark

Read the full file on GitHub · 488 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 8d ago First seen · 488 lines · 117 tokens per session scan A f815f7392056

Subscribe to this mod's changes

product-showcase is a skill published in the GitHub repository jezweb/claude-skills (1,001 stars, last pushed 2mo ago), licensed MIT. It adds 117 tokens to every session and 4,975 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

ensemble-solving

Generate multiple diverse solutions in parallel and select the best. Use for architecture decisions, code generation with multiple valid approaches, or creative tasks where exploring alternatives improves quality.

mhattingpete/claude-skills-marketplace · 35 tokens

code-transfer

Transfer code between files with line-based precision. Use when users request copying code from one location to another, moving functions or classes between files, extracting code blocks, or inserting code at specific line numbers.

mhattingpete/claude-skills-marketplace · 43 tokens

feature-planning

Break down feature requests into detailed, implementable plans with clear tasks. Use when user requests a new feature, enhancement, or complex change.

mhattingpete/claude-skills-marketplace · 32 tokens

review-implementing

Process and implement code review feedback systematically. Use when user provides reviewer comments, PR feedback, code review notes, or asks to implement suggestions from reviews.

mhattingpete/claude-skills-marketplace · 35 tokens

codebase-documenter

Generates comprehensive documentation explaining how a codebase works, including architecture, key components, data flow, and development guidelines. Use when user wants to understand unfamiliar code, create onboarding docs, document architecture, or explain how the system works.

mhattingpete/claude-skills-marketplace · 52 tokens

conversation-analyzer

Analyzes your Claude Code conversation history to identify patterns, common mistakes, and opportunities for workflow improvement. Use when user wants to understand usage patterns, optimize workflow, identify automation opportunities, or check if they're following best practices.

mhattingpete/claude-skills-marketplace · 48 tokens