social-media-carousel

Name: social-media-carousel
Author: qu-skills

github.com/qu-skillsMarketing & growth443 installsUpdated 12w ago

About social-media-carousel

A reusable skill for planning and generating social-media carousel slides with the inference.sh CLI. It provides platform dimensions, slide structures, and design guidance for content creators.

Key features

01Carousel structures and slide roles
02Platform dimensions and slide limits
03Typography and readability guidance
04Design consistency rules
05Batch slide generation examples

Use cases

01Plan an educational tips carousel
02Adapt a case study into slides
03Create platform-sized social graphics

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/qu-skills/superpowers --skill social-media-carousel

After installing, type/social-media-carouselin Claude Code to confirm it loaded.

Details

From the project README

Install the belt CLI skill: npx skills add belt-sh/cli

Social Media Carousel

Design high-engagement carousel posts via inference.sh CLI.

Quick Start

Requires inference.sh CLI (belt). Install instructions

belt login

# Generate a carousel slide
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1080px;height:1080px;background:#0f172a;display:flex;align-items:center;justify-content:center;padding:80px;font-family:system-ui;color:white;text-align:center\"><div><p style=\"font-size:24px;color:#818cf8;text-transform:uppercase;letter-spacing:3px\">5 Rules for</p><h1 style=\"font-size:64px;margin:16px 0;font-weight:900;line-height:1.1\">Writing Headlines That Convert</h1><p style=\"font-size:22px;opacity:0.5;margin-top:24px\">Swipe →</p></div></div>"
}'

Platform Specs

Platform	Dimensions	Slides	Aspect Ratios
Instagram	1080 x 1080 px	Up to 20	1:1 (default), 4:5, 16:9
LinkedIn	1080 x 1080 px or 1080 x 1350	Up to 20	1:1, 4:5
Twitter/X	1080 x 1080 px	Up to 4	1:1, 16:9
Facebook	1080 x 1080 px	Up to 10	1:1, 4:5

Use 1080 x 1350 (4:5) on Instagram and LinkedIn — takes up more screen real estate in the feed than square.

Carousel Structure

The 7-Slide Framework

Slide	Purpose	Content
1	Hook	Bold claim, question, or promise — stops the scroll
2	Context	Why this matters, set up the problem
3-6	Value	One point per slide, numbered
7	CTA	Follow, save, share, comment, visit link

Slide 1: The Hook

The most important slide. If this fails, nobody swipes.

Hook Type	Example
Bold claim	"90% of landing pages make this mistake"
Question	"Why do your ads get clicks but no conversions?"
Number + promise	"7 Python tricks I wish I learned sooner"
Contrarian	"Stop writing blog posts (do this instead)"
Before/after	Show transformation

# Hook slide
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1080px;height:1350px;background:linear-gradient(180deg,#1e1b4b,#312e81);display:flex;align-items:center;justify-content:center;padding:80px;font-family:system-ui;color:white;text-align:center\"><div><h1 style=\"font-size:72px;font-weight:900;line-height:1.15;margin:0\">90% of Landing Pages Make This Mistake</h1><p style=\"font-size:28px;opacity:0.6;margin-top:32px\">Swipe to find out →</p></div></div>"
}'

Slides 2-6: Content Slides

One point per slide. Never cram multiple ideas.

# Content slide template
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1080px;height:1350px;background:#1e1b4b;padding:80px;font-family:system-ui;color:white;display:flex;flex-direction:column;justify-content:center\"><div><p style=\"font-size:120px;font-weight:900;color:#818cf8;margin:0;line-height:1\">01</p><h2 style=\"font-size:48px;margin:24px 0 16px;font-weight:800;line-height:1.2\">Your headline is too vague</h2><p style=\"font-size:26px;opacity:0.8;line-height:1.6\">\"Welcome to our platform\" tells the visitor nothing. Lead with the outcome: \"Ship docs in minutes, not days.\"</p></div></div>"
}'

Slide 7: CTA Slide

# CTA slide
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1080px;height:1350px;background:linear-gradient(180deg,#312e81,#1e1b4b);display:flex;align-items:center;justify-content:center;padding:80px;font-family:system-ui;color:white;text-align:center\"><div><h2 style=\"font-size:56px;font-weight:900;margin:0;line-height:1.2\">Found this useful?</h2><p style=\"font-size:32px;opacity:0.8;margin-top:24px;line-height:1.5\">Save this post for later 🔖<br>Follow for more tips</p><p style=\"font-size:24px;opacity:0.4;margin-top:40px\">@yourusername</p></div></div>"
}'

Design Rules

Text Hierarchy

Element	Size (at 1080px)	Weight
Slide number	96-120px	Black (900)
Heading	48-64px	Bold (700-800)
Body text	24-28px	Regular (400)
Caption/tag	18-22px	Medium (500)

Readability

Rule	Value
Max words per slide	30-40
Max lines of body text	4-5
Line height	1.5-1.6
Font	Sans-serif (Inter, Montserrat, Poppins)
Text contrast	4.5:1 minimum (WCAG AA)

Visual Consistency

Element	Keep Consistent Across All Slides
Background color/gradient	Same palette, slight variations OK
Font family	Same font throughout
Text alignment	Same position (left or center)
Margins/padding	Same spacing
Accent color	Same highlight color
Numbering style	Same format (01, 02 or 1., 2.)

Carousel Types

Educational / Tips

Slide 1: "5 CSS tricks you need to know"
Slide 2: Trick 1 with code example
Slide 3: Trick 2 with code example
...
Slide 6: Trick 5 with code example
Slide 7: "Follow for more dev tips"

Storytelling / Case Study

Slide 1: "How we grew from 0 to $1M ARR"
Slide 2: The beginning (context)
Slide 3: The challenge
Slide 4: What we tried (failed)
Slide 5: What worked
Slide 6: The result (numbers)
Slide 7: Key takeaway + CTA

Before / After

Slide 1: "I redesigned this landing page"
Slide 2: Before screenshot
Slide 3: Problem 1 annotated
Slide 4: After screenshot
Slide 5: Improvement 1 explained
Slide 6: Results (conversion lift)
Slide 7: "Want a review? DM me"

Listicle / Tools

Slide 1: "10 tools every designer needs in 2025"
Slides 2-6: 2 tools per slide with logo + one-liner
Slide 7: "Save this for later 🔖"

Swipe Psychology

Principle	Application
Curiosity gap	Hook promises value that requires swiping
Numbered progress	"3/7" creates completion drive
Visual continuity	Consistent design signals "there's more"
Increasing value	Best tip last — rewards completing
Swipe cue	Arrow or "Swipe →" on slide 1

Batch Generation

# Generate all slides for a carousel
for i in 1 2 3 4 5 6 7; do
  belt app run infsh/html-to-image --input "{
    \"html\": \"<div style='width:1080px;height:1350px;background:#1e1b4b;display:flex;align-items:center;justify-content:center;padding:80px;font-family:system-ui;color:white'><div style='text-align:center'><p style='font-size:28px;opacity:0.5'>Slide $i of 7</p></div></div>\"
  }" --no-wait
done

AI-Generated Carousel Visuals

# Generate illustrations for each slide
belt app run falai/flux-dev-lora --input '{
  "prompt": "minimal flat illustration, person at desk with laptop, clean modern style, simple shapes, limited color palette purple and blue tones, white background, icon style",
  "width": 1080,
  "height": 1080
}'

Common Mistakes

Mistake	Problem	Fix
Weak hook (slide 1)	Nobody swipes	Bold claim, question, or number + promise
Too much text per slide	Overwhelming, stops reading	Max 30-40 words per slide
No visual consistency	Looks like different posts	Same colors, fonts, margins throughout
No swipe indicator	People don't realize there's more	Add "Swipe →" or arrow on slide 1
No CTA on last slide	Missed engagement opportunity	Ask to save, follow, share, or comment
Inconsistent numbering	Feels disorganized	Same number format on every content slide
Cramming 2+ ideas per slide	Hard to digest	One point per slide, always
Square format on Instagram	Wastes feed real estate	Use 1080x1350 (4:5) for more visibility

Related Skills

npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@content-repurposing
npx skills add inference-sh/skills@linkedin-content

Browse all apps: belt app list

Comments

Markdown supported

Details

Author: qu-skills
Repository: qu-skills/superpowers
Category: Marketing & growth
Installs: 43
GitHub stars: 4

Report

More skills

All skills

twitter-automation

github.com/inference-sh

1.7M

Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-create (text and media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet

reddit-automation

github.com/flowkit-labs

1.1M

Find Reddit threads where people are genuinely asking for what you offer, then draft short, genuinely helpful replies—disclosing your affiliation honestly and naming your product only when it truly answers the question. Two moves: discovery—scan the right subreddits for real needs (recommendation asks, expressed pain, competitor mentions) and rank the few threads where you can actually help; drafting—write from real experience, respect each community's self-promo rules, and keep a human in the loop to review and post. This markets on Reddit the honest way: contribute value, disclose who you are, never astroturf. Distilled from the playbook behind doany.ai's Reddit agent. Triggers on "find reddit opportunities", "reddit marketing", "reddit automation", "reply on reddit for my product", "reddit community engagement", "reddit lead gen", or any ask to turn Reddit threads into genuine, disclosed marketing replies.

twitter-automation

github.com/101-skills

894.5k

Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet

twitter-automation

github.com/magentosh

785.9k