social-carousel

Generates a three-card 1080×1080 social media carousel as a single self-contained HTML document.

Updated May 20, 2026
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill social-carousel-keimoshi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: social-carousel
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/social-carousel
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill social-carousel-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing a cohesive multi-card social carousel requires consistent branding, connected headlines, and platform-ready square layouts, which is slow to produce by hand. This Skill generates a complete three-panel carousel as a single HTML file with inline CSS, ready to preview or adapt for Instagram, LinkedIn, or X. ## Core Features & Use Cases - Three connected 1080×1080 cards: Each square panel works standalone but reads as one sentence across the series (e.g., "onwards." → "to the next one." → "looking ahead."). - Cinematic gradient scenes: Card backgrounds are built purely from layered CSS radial and linear gradients — no image assets required — with distinct color stories per panel. - Brand and metadata elements: Each card includes a serif brand wordmark chip, a mono index counter (01/03), a display headline lockup, a caption strip, and a "1× LOOP" stamp. - Use Case: A marketer needs a three-post Instagram carousel announcing a product launch; the Skill emits one HTML artifact with three on-brand square cards that stack responsively on narrow screens. ## Quick Start Ask the AI to design a 3-card cinematic social carousel with the headlines "onwards.", "to the next one.", and "looking ahead." as 1080×1080 squares ready for Instagram.

Frequently Asked Questions about social-carousel

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

FAQPage Schema
How do I create an Instagram carousel with HTML and CSS?

Use this Skill to generate a single HTML file containing three 1080×1080 square cards laid out in a row. Each card uses aspect-ratio 1/1, gradient backgrounds, and inline CSS, so the output can be screenshotted or adapted for Instagram, LinkedIn, or X.

What size should social media carousel cards be?

The cards are designed as 1080×1080 pixel squares, the standard for Instagram and LinkedIn carousel posts. In the HTML preview they render at clamp(280px, 30vw, 380px) and stack vertically on viewports narrower than about 1100px.

Does the carousel use images or external assets?

No images are used. Each card's cinematic background is built entirely from layered CSS radial-gradient and linear-gradient declarations, with clip-path figure silhouettes, so the output is a single self-contained HTML file.

Can I customize the headlines and brand name in the carousel?

Yes. The three headlines should read as one sentence when stacked, and the brand wordmark, index counters, captions, and loop stamps are all plain HTML text you can edit directly in the generated file.

What fonts does the carousel design require?

The example uses Instrument Serif for display headlines and IBM Plex Mono for stamps and captions, loaded from Google Fonts. Fallback stacks (Georgia, ui-monospace) are declared so the layout still renders if the fonts fail to load.