From social-media-creator
Create branded static social media post graphics as HTML rendered to PNG. Use when the user asks to "create a post", "design a social media graphic", "make an Instagram post", "create a Facebook post image", "design a post about...", "new post graphic", or wants a 1080x1080 branded image for social media.
How this skill is triggered — by the user, by Claude, or both
Slash command
/social-media-creator:create-static-postThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create branded 1080x1080px social media post graphics using HTML/CSS rendered to PNG via Playwright headless Chromium.
Create branded 1080x1080px social media post graphics using HTML/CSS rendered to PNG via Playwright headless Chromium.
NEVER use emoji characters or unicode icons in HTML designs. Headless Chromium does not render them. ALWAYS use inline SVG icons instead.
ALL text in the post MUST be clearly readable. No tiny text, no squinting.
| Text Role | Size | Weight | Color |
|---|---|---|---|
| Title / h1 | 48–56px | 900 | #ffffff |
| Subtitle | 24–28px | 600 | rgba(255,255,255,0.8) |
| Body / Detail text | 22–26px | 600 | rgba(255,255,255,0.85) |
| Card text / descriptions | 20–24px | 500–600 | rgba(255,255,255,0.8) |
| Labels / Tags | 18–20px | 600–700 | rgba(255,255,255,0.75) |
| Badge text | 15–16px | 700 | #ffffff |
HARD RULES:
Each post uses a unique accent color. Common combinations:
Every icon must be an inline SVG wrapped in a styled container:
<div style="width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#10b981,#059669);display:flex;align-items:center;justify-content:center;">
<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" style="width:28px;height:28px;">
<!-- SVG path here -->
</svg>
</div>
Read references/html-template.md for the complete HTML template structure.
npm install playwright && npx playwright install chromiumimport { chromium } from "playwright";
const browser = await chromium.launch();
const page = await browser.newPage();
await page.setViewportSize({ width: 1080, height: 1080 });
await page.goto(`file://${htmlFilePath}`, { waitUntil: "networkidle" });
await page.screenshot({ path: outputPng, type: "png" });
await browser.close();
Always generate accompanying post text with:
Platform-specific versions:
Every post MUST be organized into its own folder inside the outputs directory, named by content topic (NOT by post number).
outputs/
dont-sell-your-time/
dont-sell-your-time.html
dont-sell-your-time.png
dont-sell-your-time-captions.md
value-ladder-strategy/
value-ladder-strategy.html
value-ladder-strategy.png
value-ladder-strategy-captions.md
Folder and file naming: Use kebab-case descriptive topic slugs (e.g., dont-sell-your-time, hormozi-money-models). NEVER use generic names like post15 or post_16.
At the beginning of each new post creation:
mkdir -p outputs/{slug}/npx claudepluginhub michalvarys/claude-plugins --plugin social-media-creatorGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.