ph-gallery-assets

Q: How do I install ph-gallery-assets?

Run npx skills add https://github.com/yoanbernabeu/producthunt-skills --skill ph-gallery-assets in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ph-gallery-assets/ (personal) or .claude/skills/ph-gallery-assets/ (project).

by yoanbernabeuMedia & Creative

Create compelling gallery images for Product Hunt. Use this skill to plan, design, and optimize the image gallery that showcases your product's features, benefits, and value proposition to potential users.

Installs: 72
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/yoanbernabeu/producthunt-skills --skill ph-gallery-assets

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads ph-gallery-assets automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Product Hunt Gallery Assets

This skill helps you create a compelling gallery that tells your product's story, showcases key features, and convinces visitors to try your product.

When to Use This Skill

Planning your gallery image sequence
Creating feature showcase images
Designing before/after comparisons
Including video in your gallery
Optimizing gallery for conversion

Gallery Requirements

Technical Specs

Minimum images: 2 (required)
Recommended: 4-6 images
Formats: PNG, JPG, GIF
Video: YouTube links only
Order: Drag-and-drop reorderable

Best Practices

Tell a story from first to last image
Show actual product, not just marketing
Include at least one video/demo if possible
Make each image standalone yet connected

The Gallery Story Framework

Image Sequence Strategy

IMAGE 1: The Hook
↓ "What is this?"
IMAGE 2: The Problem
↓ "I have this problem!"
IMAGE 3: The Solution
↓ "This solves it!"
IMAGE 4: Key Feature 1
↓ "That's impressive"
IMAGE 5: Key Feature 2
↓ "Even more value"
IMAGE 6: Social Proof / CTA
→ "I should try this"

Image-by-Image Guide

Image 1: The Hook (REQUIRED)

Purpose: Stop the scroll, explain what this is

Options:

Hero shot with tagline overlay
Product in action (GIF)
Bold value proposition statement

Template:

┌────────────────────────────────┐
│                                │
│     [PRODUCT NAME]             │
│                                │
│     [Tagline/Value Prop]       │
│                                │
│     [Product Screenshot]       │
│                                │
└────────────────────────────────┘

Checklist:

Product name visible
Core value proposition clear
Product UI/interface shown
Visually compelling

Image 2: The Problem/Context

Purpose: Establish the pain point you solve

Options:

Before state visualization
Problem statistics
"The old way" frustration

Templates:

A) The Frustration

┌────────────────────────────────┐
│                                │
│   😫 Sound familiar?           │
│                                │
│   • Pain point 1               │
│   • Pain point 2               │
│   • Pain point 3               │
│                                │
│   There's a better way →       │
│                                │
└────────────────────────────────┘

B) The Statistics

┌────────────────────────────────┐
│                                │
│      [Shocking Stat]           │
│           ↓                    │
│   "[Problem costs X hours/     │
│    dollars per week]"          │
│                                │
└────────────────────────────────┘

Image 3: The Solution

Purpose: Show how your product solves the problem

Options:

After state visualization
Product in action (GIF/video)
Before → After comparison

Template: Before/After

┌────────────────────────────────┐
│   BEFORE     │     AFTER       │
│              │                 │
│   [Chaos]    │   [Order]       │
│   [Complex]  │   [Simple]      │
│   [Slow]     │   [Fast]        │
│              │                 │
│   ────────── → ──────────     │
│         With [Product]         │
└────────────────────────────────┘

Image 4-5: Key Features

Purpose: Highlight 2-3 most impressive features

For Each Feature:

Feature name (bold)
What it does (brief)
Why it matters (benefit)
Visual demonstration

Template:

┌────────────────────────────────┐
│                                │
│   ⚡ [Feature Name]            │
│                                │
│   [Screenshot/Demo]            │
│                                │
│   [One-line benefit]           │
│                                │
└────────────────────────────────┘

Feature Selection Criteria:

Most unique/differentiating
Most requested by users
Hardest to build (shows effort)
Most visual/demonstrable

Image 6: Social Proof / CTA

Purpose: Build trust, encourage action

Options:

A) Testimonials

┌────────────────────────────────┐
│                                │
│   ⭐⭐⭐⭐⭐                     │
│                                │
│   "[Quote from user]"          │
│                                │
│   — Name, Title @ Company      │
│     [Logo]                     │
│                                │
└────────────────────────────────┘

B) Metrics

┌────────────────────────────────┐
│                                │
│   Trusted by                   │
│                                │
│   10,000+ │ 4.9/5 │ 50+ Cos   │
│   Users   │ Rating │ trust us  │
│                                │
│   [Company logos row]          │
│                                │
└────────────────────────────────┘

C) CTA

┌────────────────────────────────┐
│                                │
│   Ready to [benefit]?          │
│                                │
│   ┌──────────────────────┐    │
│   │   Get Started Free   │    │
│   └──────────────────────┘    │
│                                │
│   🎁 PH Special: [Offer]       │
│                                │
└────────────────────────────────┘

Gallery Types by Product

SaaS/Web App

Hero with dashboard
Key workflow demo (GIF)
Feature highlight 1
Feature highlight 2
Integration showcase
Pricing/testimonials

Mobile App

App on device mockup
Key screens (3-up or carousel)
Feature 1 demo
Feature 2 demo
User reviews/ratings
Download CTA

Developer Tool

Code/terminal example
Before/after code comparison
Integration simplicity
Performance metrics
Documentation preview
GitHub stars/adoption

AI Product

AI in action (GIF)
Input → Output example
Accuracy/quality metrics
Use case 1
Use case 2
API/integration options

Video Integration

YouTube Video in Gallery

Creates more engagement
Shows product in motion
PH algorithm favors video

Video Requirements:

YouTube link only
Not set to private
Upload before launch day
Test embed works

Ideal Video Content:

30-90 second demo
Hook in first 5 seconds
Show the "aha" moment
End with CTA

Interactive Demos

Use tools like:

Arcade
Supademo
Storylane
Hexus

Design Best Practices

Do:

✓ Maintain consistent style/branding
✓ Use high-resolution images
✓ Include annotations/callouts
✓ Show real product, not mockups
✓ Test on mobile viewing
✓ Use dark mode screenshots if product has it

Don't:

✗ Use stock photos
✗ Include tiny unreadable text
✗ Make images too text-heavy
✗ Use different visual styles
✗ Include outdated UI
✗ Skip quality control

Gallery Checklist

Content

Quality

Flow

Tells coherent story
Each image has clear purpose
Logical progression
Ends with strong impression

Output Format

GALLERY PLAN FOR: [Product Name]

TOTAL IMAGES: [Number]
VIDEO INCLUDED: [Yes/No]

IMAGE SEQUENCE:

1. [Type: Hook/Hero]
   Content: [Description]
   Message: [What viewer should understand]

2. [Type: Problem]
   Content: [Description]
   Message: [What viewer should feel]

3. [Type: Solution]
   Content: [Description]
   Message: [The "aha" moment]

4. [Type: Feature]
   Feature: [Name]
   Content: [Description]

5. [Type: Feature]
   Feature: [Name]
   Content: [Description]

6. [Type: Social Proof/CTA]
   Content: [Description]
   Message: [Final impression]

VISUAL STYLE:
- Primary colors: [Colors]
- Typography: [Fonts]
- Screenshot style: [Dark/Light mode]

TOOLS TO USE:
[Recommended design tools]

FAQ

What does the ph-gallery-assets skill do?

How do I install ph-gallery-assets?

Run npx skills add https://github.com/yoanbernabeu/producthunt-skills --skill ph-gallery-assets in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ph-gallery-assets/ (personal) or .claude/skills/ph-gallery-assets/ (project).

Which AI agents can use ph-gallery-assets?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is ph-gallery-assets safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains ph-gallery-assets?

It is published by yoanbernabeu in yoanbernabeu/producthunt-skills. It has 72 recorded installs.