skills.rest
luuspoo-create
luuspoo-createCOMMUNITY
Explore all skills by this author →
GitHub

content-instagram-carousel

Generate self-contained 7-slide 4:5 Instagram carousel HTML with swipe logic and PNG export.

1|Updated Apr 11, 2026
Search Tags:#design#html#instagram#export#social-media#carousel#swipe
One-click install
npx skills add https://github.com/luuspoo-create/claude-bildungs-skills --skill content-instagram-carousel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: content-instagram-carousel
Source: https://github.com/luuspoo-create/claude-bildungs-skills/tree/main/content-instagram-carousel
Command: npx skills add https://github.com/luuspoo-create/claude-bildungs-skills --skill content-instagram-carousel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly produces fully export-ready, swipeable Instagram carousels as self-contained HTML so users do not need to design, code, or stitch slides manually; it enforces consistent branding, export settings (1080×1350 PNG), and Instagram-friendly layout (4:5, 7 slides).

Core Features & Use Cases

  • Complete HTML Carousel: Generates a self-contained 7-slide 4:5 carousel with swipe logic, progress bar, logo corner, footer handle, and optional thematic background images.
  • Brand & Export Ready: Chooses or applies a color palette, embeds a Base64 logo for the corner and CTA slide, and supports PNG export at 1080×1350px.
  • Design & Interaction: Implements mix-blend-mode image overlays, accessible spacing, swipe JS, and a preview frame for Instagram layout.
  • Use Cases: Social media campaigns, classroom visual summaries, lesson slide decks adapted for Instagram, product feature teasers, and quick marketing posts.

Quick Start

Generate a 7-slide export-ready Instagram carousel about [TOPIC] including the Instagram handle @yourhandle, let the skill choose the color palette and background images, and return a self-contained HTML ready for PNG export.

Frequently Asked Questions about content-instagram-carousel

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a swipeable Instagram carousel in HTML?▼

An export-ready Instagram carousel requires a 4:5 aspect ratio at 1080×1350 pixels for PNG export, alongside a logo corner, footer @handle, and a progress bar. This skill enforces these layout dimensions automatically for social media posts.

Can I export HTML slides to PNG for Instagram posts?▼

Yes, you can embed a brand logo using Base64 support directly within the HTML carousel. The skill places the embedded logo in the corner and on the CTA slide, ensuring branding remains visible without relying on external image links.

How do I add background images with mix-blend-mode to an Instagram carousel?▼

This skill handles social media campaigns, classroom visual summaries, lesson slide decks, product feature teasers, and marketing posts. It adapts educational and promotional content into a 7-slide swipeable format optimized for Instagram engagement.

What is the best way to create a 7-slide carousel for marketing?▼

To customize the visual style, the skill applies a configurable color palette across all carousel slides. It automatically selects colors and thematic background images based on your topic, ensuring a consistent design theme throughout the 7-slide deck.

Related Skills

Explore More Design & Creative Skills→
xkevinfernandesxkevinfernandes

cos-course:lesson-5

Create a carousel content generation agent in .claude/agents/ for Instagram slides and captions.

Community
Intermediate
octavehqoctavehq

deck

Generate branded HTML slide decks from Octave GTM data.

Official
Advanced
ArnavPuriArnavPuri
3

image-treatment

Apply CSS and SVG filters, blend modes, and masks to images.

Community
Intermediate
OpenCovenOpenCoven
20

pptx-generator

Generate and edit PPTX presentations and PDF carousels with python-pptx.

Official
Advanced