How to install showcase-page-generator
npx skills add https://github.com/kostja94/marketing-skills --skill showcase-page-generatorFull instructions (SKILL.md)
Source of truth, from kostja94/marketing-skills.
name: showcase-page-generator description: 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. metadata: version: 1.0.1
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
Related skills
More from kostja94/marketing-skills and the wider catalog.
sidebar-generator
When the user wants to design, optimize, or audit a sidebar for blogs, docs, or content pages. Also use when the user mentions "sidebar," "blog sidebar," "content sidebar," "side panel," "sidebar navigation," "related content," "sidebar CTA," "doc sidebar," or "sidebar widgets." For blog layout, use blog-page-generator.
signup-login-page-generator
When the user wants to create, optimize, or audit signup and login pages. Also use when the user mentions "signup page," "login page," "registration page," "auth page," "sign up form," "create account," "student discount at signup," or "auth subdomain." For indexing/auth URLs, use indexing.
site-crawlability
When the user wants to improve crawlability, fix orphan pages, or optimize site structure for search engines. Also use when the user mentions "crawlability," "crawl budget," "orphan pages," "internal links," "site structure," "site crawlability," "infinite scroll," "pagination," "masonry SEO," "AI crawler optimization," "GPTBot crawlability," "ClaudeBot crawlability," or "content not indexed." For internal links, use internal-links.
social-share-generator
When the user wants to add, optimize, or audit social share buttons (share article to X, LinkedIn, Facebook, etc.). Also use when the user mentions "share buttons," "social share," "share to X," "share to LinkedIn," "social sharing," "share icons," "share widget," "native share," "Web Share API," or "share intent URLs." For link previews, use open-graph.
solutions-page-generator
When the user wants to create, optimize, or audit solutions pages. Also use when the user mentions "solutions," "solutions page," "by industry," "industry solutions," "by company size," "SMB," "enterprise," "by outcome," "business outcomes," or "how we solve X." For sitewide page planning, use website-structure.
startups-page-generator
When the user wants to create, optimize, or audit a startups, education, or special program page. Also use when the user mentions "startups program," "for startups," "education discount," "student plan," "for students," or "special pricing." For education discounts, use education-program.