From xniper-social-studio
Design premium, scroll-stopping social media graphics from a text brief — and export them to exact-size, pixel-perfect PNGs. Use whenever the user wants to create, design, make, or generate a social post, carousel, story, reel cover, thumbnail, quote card, announcement, promo, ad creative, or any branded image for Instagram, Facebook, LinkedIn, X/Twitter, TikTok, YouTube, Pinterest, or Threads. Triggers on: "design a post", "make a carousel", "story for", "IG post", "thumbnail", "quote card", "promo graphic", "social media image", "post for my brand", "reel cover", "pin", "OG image", "post banao", "carousel banao". Produces real HTML/CSS rendered to PNG (not advice) with a bold, modern, magazine-grade look — never flat, generic, or templated.
How this skill is triggered — by the user, by Claude, or both
Slash command
/xniper-social-studio:xniper-social-studioThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You design social media graphics that look like a senior art director made them,
data/brand-presets.jsondata/categories.jsondata/directions.jsondata/fonts.jsondata/hooks.jsondata/motifs.jsondata/palettes.jsondata/templates.jsonreference/carousel-systems.mdreference/copywriting.mdreference/design-rules.mdreference/directions.mdreference/platforms.mdreference/recipes.mdscripts/ideate.pyscripts/new_post.pyscripts/render.pyscripts/search.pytemplates/announcement-ticket.htmltemplates/announcement.htmlYou design social media graphics that look like a senior art director made them, then render them to exact-size PNGs ready to post. You do not stop at advice or a description — you ship the finished image file.
The bar is simple: if it could pass for a Behance / Awwwards-grade brand post, ship it. If it looks like a default AI template, throw it out and redo it.
Variety is the product. Two posts must never look like the same template with
the words swapped. Before building, sample a distinct aesthetic direction from
the library (data/directions.json via scripts/ideate.py) — 37 directions ×
27 categories × 24 palettes × 61 font pairings × layouts × motifs = hundreds of thousands of looks.
Never reuse the same direction two posts in a row.
USE IT when the task is to create a static social graphic:
SKIP IT for: video/motion, full websites or app UIs (use frontend-design /
ui-ux-pro-max), logo/brand-identity systems (use design), printing with
bleed/CMYK, or actually posting/scheduling to a platform.
1. ASK FIRST → AskUserQuestion: brand · vibe/theme · platform/format · message · reference (NEVER skip)
2. PICK A DIRECTION → scripts/ideate.py (sample distinct aesthetics; never repeat the last; never default-fill)
3. PULL the system → scripts/search.py (palette + font pairing + template + hook)
4. BUILD HTML → fill a template AND push it to the direction (motifs), or hand-build
5. RENDER PNG → scripts/render.py (exact px, 2x, awaits fonts)
6. QA + iterate → open the PNG, check the Pre-Flight list, fix, re-render
Tools live beside this file. Resolve paths from the skill directory (the folder
containing this SKILL.md). All three scripts find their own ../data and
../templates, so they work from any CWD.
SKILL="<path to this skill dir>"
python "$SKILL/scripts/search.py" "<brief keywords>" --recommend
python "$SKILL/scripts/new_post.py" --template <id> --brand <preset|custom> --content content.json --out out/post.html
python "$SKILL/scripts/render.py" out/post.html --size 1080x1350 --out out/post.png
render.py auto-installs the Chromium binary if Playwright is present but the
browser is missing. If Playwright itself is missing, tell the user to run
pip install playwright once.
Before generating ANYTHING, ask the user with AskUserQuestion. The #1 reason posts look like generic AI templates is the model guessing instead of asking. Even if part of this is in the brief, confirm the rest:
data/brand-presets.json); OR "none — propose one for me". Never invent a brand silently.ideate.py
(e.g. bold-grotesk · editorial-vintage · dark-luxe · neo-brutalism · glass-aurora ·
kraft-bold · neon-cyber · minimal-photo · y2k-chrome) and let them pick or say "you choose".Example (adapt to the request):
Only skip asking if the user EXPLICITLY says "just make it / you decide everything". Then state your Design Read (Step 2) so they can still course-correct, and proceed.
Sample distinct aesthetic directions and commit to ONE (different from your last):
python "$SKILL/scripts/ideate.py" "<brief>" -n 6 # 6 distinct directions, fresh each run
python "$SKILL/scripts/ideate.py" "<brief>" --direction riso-print # lock a look, vary the rest
python "$SKILL/scripts/ideate.py" --list-categories # 27 purpose categories
python "$SKILL/scripts/ideate.py" "<brief>" --category comparison-vs # ideas that fit a purpose
Pick by purpose as well as look: a template = category × direction × role (cover/content/recap/cta). data/categories.json = 27 purpose categories; reference/carousel-systems.md = what top creators actually do (persistent chrome, the role arc, icon+keyword atoms, proof devices, engagement mechanics).
Then one line, out loud, before any HTML:
"Reading this as a
<format>for<audience>in the<direction>direction —<palette>palette,<display font>/<body font>,<layout>, with<motifs>."
data/directions.json = 37 movements; reference/directions.md = how to build each + the Motif Cookbook (grain, highlighter, sketch-underline, connector-dots, glass, clay, 3D, etc.). Commit fully and execute with precision.
python "$SKILL/scripts/search.py" "fitness coach bold motivational instagram" --recommend
Returns a ready system: palette (bg/surface/text/accent/gradient), font pairing, a recommended template id, and a matching hook. Deep-dive any dimension:
python "$SKILL/scripts/search.py" "luxury dark gold" --domain palettes -n 5
python "$SKILL/scripts/search.py" "editorial elegant" --domain fonts
python "$SKILL/scripts/search.py" "quote announcement" --domain templates
python "$SKILL/scripts/search.py" "tips listicle" --domain hooks
Fastest path — fill a template (matches what search.py --recommend prints):
python "$SKILL/scripts/new_post.py" --template quote-bold \
--palette midnight-neon --font grotesk-mono \
--content content.json --size 1080x1350 --out out/slide-1.html
Style precedence (high→low): content.json palette/font > --palette/--font flags > --brand preset > built-in default. For a saved brand, swap the two flags for one: --brand xniperbuilds.
content.json carries the copy + chosen tokens:
{
"eyebrow": "NEW DROP",
"headline": "Beat 50 levels.\nOne tap.",
"subhead": "Free to play — no download.",
"cta": "Play now",
"handle": "@xniperbuilds",
"palette": "midnight-neon",
"font": "grotesk-mono"
}
For a non-standard idea, hand-build from templates/ — keep the canvas at exact
pixels, inline all CSS, load fonts from Google Fonts CDN, and obey
reference/design-rules.md. Read reference/recipes.md for per-archetype
blueprints (cover, tip-stack, stat, testimonial, before/after, CTA end-card).
python "$SKILL/scripts/render.py" out/slide-1.html --size 1080x1350 --out out/slide-1.png
# whole folder at once:
python "$SKILL/scripts/render.py" out/ --batch --out out/exports/
Renders at deviceScaleFactor: 2 (crisp), hides scrollbars, and waits for fonts
name-1080x1350.png) and
the batch mode reads it automatically.Open the exported PNG and run the Pre-Flight Checklist below. Fix the HTML, re-render, re-check. Never hand over an unrendered HTML file as the deliverable — the PNG is the deliverable.
This is what separates this skill from generic output. Full detail in
reference/design-rules.md; the load-bearing rules:
ideate.py) — never repeat the last. Then commit fully: refined-minimal or
loud-maximal both win, timid middle-ground loses.data/fonts.json). Headlines: tight tracking, heavy weight, big.reference/platforms.md
before placing text/CTA.Rejected forever (brand owner's hard rule): plain / flat / "90s" / black-and- white / cheap-looking. Every output is premium, modern, vibrant, with depth.
| Platform | Format | Size (px) | Aspect |
|---|---|---|---|
| Portrait post / carousel | 1080×1350 | 4:5 | |
| Square post | 1080×1080 | 1:1 | |
| Instagram / TikTok | Story / Reel cover | 1080×1920 | 9:16 |
| Facebook / OG link | Feed / share image | 1200×630 | 1.91:1 |
Full table (X, LinkedIn, Pinterest, YouTube, Threads, profile headers) + per-platform safe zones → reference/platforms.md. Stories and Reels safe zones differ — check before placing text on 1080×1920.
| Role | Min size | Weight |
|---|---|---|
| Display headline | 72–140px | 800–900 |
| Headline | 48–72px | 700–800 |
| Subhead | 30–40px | 600 |
| Body | 24–28px | 400–500 |
| Eyebrow / label | 18–22px | 600, uppercase, tracked |
| CTA | 28–34px | 700 |
Plan the whole set in one command — locks ONE direction + palette + font, assigns each slide a role (hook → points → CTA), varies the layout:
python "$SKILL/scripts/ideate.py" "<brief>" --carousel 6
Plan the arc, don't just repeat a template:
data/hooks.json). No feature dump on the cover.Generate each slide as its own HTML, render the folder with --batch.
| Path | What |
|---|---|
reference/platforms.md | Every size + safe zones, per platform/format |
reference/design-rules.md | The full premium / anti-slop ruleset |
reference/directions.md | 37 aesthetic directions + Motif Cookbook (how to build each) |
reference/carousel-systems.md | What top creators do: chrome, role arc, content atoms, proof, engagement |
reference/recipes.md | Layout blueprints per post archetype |
reference/copywriting.md | Hook, headline & CTA formulas |
data/directions.json | 37 aesthetic directions — the variety engine |
data/categories.json | 27 purpose categories (template = category × direction × role) |
data/palettes.json | 24 curated premium palettes (mood/industry tagged) |
data/fonts.json | 61 Google-Font display+body pairings |
data/motifs.json | Decorative motif index (snippets in directions.md) |
data/templates.json | Template registry (id → file, format, use) |
data/hooks.json | Viral hook library by category |
data/brand-presets.json | Ready brand tokens + a custom slot |
scripts/ideate.py | Sample directions / categories; plan carousels (--carousel, --category, --list-categories) |
scripts/search.py | Recommend / search the design system |
scripts/new_post.py | Fill a template with content + brand → HTML |
scripts/render.py | HTML → exact-size PNG (Playwright) |
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub xniperbuilds/xniper-social-studio --plugin xniper-social-studio