render-carousels

Solid

Render multi-slide carousels from HTML templates via Playwright — slide content injected, brand styling applied, assembled to platform-ready images or PDF. Triggers on "/render-carousels", "render the carousel", "carousel for P04", "build the slides", "multi-slide post", "carousel from this outline", or any calendar post whose content_type is carousel. Local rendering, no API cost.

AI & Automation 38 stars 6 forks Updated 3 weeks ago MIT

Install

View on GitHub

Quality Score: 86/100

Stars 20%
53
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# /socialforge:render-carousels — Carousel Renderer Produce multi-slide carousel images from HTML/CSS templates using Playwright headless rendering. ## Supported Templates Pass the key to `render_carousel.py --template` (argparse rejects anything outside this list; `--list-templates` prints it). | Key | Slides | Best For | Template File | |-----|--------|----------|---------------| | generic | 8 | General purpose | generic-8slide.html | | comparison | 10 | Feature comparisons | comparison-10slide.html | | case-study | 10 | Client success stories | case-study-10slide.html | | tips | 5 | Quick tips | tips-5slide.html | | playbook | 8 | Step-by-step playbooks | playbook-8slide.html | | recap | 6 | Event/month recaps | recap-6slide.html | | data | 6 | Data-driven infographics | data-infographic-6slide.html | | quote | 1 | Single quote cards | quote-card-single.html | ## Process 1. Select template based on post's `carousel_type` 2. For each slide: - Inject content (title, body, data points, statistics) - Apply brand colors via CSS variables (--brand-primary, --brand-secondary, etc.) - Apply brand fonts - If slide needs background image: generate or compose via image-compositor 3. Render each slide via Playwright (headless Chromium → PNG, 1080x1080) 4. Show first and last slide to user for approval 5. Compile all slides into PDF (for LinkedIn document upload) 6. Resize slides for other platforms if needed ## Rules - First slide = hook/title with brand identity - ...

Details

Author
indranilbanerjee
Repository
indranilbanerjee/socialforge
Created
5 months ago
Last Updated
3 weeks ago
Language
Python
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Data & Documents Listed

render-carousels

Render multi-slide carousels from HTML templates via Playwright — slide content injected, brand styling applied, assembled to platform-ready images or PDF. Triggers on "/render-carousels", "render the carousel", "carousel for P04", "build the slides", "multi-slide post", "carousel from this outline", or any calendar post whose content_type is carousel. Local rendering, no API cost.

0 Updated 3 weeks ago
teachskillofskills-ai
AI & Automation Listed

content-to-carousel

Turn any piece of content into a polished, on-brand Instagram carousel (1080x1350 slides + caption + hashtags + alt text), rendered locally with the carousel engine. Inputs can be a YouTube video URL, a news article or blog URL, or pasted text/a link. Use this whenever the user wants to make an Instagram carousel, repurpose a video or article into slides, create a "swipe" post, turn a link or transcript into slides, or produce social slides from content, even if they just paste a URL and say "make a carousel" or "turn this into slides". It self-onboards a new brand if no brand pack exists, adapts to a reference carousel style the user provides, and uses AI illustration only where a slide is conceptual and has no real asset. Always prefer this skill over hand-rolling slide images.

2 Updated 1 months ago
lfsadigital
Web & Frontend Listed

design-carousel-slide

Generate a LinkedIn / Instagram multi-slide carousel — single HTML file with N square 1080×1080 .canvas divs, each representing one slide. Default N=5 (cover + 3 content + closing CTA). Cover and closing always use the brand's most distinctive treatments; middle slides are content-led. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "carousel for X", "linkedin carousel", "instagram carousel", "carousel slides", "/carousel-slide".

3 Updated 3 weeks ago
slogsdon