# Render Carousels

> Render multi-slide carousels from HTML templates via Playwright. Use when: producing carousel posts.

- **Type:** Skill
- **Install:** `agentstack add skill-indranilbanerjee-socialforge-render-carousels`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [indranilbanerjee](https://agentstack.voostack.com/s/indranilbanerjee)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [indranilbanerjee](https://github.com/indranilbanerjee)
- **Source:** https://github.com/indranilbanerjee/socialforge/tree/main/skills/render-carousels
- **Website:** https://indranil.in

## Install

```sh
agentstack add skill-indranilbanerjee-socialforge-render-carousels
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# /socialforge:render-carousels — Carousel Renderer

Produce multi-slide carousel images from HTML/CSS templates using Playwright headless rendering.

## Supported Templates

| Template | Slides | Best For |
|----------|--------|----------|
| generic-8slide | 8 | General purpose |
| comparison-10slide | 10 | Feature comparisons |
| case-study-10slide | 10 | Client success stories |
| tips-5slide | 5 | Quick tips |
| playbook-8slide | 8 | Step-by-step playbooks |
| recap-6slide | 6 | Event/month recaps |
| data-infographic-6slide | 6 | Data-driven infographics |
| quote-card-single | 1 | Single quote cards |

## 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
- Last slide = CTA with brand logo and contact info
- Max text per slide: 40 words (LinkedIn) | 25 words (Instagram)
- All slides use brand fonts and colors from brand-config.json
- Slide dimensions: 1080x1080 default (configurable per brand)

## Scripts Used
- render_carousel.py — Playwright HTML→PNG rendering

## Timeout & Fallback
- Per-slide render: 15-second timeout. If Playwright hangs, retry without custom fonts.
- Full carousel: 3-minute timeout for 10 slides.
- If Playwright unavailable: flag for manual rendering, save populated HTML for export.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [indranilbanerjee](https://github.com/indranilbanerjee)
- **Source:** [indranilbanerjee/socialforge](https://github.com/indranilbanerjee/socialforge)
- **License:** MIT
- **Homepage:** https://indranil.in

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-indranilbanerjee-socialforge-render-carousels
- Seller: https://agentstack.voostack.com/s/indranilbanerjee
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.