mcpbeat

Showcase Page Generator

kostja94/showcase-page-generator

When the user wants to create, optimize, or audit a showcase or gallery page for user-generated content. Also use when the user mentions "showcase," "gallery," "user work," "UGC," "creator showcase," "examples," or "made with [product]." For social proof components, use testimonials-generator.

738 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
836
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/kostja94/marketing-skills --skill showcase-page-generator

The instruction itself

9 sections, as written by the author

Pages: Showcase

Guides showcase and gallery pages that display user-generated work, creator content, or "made with [product]" examples. Builds community, social proof, and inspiration. Common for design tools, no-code, and creator-focused products.

When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

Initial Assessment

Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for product, audience, and UGC sources.

Identify:

  • Content type: Designs, sites, videos, templates, campaigns
  • Source: Curated, user-submitted, or both
  • Format: Grid, masonry, carousel; filter by category
  • Primary goal: Inspiration, sign up, community

Page Structure

| Section | Purpose |

|---------|---------|

| Headline | "See What Others Built" or "Made with [Product]" |

| Intro | Inspire; show what's possible |

| Gallery | Grid of items; thumbnail, title, creator, link |

| Categories | Filter by type, industry, use case |

| Submit | CTA to submit work; link to form or guidelines |

| Featured | Highlight top picks; rotate periodically |

Best Practices

Curation

  • Quality over quantity: Show best work; maintain bar
  • Diversity: Mix industries, styles, use cases
  • Permissions: Ensure creator consent; attribution

Display

  • Visual-first: Thumbnails, previews; minimal text
  • Click-through: To full project or creator profile
  • Attribution: Creator name, link; respect copyright

Community

  • Submit CTA: "Share your work"; clear guidelines
  • Featured creators: Spotlight; builds loyalty
  • Social: Share to X, LinkedIn; encourage tagging

Output Format

  • Headline and intro
  • Gallery structure (layout, filters)
  • Per-item format (thumbnail, title, creator)
  • Submit CTA and guidelines
  • SEO metadata

Related Skills

  • card: Gallery card structure; thumbnail, title, creator, link
  • grid, masonry, carousel: Grid for uniform; masonry for varying heights (Pinterest-style); carousel for featured rotation
  • customer-stories-page-generator: Case studies vs. visual showcase; different formats
  • testimonials-generator: Testimonials as component; showcase can include quotes
  • creator-program: Creator showcase for program members
  • landing-page-generator: Showcase as conversion page

How to use it

Copy the folder

Take kostja94/showcase-page-generator from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.