skills.rest
junainfinity
junainfinityCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

social-carousel

Generate a 3-panel social carousel with HTML/CSS output.

Updated Aug 23, 2026
Search Tags:#typography#branding#layout#design-system#social-media#carousel#web-graphics
One-click install
npx skills add https://github.com/junainfinity/osmDesign --skill social-carousel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: social-carousel
Source: https://github.com/junainfinity/osmDesign/tree/main/skills/social-carousel
Command: npx skills add https://github.com/junainfinity/osmDesign --skill social-carousel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the creation of cohesive, multi-panel social carousels that maintain brand consistency across panels and platforms.

Core Features & Use Cases

  • Three-panel layout that produces a sequential 1080×1080 carousel where panels connect narratively.
  • Branding and typography enforcement through a design system with color, typography, layout, and components sections.
  • Output readiness for posting on Instagram, LinkedIn, or X with ready-to-use HTML/CSS assets.

Quick Start

Create a 3-card social carousel HTML output that matches the included 1080×1080 design specs and branding guidelines.

Frequently Asked Questions about social-carousel

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

FAQPage Schema
How do I create a cohesive multi-panel social carousel for Instagram?▼

You can generate a cohesive 3-panel social carousel by using a frontmatter-driven template that enforces design system sections, applying consistent typography, color, and captions across all 1080×1080 panels.

How does a design system enforce branding across social media carousel panels?▼

The design system enforces branding by applying frontmatter-defined rules for color, typography, and layout, ensuring every 1080×1080 carousel panel maintains visual consistency and narrative connection.

Can I generate ready-to-use HTML and CSS output for LinkedIn carousel posts?▼

Yes, this skill outputs ready-to-use HTML and CSS assets formatted for LinkedIn, applying the 1080×1080 design specifications and branding guidelines to produce immediate deployment code.

What is the best way to format a 3-panel carousel for X and LinkedIn?▼

The best way to format a 3-panel carousel for X and LinkedIn is using a structured 1080×1080 sequential layout that connects panels narratively while generating ready-to-use HTML/CSS output.

Do I need to define brand colors and typography before generating web graphics?▼

Yes, you must define brand colors and typography upfront. The skill relies on a frontmatter-driven template containing dedicated design system sections to enforce consistent visual identity across all carousel panels.

Related Skills

Explore More Design & Creative Skills→
Typeless-GitTypeless-Git
1

linkedin-carousel

Automate LinkedIn carousel creation from narrative input to ready-to-upload PDF.

Official
Intermediate
Clos01Clos01
3

social-carousel

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

Community
Intermediate
chriswesttchriswestt

frontend-theme

Apply design tokens, typography, and layout rules to frontend outputs.

Community
Advanced
gajjalaashok75-UIgajjalaashok75-UI
2

magic-animator

Transform static design assets into animated Lottie, GIF, or MP4 motion graphics.

Community
Intermediate