skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

social-carousel

Generate a three-card 1080×1080 HTML carousel with connected headlines and DESIGN.md typography.

1|Updated Jul 9, 2026
Search Tags:#html generation#linkedin#instagram#marketing design#social-carousel#typography tokens#cinematic layout
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill social-carousel-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: social-carousel
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/runtime/skills/design/social-carousel
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill social-carousel-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Turns a request for an Instagram/LinkedIn/X carousel into a ready-to-post, on-brand 3-panel graphic layout with a connected narrative across cards.

Core Features & Use Cases

  • 1080×1080 three-card series output: Produces a single HTML document containing three 1:1 panels designed to read independently or as a sequence.
  • Cinematic, brand-consistent styling: Applies typography rules from the active DESIGN.md (serif for headline lockups, mono for stamps/counters) and uses distinct color stories per card without images.
  • Series structure and loop affordance: Includes brand wordmark, card indexing (01/03), looping stamp, and bottom caption text that forms a cohesive stacked sentence.
  • Use cases: Requests for “carousel post”, “Instagram carousel”, “LinkedIn series”, “X thread cards”, and “三连发/轮播图” where each panel must be readable alone yet connected as a set.

Quick Start

Ask for a three-card cinematic social carousel using the connected headlines “onwards.” “to the next one.” “looking ahead.” for a 1080×1080 dark stage post suitable for Instagram or LinkedIn.

Frequently Asked Questions about social-carousel

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

FAQPage Schema
How do I generate a 1080x1080 Instagram carousel post with connected headlines?▼

To generate an Instagram carousel, provide a prompt with your desired connected headlines. The output is a self-contained HTML document containing three 1:1 cinematic panels with brand-consistent typography and looping affordances.

What is a cinematic three-card social media series and when should I use it?▼

A cinematic three-card social media series is a sequence of three 1:1 graphic panels designed to read independently or as a connected narrative set. Use this format for Instagram carousels, LinkedIn series posts, and X thread cards.

Can I use this to create X thread cards and LinkedIn series posts?▼

Yes, you can use this to create X thread cards and LinkedIn series posts. It produces 1080×1080 three-card series outputs suitable for Instagram, LinkedIn, and X, with each panel readable alone yet connected as a set.

How do carousel layouts handle brand typography and color stories without images?▼

Carousel layouts handle brand typography by applying rules from the active DESIGN.md, using serif for headline lockups and mono for stamps. They use distinct color stories per card to create cinematic layouts without requiring images.

Do I need to provide images to generate a three-panel marketing carousel?▼

No, you do not need to provide images to generate a three-panel marketing carousel. The layout applies distinct color stories per card and uses typography tokens to produce a self-contained HTML artifact without any image dependencies.

Related Skills

Explore More Marketing & Sales Skills→
az9713az9713

social-carousel

Generate a three-panel 1080x1080 social carousel as a self-contained HTML artifact.

Community
Intermediate
Clos01Clos01
3

social-carousel

Generate three connected 1080×1080 social media carousel panels with narrative headlines and HTML output.

Community
Intermediate
nexu-ionexu-io
84.7k

social-carousel

Generate a three-panel social carousel as a single HTML document with inline CSS.

Official
Intermediate
joshua3403joshua3403

phase-3-mockup

Generate structured HTML/CSS/JS prototypes from user prompts.

Community
Basic