showcase page generator

خود اسکیل کپی

# 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

نصبش چطور است کپی

Claude Code / Claude Desktop

1. Create a folder named after the skill inside your skills directory:
   - Claude Code: `~/.claude/skills/<skill-name>/`
   - A project-local skill: `<project>/.claude/skills/<skill-name>/`
2. Save the text below as `SKILL.md` in that folder, keeping the
   `---` frontmatter block at the top — the `name` and `description`
   fields are what make the skill discoverable.
3. Restart Claude Code, or run `/skills` to confirm it is listed.

The skill loads only when its `description` matches what you are doing,
so a precise description matters more than a long body.

برای تو جواب داد؟

از کجا آمده

2025 kostja94