/showcase

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: 1. **Content type**: Designs, sites, videos, templates, campaigns 2. **Source**: Curated, user-submitted, or both 3. **Format**: Grid, masonry, carousel; filter by category 4. **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