render-carousels
starsforks
How to install render-carousels?
indranilbanerjee/socialforge/render-carousels
$npx -y skills add indranilbanerjee/socialforge --skill render-carouselsRender multi-slide carousels from HTML templates via Playwright. Use when: producing carousel posts.
SKILL.md
| 1 | # /socialforge:render-carousels — Carousel Renderer |
| 2 | |
| 3 | Produce multi-slide carousel images from HTML/CSS templates using Playwright headless rendering. |
| 4 | |
| 5 | ## Supported Templates |
| 6 | |
| 7 | | Template | Slides | Best For | |
| 8 | |----------|--------|----------| |
| 9 | | generic-8slide | 8 | General purpose | |
| 10 | | comparison-10slide | 10 | Feature comparisons | |
| 11 | | case-study-10slide | 10 | Client success stories | |
| 12 | | tips-5slide | 5 | Quick tips | |
| 13 | | playbook-8slide | 8 | Step-by-step playbooks | |
| 14 | | recap-6slide | 6 | Event/month recaps | |
| 15 | | data-infographic-6slide | 6 | Data-driven infographics | |
| 16 | | quote-card-single | 1 | Single quote cards | |
| 17 | |
| 18 | ## Process |
| 19 | |
| 20 | 1. Select template based on post's `carousel_type` |
| 21 | 2. For each slide: |
| 22 | - Inject content (title, body, data points, statistics) |
| 23 | - Apply brand colors via CSS variables (--brand-primary, --brand-secondary, etc.) |
| 24 | - Apply brand fonts |
| 25 | - If slide needs background image: generate or compose via image-compositor |
| 26 | 3. Render each slide via Playwright (headless Chromium → PNG, 1080x1080) |
| 27 | 4. Show first and last slide to user for approval |
| 28 | 5. Compile all slides into PDF (for LinkedIn document upload) |
| 29 | 6. Resize slides for other platforms if needed |
| 30 | |
| 31 | ## Rules |
| 32 | - First slide = hook/title with brand identity |
| 33 | - Last slide = CTA with brand logo and contact info |
| 34 | - Max text per slide: 40 words (LinkedIn) | 25 words (Instagram) |
| 35 | - All slides use brand fonts and colors from brand-config.json |
| 36 | - Slide dimensions: 1080x1080 default (configurable per brand) |
| 37 | |
| 38 | ## Scripts Used |
| 39 | - render_carousel.py — Playwright HTML→PNG rendering |
| 40 | |
| 41 | ## Timeout & Fallback |
| 42 | - Per-slide render: 15-second timeout. If Playwright hangs, retry without custom fonts. |
| 43 | - Full carousel: 3-minute timeout for 10 slides. |
| 44 | - If Playwright unavailable: flag for manual rendering, save populated HTML for export. |
People who liked this also viewed
6 picksType
- seo-auditWhen the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tagSkillsJul 2026
- copywritingWhen the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user sSkillsJul 2026
- marketing-psychologyWhen the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental models,' 'cognitive bias,' 'persuasion,'SkillsJul 2026
- content-strategyWhen the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "conSkillsJul 2026
- programmatic-seoWhen the user wants to create SEO-driven pages at scale using templates and data. Also use when the user mentions "programmatic SEO," "template pages," "pages at scale," "directory pages," "location pSkillsJul 2026
- marketing-ideasWhen the user needs marketing ideas, inspiration, or strategies for their SaaS or software product. Also use when the user asks for 'marketing ideas,' 'growth ideas,' 'how to market,' 'marketing stratSkillsJul 2026
