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
1---
2name: showcase-page-generator
3description: 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.
4metadata:
5 version: 1.0.1
6---
7
8# Pages: Showcase
9
10Guides 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.
11
12**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.
13
14## Initial Assessment
15
16**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for product, audience, and UGC sources.
17
18Identify:
191. **Content type**: Designs, sites, videos, templates, campaigns
202. **Source**: Curated, user-submitted, or both
213. **Format**: Grid, masonry, carousel; filter by category
224. **Primary goal**: Inspiration, sign up, community
23
24## Page Structure
25
26| Section | Purpose |
27|---------|---------|
28| **Headline** | "See What Others Built" or "Made with [Product]" |
29| **Intro** | Inspire; show what's possible |
30| **Gallery** | Grid of items; thumbnail, title, creator, link |
31| **Categories** | Filter by type, industry, use case |
32| **Submit** | CTA to submit work; link to form or guidelines |
33| **Featured** | Highlight top picks; rotate periodically |
34
35## Best Practices
36
37### Curation
38
39- **Quality over quantity**: Show best work; maintain bar
40- **Diversity**: Mix industries, styles, use cases
41- **Permissions**: Ensure creator consent; attribution
42
43### Display
44
45- **Visual-first**: Thumbnails, previews; minimal text
46- **Click-through**: To full project or creator profile
47- **Attribution**: Creator name, link; respect copyright
48
49### Community
50
51- **Submit CTA**: "Share your work"; clear guidelines
52- **Featured creators**: Spotlight; builds loyalty
53- **Social**: Share to X, LinkedIn; encourage tagging
54
55## Output Format
56
57- **Headline** and intro
58- **Gallery structure** (layout, filters)
59- **Per-item** format (thumbnail, title, creator)
60- **Submit** CTA and guidelines
61- **SEO** metadata
62
63## Related Skills
64
65- **card**: Gallery card structure; thumbnail, title, creator, link
66- **grid, masonry, carousel**: Grid for uniform; masonry for varying heights (Pinterest-style); carousel for featured rotation
67- **customer-stories-page-generator**: Case studies vs. visual showcase; different formats
68- **testimonials-generator**: Testimonials as component; showcase can include quotes
69- **creator-program**: Creator showcase for program members
70- **landing-page-generator**: Showcase as conversion page
gabrielmoreira