Design System
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
Generate world-class Instagram carousel content on any topic.
$ npx skills add happycapy-ai/Happycapy-skills --skill world-class-carousel -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install happycapy-ai/Happycapy-skills world-class-carousel --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/happycapy-ai/Happycapy-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/world-class-carousel .claude/skills/world-class-carousel && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "world-class-carousel" agent skill from https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/world-class-carousel into .claude/skills/world-class-carousel/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "world-class-carousel", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/world-class-carouselType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add happycapy-ai/Happycapy-skills --skill world-class-carousel -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install happycapy-ai/Happycapy-skills world-class-carousel --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/happycapy-ai/Happycapy-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/world-class-carousel .agents/skills/world-class-carousel && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "world-class-carousel" agent skill from https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/world-class-carousel into .agents/skills/world-class-carousel/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "world-class-carousel", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add happycapy-ai/Happycapy-skills --skill world-class-carousel -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install happycapy-ai/Happycapy-skills world-class-carousel --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/happycapy-ai/Happycapy-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/world-class-carousel .cursor/skills/world-class-carousel && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "world-class-carousel" agent skill from https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/world-class-carousel into .cursor/skills/world-class-carousel/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "world-class-carousel", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/happycapy-ai/Happycapy-skills.git --path skills/world-class-carousel--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add happycapy-ai/Happycapy-skills --skill world-class-carousel -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install happycapy-ai/Happycapy-skills world-class-carousel --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/happycapy-ai/Happycapy-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/world-class-carousel .gemini/skills/world-class-carousel && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "world-class-carousel" agent skill from https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/world-class-carousel into .gemini/skills/world-class-carousel/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "world-class-carousel", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install happycapy-ai/Happycapy-skills world-class-carouselInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add happycapy-ai/Happycapy-skills --skill world-class-carousel -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/happycapy-ai/Happycapy-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/world-class-carousel .github/skills/world-class-carousel && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "world-class-carousel" agent skill from https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/world-class-carousel into .github/skills/world-class-carousel/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "world-class-carousel", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add happycapy-ai/Happycapy-skills --skill world-class-carousel -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install happycapy-ai/Happycapy-skills world-class-carousel --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/happycapy-ai/Happycapy-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/world-class-carousel .opencode/skills/world-class-carousel && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "world-class-carousel" agent skill from https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/world-class-carousel into .opencode/skills/world-class-carousel/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "world-class-carousel", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
world-class-carouselGenerate world-class Instagram carousel content on any topic.
World Class Carousel is an agent skill from happycapy-ai/Happycapy-skills. Generate world-class Instagram carousel content on any topic. Produces 7-10 publication-ready slides (1080x1350) with AI-generated visuals, precise typography, Instagram music recommendations, optimized captions, and hashtags. Uses Aristotelian first-principles framework with 7 content archetypes, 6 hook patterns, a mandatory Bullshit Test quality gate, and a comprehensive design system. Fully generalized -- works for ANY topic. Triggers: instagram carousel, create carousel, carousel post, make carousel slides…
Its SKILL.md is about 16k tokens, which your agent loads only when the skill is triggered. The skill folder holds 62 other files, including scripts and reference files (for example `CATEGORIES.md`, `KNOWN_ISSUES.md` and `README.md`).
It sits in Documents & Office, covering Slides and decks, Quality gates and Design systems. It works with Instagram. The repository describes itself as: A curated collection of high-quality Claude Code skills to enhance your development workflow. The licence is MIT.
12 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 9ff72fe. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
BashReadEditWriteGlobGrepWebFetchFrom allowed-tools in the SKILL.md frontmatter.
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
python3pipFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
live.staticflickr.comai-gateway.happycapy.aitrickle.soFrom URLs in SKILL.md, links to its own repository left out.
Names these keys or tokens, usually read from environment variables:
AI_GATEWAY_API_KEYGEMINI_API_KEYAPI_KEYFrom names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
World Class Carousel loads about 16k tokens when it runs, and up to ~18k if it reads all its reference files. Until then it costs about 154 tokens; SKILL.md has 6,079 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check noted patterns worth knowing about, such as sudo or a known installer.
allowed-tools: Bash, Read, Edit, Write, Glob, Grep, WebFetchAutomated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from happycapy-ai/Happycapy-skills at commit 9ff72fe, republished under its MIT licence (© happycapy-ai). 6,079 words, ~15,706 tokens.
.claude/skills/world-class-carousel/SKILL.md (or your agent's skills folder). This skill also uses 58 other files; get the full folder from GitHub.Generate Instagram carousels that are genuinely world-class: content people save, share, and come back to. Not engagement bait. Not AI slop. Actual value, delivered through precise visual design and narrative structure.
This skill is fully generalized. It contains FORM (structure, principles, patterns), not MATTER (specific topics). The user provides the matter (topic); the skill provides the form (archetypes, design system, music matrix, quality gates). Together they produce the carousel. Nothing is hardcoded.
KNOWN_ISSUES.mdBefore generating ANY carousel, read /home/node/.claude/skills/world-class-carousel/KNOWN_ISSUES.md. It contains compressed rules from all previous sessions -- data format gotchas, sizing rules, visual strategy decisions, and quality gates. Ignoring it means repeating solved mistakes.
When the user requests a carousel, execute these 6 phases in order (Phase 6 runs post-delivery):
Analyze the topic and auto-select the renderer theme:
| Content Vertical | Keywords/Signals | Renderer Theme | Background Style |
|---|---|---|---|
| Tech / AI / Coding | AI, code, developer, API, tools, stack, programming, SaaS, data | dark | gradient (default) |
| Business / Strategy | growth, revenue, startup, founder, marketing, sales, strategy, scale | earth | gradient |
| Education / How-To | learn, tutorial, guide, roadmap, beginner, master, course, how to | clean | gradient |
| Creative / Design | design, UX, brand, visual, aesthetic, portfolio, creative | dark | gradient_mesh |
| Mindset / Philosophy | mindset, habits, productivity, stoic, growth, mental, philosophy | warm | gradient |
If the user specifies a brand config with a theme, always use that instead.
Each category has unique visual DNA derived from psychology axioms (Cialdini, cognitive load theory, dual coding, serial position effect). Select based on topic:
| If the topic is about... | Category | Arc Shape | Hook Style | Primary Cialdini |
|---|---|---|---|---|
| Explaining a research paper | paper_decoder | Revelatory | Face + paper panel | Authority |
| Comparing AI tools/models | tool_showdown | Divergent | Multi-screenshot face-off | Social Proof |
| Today's AI development | breaking_news | Convergent | News-editorial face | Scarcity |
| Step-by-step AI tool how-to | tool_tutorial | Linear | Phone-in-hand / device mockup | Reciprocity |
| Controversial opinion | hot_take | Confrontational | Bold abstract typography | Authority |
| Copy-paste prompts/templates | prompt_playbook | Divergent | Phone screenshot mockup | Reciprocity |
| Complete sector overview | industry_map | Divergent | Multi-person face-off | Authority |
| Build [X] with AI project | build_this | Linear+Reveal | Multi-device result showcase | Social Proof |
| Funding/business news | founders_money | Convergent | Founder portrait + data | Scarcity |
| Future predictions/timeline | future_scenario | Revelatory | Abstract cinematic AI imagery | Scarcity |
Universal Psychology Rules (apply to ALL categories):
Category-to-Slide-Sequence Quick Reference:
paper_decoder (9 slides): hook → body → diagram → body → body → diagram → body → synthesis → ctatool_showdown (8 slides): hook → body → comparison → body → body → comparison → synthesis → ctabreaking_news (8 slides): hook → body → body → body → diagram → body → synthesis → ctatool_tutorial (8 slides): hook → body → tool → tool → tool → body → synthesis → ctahot_take (7 slides): hook → body → body → body → body → synthesis → cta (text-driven, no diagrams)prompt_playbook (9 slides): hook → body → body → body → comparison → body → body → synthesis → ctaindustry_map (9 slides): hook → diagram → body → body → body → comparison → diagram → synthesis → ctabuild_this (8 slides): hook → body → tool → tool → tool → body → synthesis → ctafounders_money (7 slides): hook → body → body → body → diagram → synthesis → ctafuture_scenario (8 slides): hook → body → body → diagram → body → body → synthesis → ctaMap each archetype role to a renderer slide type when building the carousel spec:
| Archetype Role | Renderer Slide Type | Notes |
|---|---|---|
hook | hook | Use title + title_highlight for split title effect |
intro, context, reveal, before | body | Use title_highlight for the key phrase |
step, component, layer, shift, evidence, action | body | Use bullets for key points |
item | body | Use title_highlight for the item name, bullets for details |
diagram, connection | diagram | Use diagram_nodes with vertical or horizontal layout |
contrast, reframe | comparison | Use columns with opposing views |
result, after, lesson, implication | body | Use title highlight to emphasize the key outcome |
synthesis | synthesis | Use points[] for numbered key takeaways |
cta | cta | Use handle, cta_text, optional stats[] |
bonus, pitfalls, prediction | body | Use bullets for listed points |
Before writing any content, decide the visual strategy for this carousel. You have access to multiple tools -- choose the right ones for the topic.
| Tool | What It Does | When to Use | How to Invoke |
|---|---|---|---|
| AI Cinematic Images | HD photorealistic/artistic images (Gemini 3 Pro) | Hook/CTA backgrounds, emotional priming, conceptual anchoring | generate-image skill with hyper-detailed prompt (50+ words) |
| AI Flowcharts/Diagrams | Production-quality flowcharts with text labels, arrows, boxes | Process flows, pipelines, decision trees -- REPLACES TikZ for better visuals | generate-image skill with structural prompt describing boxes + connections |
| AI Architecture Diagrams | Blueprint-style system diagrams with components and connections | Microservices, tech stacks, system design | generate-image skill with component/connection prompt |
| AI Infographics/Charts | Bar charts, data visualizations with accurate labels and proportions | Market data, statistics, comparisons | generate-image skill with data + style description |
| AI Abstract Backgrounds | Neural networks, geometric patterns, cosmic visuals | Slide backgrounds via ai_bg | generate-image skill with atmosphere/material prompt |
| TikZ Diagrams | Vector flowcharts in LaTeX (basic but reliable) | Simple 3-5 node flows where AI image gen is overkill | Use diagram slide type with diagram_nodes |
| Gradient Backgrounds | TikZ-rendered gradient fills with geometric accents | Default for all text-only slides | Set bg_style: "gradient" in slide data |
This rule was established through controlled A/B experiments (7 strategies, same content, scored 1-10). It overrides gut instinct:
| Slide Type | Visual Strategy | WHY (Experimental Evidence) |
|---|---|---|
| Hook | ai_bg full-bleed + 0.60-0.68 overlay | Scroll-stopping power. First slide = 80% of engagement. Score: 8.0/10 |
| Body | TEXT-ONLY. No images. | Images on body slides destroy 40% of content space. Text-only scored 8.3/10 vs 5.7/10 with images |
| Diagram | AI-generated diagram as ai_bg (preferred) OR TikZ fallback | Gemini 3 Pro generates production-quality flowcharts with readable labels, arrows, and boxes. Far more visually striking than basic TikZ. Use ai_bg + 0.55-0.65 overlay so text remains readable over the diagram. |
| Synthesis | Text-only | Save-worthy reference material. Images would reduce information density. |
| CTA | ai_bg full-bleed + 0.65-0.70 overlay | Emotional close with visual punch. |
DO NOT put AI images on body slides. This was the single biggest quality mistake found in testing. DO NOT use browser screenshots on any slides. They always look terrible embedded in carousel slides.
For each topic, determine the primary visual mode, background style, and which slide-level visuals to use:
| Topic Type | Background Style | Hook Visual | Body Visuals | Diagram Strategy | Example |
|---|---|---|---|---|---|
| Philosophy / Mindset | gradient | AI image: symbolic figure | None (text carries weight) | AI-generated concept map | Stoic principles: marble bust + storm |
| Tool Review / SaaS | gradient or gradient_mesh | AI image: abstract tech glow | None (text-only bullets describe tools) | AI-generated comparison chart | "6 AI Tools": text descriptions + AI chart |
| News / Current Events | gradient | AI image: dramatic scene | None (text with citations) | AI-generated timeline or power map | "AI War 2025": cinematic + AI power map |
| Technical Tutorial | gradient (clean) | AI image: conceptual diagram | None (step-by-step text) | AI-generated architecture/flowchart | "Deploy with Docker": AI architecture diagram |
| Business / Strategy | gradient | AI image: bold abstract | None (text with real data citations) | AI-generated bar chart or funnel | "Growth Hacking": AI infographic |
| Comparison / Versus | gradient_mesh | AI image: abstract contrast | comparison slide type columns | AI-generated side-by-side chart | "React vs Vue": comparison columns + AI chart |
| Creative / Design | gradient_mesh (dark) | AI image: artistic/gallery quality | None (text-only) | AI-generated process flow | "UX Trends 2025": artistic + AI flow |
| Framework / Mental Model | gradient | AI image: system metaphor | None (text explains components) | AI-generated flowchart (preferred over TikZ) | "OODA Loop": AI flowchart as ai_bg |
| Data / Research | gradient | AI image: data visualization concept | None (text with specific numbers) | AI-generated bar chart / infographic | "AI Market 2025": AI bar chart |
Model & Routing:
generate-image skill (uses AI_GATEWAY_API_KEY). Nano-banana-pro requires GEMINI_API_KEY (often unset) but uses the same underlying model.google/gemini-3-pro-image-preview (primary). Fallback: google/gemini-3.1-flash-image-preview.Gemini 3 Pro Proven Capabilities (Experimentally Verified):
| Capability | Quality | Best Use in Carousels | Prompt Strategy |
|---|---|---|---|
| Cinematic portraits | Excellent | Hook/CTA backgrounds | 50+ words: materials, lighting, composition, colors, atmosphere |
| Multi-image composition | Excellent (avg 9.6/10) | Hook slides with real faces + screenshots | Aristotelian axioms below. Send base64 to /api/v1/images/generations |
| Screenshot → device mockup | Excellent | Tool showcase, product launch slides | "floating laptop/phone mockup, dark studio, reflective surface" |
| Person + screenshot editorial | Excellent | News hooks with evidence | "person as SUBJECT, screenshot as floating holographic EVIDENCE panel" |
| Multi-screenshot dashboard | Excellent | Comparison/versus slides | "floating panels at varied depths, color-coded edge glows, grid floor" |
| Flowcharts | Excellent | Diagram slides as ai_bg | Describe boxes, arrows, labels, and connections structurally |
| Abstract backgrounds | Excellent | Any slide background | Materials, colors, atmosphere, "no text no words" |
These irreducible premises govern ALL multi-image prompts. Every prompt must satisfy all 7:
A1: VISUAL HIERARCHY -- Eye processes: faces > contrast edges > text > color fields. Composition must respect this order. A2: INPUT TYPE DETERMINES ROLE -- Each input has exactly one role:
A3: UNIFIED LIGHT SOURCE -- All elements share one dominant light direction. Mixed lighting = instant "fake" detection. A4: DEPTH CREATES DRAMA -- Foreground sharp (subject), midground recessed (screenshots), background soft (atmosphere). 3 layers minimum. A5: NEGATIVE SPACE IS FUNCTIONAL -- Bottom 30-35% dark for text overlay. Not waste -- it's where the headline goes. A6: COLOR TEMPERATURE = STORY -- Cool blue/teal = innovation. Warm red = urgency. Split red/blue = competition. Mono + accent = editorial. A7: NO-TEXT SEAL -- Always end with "absolutely no text, no words, no letters, no watermarks" (outside screenshots).
Person + News Screenshot (9.5/10): "Image 1 is [person] -- preserve face, place in left 60%, dramatic side lighting. Image 2 is screenshot -- float as glowing translucent panel, tilted 8 degrees, recessed behind subject, cyan edge glow. Dark moody background, cinematic depth of field. Bottom 30% dark. No text outside screenshot."
Tool Screenshot Showcase (9/10): "Place screenshot on sleek floating laptop mockup angled 15 degrees. Dark gradient background, ambient teal glow from screen. Glossy reflective surface below. Premium Apple product launch aesthetic. No text outside screenshot."
Multi-Screenshot Dashboard (9.5/10): "Arrange as glowing panels floating in dark space, varied depths and angles (5-15 degrees). Largest centered. Color-coded edge glows. Grid floor, particle effects. Digital command center aesthetic. No text outside screenshots."
Person + Screenshots + Logo (10/10): "Person as dominant subject center-left, face preserved. Screenshots as holographic panels around them. Logo small in upper corner with glow. Volumetric light rays, 3-layer depth. No text outside screenshots/logo."
Face-Off + Data (10/10): "Person A on LEFT in profile facing right, red lighting. Person B on RIGHT facing left, blue lighting. Dashboard between them as floating holographic display. Smoke and sparks in the gap. Competitive energy. No text outside screenshot."
Phone in Hand (10/10): "Screenshot on smartphone held in hand from lower-right. Dark background, soft bokeh lights. Screen bright and crisp. Lifestyle photography style. No text outside screenshot."
5-Image Mega (10/10): "2 people (main foreground, secondary recessed) + 2 screenshots (holographic panels, color-coded glows) + logo (corner). Volumetric light, split lighting, multiple depth layers. No text outside screenshots/logo."
Prompt Rules:
Set bg_style in the carousel spec or per-slide data to control the look:
bg_style Value | Visual Result | Best For |
|---|---|---|
"gradient" (default) | Top-to-bottom gradient with subtle accent glow | All themes. Clean, modern, professional |
"texture" | AI-generated paper/fabric texture | AVOID -- produces grey rock look |
"gradient_mesh" | Multi-stop gradient with geometric accent shapes | Creative, premium, high-contrast |
"solid" | Flat theme background color | Clean/education themes, data-heavy content |
| (AI background) | Full-bleed AI image with overlay | Dramatic hooks, artistic carousels |
Set it at the spec level for all slides: "bg_style": "gradient" in the spec JSON.
Or per-slide for variation: "data": {"bg_style": "gradient_mesh", ...} on specific slides.
DO NOT use browser screenshots on carousel slides. They consistently look terrible -- low resolution, poorly framed, and badly integrated with the slide design. This was tested extensively and abandoned.
Instead: Use AI-generated images via Gemini 3 Pro for any visual needs:
bg_style per the Background Style Selection table.diagram slide type for any process/flow that benefits from a visual.Use the LaTeX-based rendering pipeline for publication-grade output. This produces slides that match or exceed the quality of accounts with 1M+ followers (Chase AI, Analytics Vidhya, etc.).
The pipeline: LaTeX (TikZ) -> PDF (pdflatex) -> PNG (pdftoppm at 300 DPI) -> resize to 1080x1350
Generate AI images for hook background, CTA background, and optionally diagram backgrounds:
# Hook background (cinematic, hyper-detailed 50+ word prompt)
python3 ~/.claude/skills/generate-image/scripts/generate_image.py \
"Dramatic cinematic split-screen composition: left side dark blue crystalline monolith with electric energy, right side warm golden organic neural network, clash of opposing forces, volumetric lighting, no text no words no letters" \
--model "google/gemini-3-pro-image-preview" --output tmp/carousel/hook_bg.png
# CTA background (emotional close)
python3 ~/.claude/skills/generate-image/scripts/generate_image.py \
"Mesmerizing cosmic portal with swirling deep indigo and purple energy, golden light rays, ethereal atmosphere, no text no words" \
--model "google/gemini-3-pro-image-preview" --output tmp/carousel/cta_bg.png
# Diagram as AI image (optional -- replaces TikZ for better visuals)
python3 ~/.claude/skills/generate-image/scripts/generate_image.py \
"Professional flowchart: Data Collection box connects to Processing box connects to Output box, clean white background, blue and grey, sharp vector style, readable labels" \
--model "google/gemini-3-pro-image-preview" --output tmp/carousel/diagram_bg.pngThe LaTeX renderer (render_latex_slide.py) supports 7 slide types:
| Type | Description | Best For |
|---|---|---|
hook | Large title + highlighted phrase + subtitle | Cover / first slide |
body | Title + highlighted text + body + bullets | Content-heavy slides, curated list items |
comparison | Multi-column comparison table | Side-by-side analysis |
diagram | Title + TikZ flow diagram (vertical/horizontal) | Architecture, workflows |
synthesis | Styled numbered points with badges | Save-worthy summary |
cta | Centered title + text + handle button | Call to action |
4 Color Themes: warm (parchment/terracotta), clean (white/blue), dark (indigo/purple), earth (sage/gold)
Slide 1 (Hook) -- Title with AI background:
python3 ~/.claude/skills/world-class-carousel/scripts/render_latex_slide.py \
--type hook \
--data tmp/carousel/hook_data.json \
--output tmp/carousel/slide_01.png \
--theme dark --brand tmp/carousel/brand.jsonWhere hook_data.json contains: {"title": "6 AI Tools That Will", "title_highlight": "Replace Your Stack", "subtitle": "The tools 10x engineers are switching to.", "callout": "Save this!", "slide_num": 1, "total_slides": 8, "ai_bg": "tmp/carousel/hook_bg.png", "overlay_opacity": 0.63}
Body slides -- Content-heavy with bullets (gradient bg, NO texture):
python3 ~/.claude/skills/world-class-carousel/scripts/render_latex_slide.py \
--type body \
--data tmp/carousel/body_data.json \
--output tmp/carousel/slide_02.png \
--theme dark --brand tmp/carousel/brand.jsonWhere body_data.json contains: {"title": "Why Most Developers", "title_highlight": "Get This Wrong", "body": "The biggest mistake is...", "bullets": ["Point 1", "Point 2"], "slide_num": 2, "total_slides": 8, "bg_style": "gradient"}
NOTE: Always pass data as a JSON file path, never inline JSON. Always include "bg_style": "gradient" for text-only slides. Always pass --brand.
Comparison slide -- Multi-column:
python3 ~/.claude/skills/world-class-carousel/scripts/render_latex_slide.py \
--type comparison \
--data tmp/carousel/comparison_data.json \
--output tmp/carousel/slide_04.png \
--theme warm --brand tmp/carousel/brand.jsonWhere comparison_data.json contains: {"title": "Claude vs GPT", "subtitle": "How they compare", "columns": [{"name": "Claude", "items": [{"label": "Best for", "value": "Complex refactors"}]}, {"name": "GPT-4", "items": [{"label": "Best for", "value": "Quick prototyping"}]}], "slide_num": 4, "total_slides": 9, "bg_style": "gradient"}
Diagram slide -- AI-generated diagram background (preferred) or TikZ fallback:
python3 ~/.claude/skills/world-class-carousel/scripts/render_latex_slide.py \
--type diagram \
--data tmp/carousel/diagram_data.json \
--output tmp/carousel/slide_07.png \
--theme dark --brand tmp/carousel/brand.jsonWhere diagram_data.json contains: {"title": "The Architecture", "description": "How the tools connect.", "diagram_nodes": [{"label": "Code", "desc": "Write"}, {"label": "Deploy", "desc": "Ship"}, {"label": "Monitor", "desc": "Track"}], "diagram_type": "vertical", "slide_num": 7, "total_slides": 9, "ai_bg": "tmp/carousel/diagram_bg.png", "overlay_opacity": 0.60, "bg_style": "gradient"}
Synthesis slide -- Save-worthy numbered summary:
python3 ~/.claude/skills/world-class-carousel/scripts/render_latex_slide.py \
--type synthesis \
--data tmp/carousel/synthesis_data.json \
--output tmp/carousel/slide_08.png \
--theme dark --brand tmp/carousel/brand.jsonWhere synthesis_data.json contains: {"title": "Your Stack", "points": ["Tool 1 for X", "Tool 2 for Y", "Tool 3 for Z"], "slide_num": 8, "total_slides": 9, "bg_style": "gradient"}
CTA slide -- with AI background for emotional close:
python3 ~/.claude/skills/world-class-carousel/scripts/render_latex_slide.py \
--type cta \
--data tmp/carousel/cta_data.json \
--output tmp/carousel/slide_09.png \
--theme dark --brand tmp/carousel/brand.jsonWhere cta_data.json contains: {"title": "Want the full breakdown?", "cta_text": "Follow for daily tips.", "handle": "@yourbrand", "slide_num": 9, "total_slides": 9, "show_nav": false, "ai_bg": "tmp/carousel/cta_bg.png", "overlay_opacity": 0.67}
Generate a complete carousel from a single JSON spec:
python3 ~/.claude/skills/world-class-carousel/scripts/generate_carousel.py \
--spec carousel_spec.json \
--output-dir outputs/carousel/ \
--brand tmp/carousel/brand.jsonThe spec JSON format:
{
"topic": "6 AI Tools That Will Replace Your Stack",
"brand": "AI Builder",
"theme": "dark",
"bg_style": "gradient",
"slides": [
{"type": "hook", "data": {"title": "...", "title_highlight": "...", "ai_bg": "tmp/hook_bg.png", "overlay_opacity": 0.63}},
{"type": "body", "data": {"title": "...", "bullets": ["..."], "bg_style": "gradient"}},
{"type": "diagram", "data": {"title": "...", "diagram_nodes": [{"label": "...", "desc": "..."}], "diagram_type": "vertical", "ai_bg": "tmp/diagram_bg.png", "overlay_opacity": 0.60}},
{"type": "synthesis", "data": {"title": "...", "points": ["..."], "bg_style": "gradient"}},
{"type": "cta", "data": {"title": "...", "handle": "@brand", "ai_bg": "tmp/cta_bg.png", "overlay_opacity": 0.67}}
]
}Spec-level bg_style applies to all slides. Per-slide data.bg_style overrides it. Options: "gradient", "gradient_mesh", "solid". If omitted, defaults to "gradient". Never use "texture".
The orchestrator auto-injects brand name, slide numbering, renders all slides, and creates a preview grid.
The design system is fully generalized through brand configs -- JSON files that define visual identity per channel or brand. Pass --brand brand.json to any render command.
Brand config JSON format:
{
"name": "TechStack AI", // Brand name shown in header
"logo": "path/to/logo.png", // Optional: logo image replaces text in header
"theme": "dark", // Base theme: warm, clean, dark, earth
"accent_override": "6366F1", // Optional: override accent hex (no #)
"font_serif": "newpxtext", // LaTeX serif font package (default: Palatino)
"header_style": "bold", // Header text: italic, bold, or plain
"nav_style": "circle", // Navigation arrow: circle, arrow, none
"divider_style": "line", // Dividers: line, ornament (diamond), dots, none
"corner_radius": "6pt" // Rounded corner radius for labels/badges
}3 sample brand configs (in tmp/brands/):
| Brand | Theme | Accent | Header | Divider | Character |
|---|---|---|---|---|---|
| TechStack AI | dark | Indigo 6366F1 | Bold | Line | Modern dev/AI content |
| Growth Academy | earth | Amber B45309 | Italic | Ornament | Business coaching |
| Code Academy | clean | Blue (default) | Bold | Dots | Educational tutorials |
Usage with brand config:
python3 ~/.claude/skills/world-class-carousel/scripts/render_latex_slide.py \
--type hook \
--data hook_data.json \
--output slide.png \
--theme dark \
--brand brands/techstartup.jsonAI Image Integration (Aristotelian Framework): Slides support two AI image zones:
ai_image: Accent illustration placed in a card (hook bottom, body bottom)ai_bg: Full-bleed background with semi-transparent overlay for text readabilityImages in carousels must serve a purpose (telos). Before generating any AI image, name its function in one sentence. If you cannot, do not generate it.
The Three Teloi (Purposes) of Carousel Images:
| Telos | When to Use | Image Form | Example |
|---|---|---|---|
| Emotional Priming | Create a feeling before text is read | Atmospheric, evocative, human/natural | Marble bust for philosophy, neon cityscape for tech |
| Conceptual Anchoring | Give abstract ideas a visual handle | Symbolic, metaphorical, illustrative | Storm figure for "amor fati", network diagram for systems |
| Authority Signaling | Establish credibility through proof | Documentary, screenshots, concrete | Product screenshot, data chart, real photo |
The 2-3 Rule (Golden Mean): In an 8-10 slide carousel, use AI images on exactly 2-3 slides. Always the hook (slide 1) and CTA (last slide). Optionally the diagram slide with an AI-generated diagram as ai_bg. Never on body slides -- visual fatigue destroys reading rhythm and costs 40% content space.
Image Placement Decision Matrix:
| Slide Type | AI Image? | Zone | Reasoning |
|---|---|---|---|
hook | Always | ai_bg (full-bleed + 0.60-0.68 overlay) | Scroll-stop power: atmospheric image + typography > typography alone (Axiom 1, 3) |
body | Never | -- | Text carries the weight; images destroy 40% content space for minimal gain |
diagram | Preferred | ai_bg (full-bleed + 0.55-0.65 overlay) | Gemini 3 Pro generates production-quality flowcharts with readable labels, arrows, and boxes -- far more visually striking than basic TikZ. TikZ remains as fallback for simple flows. |
synthesis | Never | -- | Numbered points ARE the content; keep text-only with gradient bg |
cta | Always | ai_bg (full-bleed + 0.65-0.70 overlay) | Emotional close: atmospheric image creates a feeling of resolution |
Prompt Engineering for Consistency: All AI images in a single carousel MUST share a consistent style prefix. Build the prefix from the content vertical:
| Content Vertical | Style Prefix for AI Image Prompts |
|---|---|
| Mindset/Philosophy | "warm earthy tones, parchment cream, watercolor or classical art style, muted terracotta accents, editorial quality" |
| Tech/AI | "dark indigo and purple tones, subtle geometric patterns, clean digital art, neon accents, futuristic" |
| Business/Strategy | "warm amber and gold tones, bold professional graphics, rich depth, confident and energetic" |
| Education | "clean white and blue tones, flat illustration style, precise and clear, minimal and modern" |
| Creative/Design | "dark charcoal with bold accent colors, artistic and expressive, gallery quality, intentional composition" |
Text Readability is Inviolable: If using ai_bg (full-bleed), overlay opacity must ensure WCAG AA contrast (4.5:1). Minimum overlay_opacity: 0.55. Proven ranges: hook 0.60-0.68, diagram 0.55-0.65, CTA 0.65-0.70.
What NOT to generate: Generic stock-photo-style images (people in offices, handshakes, generic landscapes). If the image could illustrate any topic, it fails the Telos Test.
Generate AI images for hook backgrounds, CTA backgrounds, and diagram visuals using the generate-image skill (requires AI_GATEWAY_API_KEY):
# Hook background -- cinematic, atmospheric, scroll-stopping
python3 ~/.claude/skills/generate-image/scripts/generate_image.py \
"Dramatic cinematic split-screen composition, glowing neon circuits on dark background, \
volumetric lighting, deep indigo and electric purple tones, no text, no words, no letters" \
--model "google/gemini-3-pro-image-preview" --output tmp/carousel/hook_bg.png
# CTA background -- emotional close
python3 ~/.claude/skills/generate-image/scripts/generate_image.py \
"Abstract convergence of light streams on dark background, warm golden highlights, \
sense of resolution and completeness, cinematic atmosphere, no text, no words" \
--model "google/gemini-3-pro-image-preview" --output tmp/carousel/cta_bg.png
# Diagram as AI image (preferred over TikZ for complex flows)
python3 ~/.claude/skills/generate-image/scripts/generate_image.py \
"Professional flowchart: Data Collection box connects to Processing box connects to Output box, \
clean white boxes on dark blue background, arrows between nodes, minimal corporate design" \
--model "google/gemini-3-pro-image-preview" --output tmp/carousel/diagram_bg.pngKey rules: Always add "no text, no words, no letters" unless the image IS a diagram with labels. Use hyper-detailed prompts (50+ words) for best results.
For viral-style hook slides matching accounts like @evolving.ai and @therundownai, use a two-step pipeline:
Step 1: Generate cinematic base image with Gemini 3 Pro (topic-specific, dramatic composition):
# Multi-person composition (best for news/war/rivalry topics)
python3 ~/.claude/skills/generate-image/scripts/generate_image.py \
"Cinematic photomontage: three powerful figures in dramatic formation, \
center figure is a humanoid AI robot with glowing eyes, flanking figures \
are business leaders in dark suits, red and blue dramatic lighting, \
dark moody background, editorial magazine composition, hyper-detailed" \
--model "google/gemini-3-pro-image-preview" --output tmp/carousel/hook_base.png
# Single portrait (best for profile/biography/interview topics)
python3 ~/.claude/skills/generate-image/scripts/generate_image.py \
"Editorial portrait: distinguished elder with glasses, warm ambient lighting, \
slightly blurred conference background, shallow depth of field, \
photojournalistic style, natural expression, cinematic color grading" \
--model "google/gemini-3-pro-image-preview" --output tmp/carousel/hook_base.png
# Face-off composition (best for comparison/versus topics)
python3 ~/.claude/skills/generate-image/scripts/generate_image.py \
"Dramatic face-off: two opposing figures in profile facing each other, \
one in cool blue lighting one in warm orange, city skyline between them, \
energy effects and particles, dark cinematic atmosphere, epic confrontation" \
--model "google/gemini-3-pro-image-preview" --output tmp/carousel/hook_base.pngStep 2a: News-editorial style (matches @therundownai -- single person, big headline):
python3 scripts/compose_news_hook.py \
--base tmp/carousel/hook_base.png \
--output tmp/carousel/slide_01_hook.png \
--headline "OpenAI just hit $13B ARR making it the fastest-growing software company in history" \
--category "AI NEWS" \
--brand "@DailyAINews"The compose_news_hook.py script (editorial style):
Step 2b: Multi-person viral style (compose_hook.py -- multi-person, full overlay):
python3 scripts/compose_hook.py \
--base tmp/carousel/hook_base.png \
--output tmp/carousel/slide_01_hook.png \
--headline "THE AI WAR JUST ESCALATED" \
--subhead "3 moves that changed everything this week" \
--brand "YOUR BRAND" \
--category "AI NEWS"The compose_hook.py script (viral style):
Prompt Strategy by Topic Type:
| Topic Type | Base Image Style | Score |
|---|---|---|
| News/current events | Multi-person photomontage + robot | 8.5/10 |
| Comparison/versus | Face-off composition with opposing energy | 8.5/10 |
| Profile/biography | Single editorial portrait | 8/10 |
| Tools/abstract | Silhouette with holographic/tech backdrop | 7.5/10 |
For educational/tutorial/framework topics, AI-generated compositions work excellently (8-8.5/10).
When the topic involves specific real people (Sam Altman, Elon Musk, Jensen Huang, etc.), use web-sourced Creative Commons photos instead of AI generation:
BEST Approach: Base64 multi-image via AI Gateway (10/10)
Send local photos as base64 data URIs to /api/v1/images/generations. This bypasses URL accessibility issues (Wikimedia blocked, etc.) and supports ALL local images including 3+ people.
import base64, json, os
from pathlib import Path
from urllib import request
API_KEY = os.environ["AI_GATEWAY_API_KEY"]
BASE = "https://ai-gateway.happycapy.ai/api/v1" # NOT /openai/v1 !
# Load photos as base64 data URIs
images_b64 = []
for photo in ["elon_musk.jpg", "jensen_huang.jpg", "sam_altman.jpg"]:
data = base64.b64encode(Path(photo).read_bytes()).decode()
images_b64.append(f"data:image/jpeg;base64,{data}")
payload = {
"model": "google/gemini-3-pro-image-preview",
"prompt": "Create a dramatic face-off style composition with these three tech leaders. "
"Confrontational layout, intense red vs blue split lighting, dark background "
"with smoke/particle effects. Faces must remain photorealistic and recognizable.",
"images": images_b64,
"response_format": "url",
"n": 1
}
req = request.Request(
f"{BASE}/images/generations",
data=json.dumps(payload).encode(),
headers={
"Content-Type": "application/json",
"Authorization": f"Bearer {API_KEY}",
"Origin": "https://trickle.so"
},
method="POST"
)
with request.urlopen(req, timeout=180) as resp:
result = json.loads(resp.read())
img_url = result["data"][0]["url"]
# Download and save...CRITICAL: Use /api/v1/images/generations (NOT /api/v1/openai/v1/images/generations). The OpenAI-prefixed endpoint rejects the images parameter.
Alternative: transform_image.py with Flickr URLs (9.5/10)
When photos are available at Flickr URLs (directly accessible by Vertex AI):
python3 ~/.claude/skills/generate-image/scripts/transform_image.py \
"Create a dramatic cinematic photomontage combining these tech leaders. \
Dark dramatic background with blue and red lighting. Keep faces EXACTLY as they appear." \
"https://live.staticflickr.com/7832/33377877458_d1a3774615_b.jpg" \
"https://live.staticflickr.com/5767/30796823531_85932ecaa0_b.jpg" \
--model "google/gemini-3-pro-image-preview" \
--output tmp/carousel/hook_base.pngPhoto sourcing rules:
urllib.request with browser User-Agent for Wikimedia downloads to local filesFallback: PIL rembg composite (7/10)
pip install rembg # One-time setup
# Remove backgrounds, composite onto AI background, apply compose_hook.py overlaynano-banana-pro status: The native google-genai SDK requires GEMINI_API_KEY (not set). The AI Gateway has no Gemini-native endpoint, so routing the SDK through the gateway fails (404). The base64 approach above achieves the same multi-image composition capability via the AI Gateway's image generation endpoint.
Select from Instagram's available music library. Do NOT generate music. Apply the Music Decision Matrix to recommend 2-3 specific tracks the user can search for on Instagram.
Run the final checklist (see APPENDIX) against every slide. Re-render any slide that fails. Output:
Every decision in this skill traces back to these irreducible premises:
A human scrolling Instagram makes a stay-or-leave decision in ~1.3 seconds. The first slide is a survival test. Visual pattern interrupts trigger involuntary attention. Cognitive curiosity gaps (Zeigarnik effect) create forward momentum. The cost of starting to swipe is high; the cost of continuing is near-zero.
Content that does not leave the viewer materially better off is noise. Save rate is the purest signal of value. Share rate = social currency. "Useful" is domain-specific.
The brain processes visual information 60,000x faster than text. Color communicates emotion before words. Spatial hierarchy dictates reading order. Consistency creates cognitive fluency. One dominant visual per slide.
Content structured as narrative is retained 22x better than lists. Each slide must resolve the previous curiosity gap AND create the next one. The arc must reach genuine resolution.
1080x1350 canvas on a 6-inch screen in half-attention. Minimum readable font = 24px. Bottom ~15% occluded by UI. Portrait (4:5) occupies maximum screen real estate.
Music activates the limbic system independently. Instagram's algorithm rewards music usage with 15-30% more reach. Genre signals tribal identity. Trending audio boosts discovery if it genuinely fits.
Auto-select the best archetype based on the topic. Each archetype has a specific slide structure, value test, and music profile.
Slide 1: Problem statement (hook)
Slide 2: Tool/method introduction
Slide 3: Step 1 (with visual)
Slide 4: Step 2
Slide 5: Step 3
Slide 6: Step 4 (if needed)
Slide 7: Result / proof it works
Slide 8: Common mistakes to avoid
Slide 9: Quick-reference summary (save-worthy)
Slide 10: CTAValue Test: Can the reader DO the thing after reading? Music Profile: Lo-fi/chillhop, 70-85 BPM, instrumental
Slide 1: Common problem everyone faces (hook)
Slide 2: Why existing approaches fail
Slide 3: The framework name + overview
Slide 4: Component 1 explained
Slide 5: Component 2 explained
Slide 6: Component 3 explained
Slide 7: How the components connect (diagram)
Slide 8: Practical application example
Slide 9: The complete framework visual (save-worthy)
Slide 10: CTAValue Test: Does the reader now have a reusable thinking tool? Music Profile: Minimal electronic, 90-110 BPM, instrumental
Slide 1: "Everyone thinks X" (hook)
Slide 2: "Here's what's actually happening"
Slide 3: Evidence 1
Slide 4: Evidence 2
Slide 5: Evidence 3
Slide 6: The real framework / truth
Slide 7: Implications
Slide 8: What to do instead
Slide 9: The mental model shift (save-worthy)
Slide 10: CTAValue Test: Has the reader's mental model shifted? Music Profile: Trip-hop/downtempo, 85-100 BPM, instrumental
Slide 1: The result / shocking metric (hook)
Slide 2: The context / starting point
Slide 3: What was done (overview)
Slide 4: Step 1 of the process
Slide 5: Step 2
Slide 6: Step 3
Slide 7: The data / proof
Slide 8: Key insight
Slide 9: How you can replicate it (save-worthy)
Slide 10: CTAValue Test: Is the specific mechanism replicable? Music Profile: Upbeat electronic, 110-120 BPM, light vocals OK
Slide 1: "X Tools/Resources for Y" (hook)
Slide 2: Item 1 + why it's valuable
Slide 3: Item 2 + why
Slide 4: Item 3 + why
Slide 5: Item 4 + why
Slide 6: Item 5 + why
Slide 7: Item 6 + why (if needed)
Slide 8: Item 7 + why (if needed)
Slide 9: Comparison / selection guide (save-worthy)
Slide 10: CTAValue Test: Can the reader immediately use at least 3 of these? Music Profile: Chill beats/lo-fi, 75-90 BPM, instrumental
Slide 1: The concept + why it matters (hook)
Slide 2: What most people get wrong
Slide 3: How it actually works (simplified)
Slide 4: Visual diagram / mechanism
Slide 5: Practical example 1
Slide 6: Practical example 2
Slide 7: Common mistakes
Slide 8: Pro tips
Slide 9: The complete mental model (save-worthy)
Slide 10: CTAValue Test: Does the reader understand the mechanism, not just the surface? Music Profile: Ambient/atmospheric, 60-80 BPM, instrumental only
Slide 1: The "after" result (hook)
Slide 2: The "before" state / the pain
Slide 3: The discovery / turning point
Slide 4: The change in approach
Slide 5: Step 1 of the new way
Slide 6: Step 2
Slide 7: Step 3
Slide 8: The complete "after" state with proof
Slide 9: How to start your transformation (save-worthy)
Slide 10: CTAValue Test: Can the reader see themselves in the transformation? Music Profile: Progressive/building, 80-120 BPM arc, light vocals OK
The first slide determines everything. Select the best hook pattern for the topic:
"Claude Code has a memory problem. Here's how to fix it for free."
States a problem the audience recognizes + promises a solution. Optionally removes an objection ("for free", "in 5 minutes").
"Stop using RAG. There's a better way."
Contradicts a common belief. Creates cognitive dissonance that demands resolution.
"This setup saved me 4 hours per week of prompt debugging."
Concrete numbers bypass the vague-promise filter. Specificity = credibility.
"Your AI agent's memory works like a messy desk. Here's how to organize it."
Maps unfamiliar onto familiar. Creates instant comprehension.
"90% of developers use Claude Code wrong. Are you one of them?"
Identity-based challenge. Use sparingly -- dangerous if overused.
"Obsidian + Claude Code = unlimited AI memory"
Two known things combined unexpectedly. The "+" implies synergy.
Every single slide must pass ALL 3 conditions before rendering. No exceptions.
Does this contain a concrete, actionable insight that could NOT be guessed by someone with zero domain knowledge?
Does this present a connection, framework, or technique the viewer has likely NOT encountered before?
Could the same information be compressed further without loss of meaning? If yes, it is padded and needs to be tightened.
If a slide fails any condition, rewrite it before rendering.
| Element | Size | Weight | Font Type |
|---|---|---|---|
| Slide Title | 64-80px | Bold/Black (700-900) | Strong serif OR geometric sans |
| Subtitle / Hook | 32-40px | SemiBold (600) | Same family as title |
| Body Text | 24-28px | Regular (400) | Clean sans-serif |
| Bullet Points | 22-26px | Regular (400) | Same as body |
| Labels / Citations | 16-20px | Light (300) | Same as body |
| Slide Indicator | 14-16px | Light (300) | Sans-serif |
Rules:
Tech / AI / Coding:
#0D1117 (deep dark) or #1A1A2E (midnight blue)#E6EDF3 (near-white) or #F0F6FC#7C3AED (electric purple) or #3B82F6 (bright blue)#6B7280 (muted gray)Business / Strategy:
#F97316 to #EAB308 (warm amber) or #FFF7ED (cream)#1C1917 (near-black)#DC2626 (confident red) or #F59E0B (gold)#78716C (warm gray)Education / How-To:
#FFFFFF (clean white) or #F8FAFC (cool off-white)#0F172A (dark slate)#2563EB (trust blue) or #0EA5E9 (sky blue)#64748B (slate gray)Design / Creative:
#18181B (charcoal) or #FAFAFA (near-white)#EC4899 magenta, #10B981 emerald, or #F59E0B amber)#71717A (zinc)Mindset / Growth:
#F5F0EB (warm neutral) or #1B3A2D (forest dark)#2D2416 (earth brown) or #E8E0D5 (warm light)#16A34A (forest green) or #B45309 (amber earth)#8B7355 (warm mid-tone)Do NOT generate music. Recommend specific tracks available on Instagram's music library.
| Content Type | Search Keywords on Instagram | BPM Range | Vocals | Example Tracks to Search |
|---|---|---|---|---|
| Tech / AI | "lo-fi", "chill beats", "trip-hop" | 70-90 | No | DJ Shadow - Six Days, Nujabes - Aruarian Dance, Tycho - A Walk, Bonobo - Kerala |
| Business | "indie electronic", "future bass" | 100-120 | Minimal | ODESZA - A Moment Apart, Rufus Du Sol - Innerbloom, Bicep - Glue |
| Tutorial | "study beats", "chillhop", "acoustic" | 75-95 | No | Idealism - Lovely Day, Jinsang - Solitude, Tomppabeats - Monday Loop |
| Motivational | "epic", "cinematic", "uplifting" | 110-130 | Optional | M83 - Midnight City, Hans Zimmer - Time, Illenium - Good Things Fall Apart |
| Creative | "minimal techno", "ambient", "art" | 90-115 | No | Four Tet - Two Thousand and Seventeen, Jon Hopkins - Emerald Rush, Kiasmos - Blurred |
| Myth-Buster | "dark ambient", "post-rock", "mysterious" | 80-100 | No | Massive Attack - Teardrop, Radiohead - Everything In Its Right Place, Portishead - Wandering Star |
| Case Study | "upbeat", "indie pop", "electronic" | 110-125 | Light | Washed Out - Feel It All Around, Toro y Moi - So Many Details, M83 - Wait |
[Hook line -- front-load value, must be compelling in first 2 lines before "...more"]
[2-3 sentences expanding the core value proposition]
[Key points:]
- Point 1 (specific, not vague)
- Point 2
- Point 3
[Specific CTA -- NOT "What do you think?" but rather a specific question or action]
[5-15 hashtags with distribution:]
[2-3 broad (100K-1M posts)] [3-5 niche (10K-100K)] [2-3 community (1K-10K)] [1-2 branded]Publication-grade LaTeX slide renderer. Produces 1080x1350 PNG slides using pdflatex + pdftoppm.
6 slide types: hook, body, comparison, diagram, synthesis, cta
4 themes: warm, clean, dark, earth
python3 ~/.claude/skills/world-class-carousel/scripts/render_latex_slide.py \
--type body \
--data body_data.json \
--output slide.png \
--theme dark \
--brand brand_config.jsonData fields by slide type:
title, title_highlight, subtitle, callout, ai_bg, overlay_opacity, logos[]title, title_highlight, body, bullets[], bg_styletitle, subtitle, columns[{name, items[{label, value}]}], bg_styletitle, description, diagram_nodes[{label, desc}], diagram_type (vertical/horizontal), ai_bg, overlay_opacitytitle, points[], bg_styletitle, cta_text, handle, stats[], ai_bg, overlay_opacityslide_num, total_slides, show_nav, ai_bg (full-bleed background), overlay_opacity, bg_styleEnd-to-end carousel generation from a JSON spec. Handles slide numbering, rendering, and preview grid assembly.
python3 ~/.claude/skills/world-class-carousel/scripts/generate_carousel.py \
--spec carousel_spec.json \
--output-dir outputs/carousel/ \
--brand brand_config.jsonUse the generate-image skill for all AI images (hook bg, CTA bg, diagram bg). See "AI Visual Generation" section above for examples.
python3 ~/.claude/skills/generate-image/scripts/generate_image.py \
"Your detailed prompt here, 50+ words, no text no words no letters" \
--model "google/gemini-3-pro-image-preview" --output tmp/carousel/image.pngValidates 1080x1350, optimizes PNGs, creates preview grid, generates metadata JSON.
python3 ~/.claude/skills/world-class-carousel/scripts/assemble_carousel.py \
--input-dir tmp/carousel/ --output-dir outputs/carousel/ --optimizePillow-based renderer with 6 layout modes. Superseded by render_latex_slide.py for production use. Still available for quick prototyping without LaTeX dependencies.
Apply these to elevate from "good" to "world-class":
Before delivering any carousel, verify ALL of these:
ai_bg for visual topics; body slides stay text-onlyAfter every carousel delivery, update the skill's knowledge base. This system prevents repeating mistakes while staying compact.
Tier 1: KNOWN_ISSUES.md (in this skill directory)
Tier 2: session-archives/ directory (in this skill directory)
session-archives/YYYY-MM-DD-topic.mdEvery piece of learning must be compressed to its irreducible form before entering Tier 1:
points[] must be FLAT STRINGS, not dicts. Renderer does escape_latex(pt) directly." (12 words)If you can't compress it to one line, it belongs in Tier 2 (session archive), not Tier 1.
© happycapy-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 58 other files (scripts, references) in skills/world-class-carousel of happycapy-ai/Happycapy-skills.
Open the folder on GitHubat commit 9ff72fe
World Class Carousel next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| World Class Carousel this skillhappycapy-ai/Happycapy-skills | 137 | — | ~16k | Automated safety check: Notes | MIT | |
| Design SystemOhh-889/skyroc | 795 | 11 repos | ~1.7k | Automated safety check: Pass | MIT | |
| DesignOhh-889/skyroc | 795 | 9 repos | ~3.1k | Automated safety check: Pass | MIT | |
| Frontend Visual QAdaymade/claude-code-skills | 1.4k | — | ~8.4k | Automated safety check: Pass | MIT | |
| Minimax PDFpoco-ai/poco-claw | 1.4k | 6 repos | ~2.1k | Automated safety check: Pass | MIT | |
| Build iPolloWork TemplatesDevin-AXIS/iPolloWork | 6.8k | — | ~925 | Automated safety check: Pass | Custom licence |
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
Ohh-889/skyroc
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations…
daymade/claude-code-skills
Audits already-rendered UI and Markdown/Obsidian image layout — web app, deck/slide, dashboard, design-system, or Electron/native app — via real-browser/native-app journeys and a Playwright sweep.
poco-ai/poco-claw
A skill your agent uses when visual quality and design identity matter for a PDF.
Devin-AXIS/iPolloWork
Builds a reusable iPolloWork template for Design, Slides or PPT, or HyperFrames Video through conversation, keeping a manifest, reusable variables and a validated package current.
manalkaff/opendesign
A skill your agent uses when the user asks for a slide presentation.
happycapy-ai/Happycapy-skills
Automate HappyCapy skill creation by finding and adapting existing skills from anthropics/skills repository.
happycapy-ai/Happycapy-skills
Build a fully self-contained 360° equirectangular panorama viewer as a single HTML file.
happycapy-ai/Happycapy-skills
Generate and transform images using AI Gateway API. An agent skill from happycapy-ai/Happycapy-skills.
happycapy-ai/Happycapy-skills
Multi-model LLM Council with live dashboard. An agent skill from happycapy-ai/Happycapy-skills.
happycapy-ai/Happycapy-skills
Create polished PowerPoint (.pptx) presentations directly from a topic or content description.
happycapy-ai/Happycapy-skills
HappyCapy-specific skill for publishing content to 13+ social media platforms (Instagram, Twitter, LinkedIn, Threads, Facebook, TikTok, YouTube, Pinterest, Reddit, Telegram, Discord, etc.)…
Works with
Generate world-class Instagram carousel content on any topic. World Class Carousel is an agent skill from happycapy-ai/Happycapy-skills. Generate world-class Instagram carousel content on any topic.
World Class Carousel fits situations like: tasks that involve Slides and decks; tasks that involve Quality gates; tasks that involve Design systems.
Run `npx skills add happycapy-ai/Happycapy-skills --skill world-class-carousel -a claude-code`. Or copy the skill folder (skills/world-class-carousel in happycapy-ai/Happycapy-skills) into .claude/skills/world-class-carousel in your project. Claude Code loads it when a task matches its description.
Run `npx skills add happycapy-ai/Happycapy-skills --skill world-class-carousel -a codex`. Or copy the skill folder (skills/world-class-carousel in happycapy-ai/Happycapy-skills) into .agents/skills/world-class-carousel in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add happycapy-ai/Happycapy-skills --skill world-class-carousel -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/world-class-carousel, .gemini/skills/world-class-carousel, .github/skills/world-class-carousel and .opencode/skills/world-class-carousel in your project.
Going by SKILL.md and its folder, World Class Carousel needs the command-line tools its instructions call (python3 and pip) and credentials named AI_GATEWAY_API_KEY, GEMINI_API_KEY and API_KEY. Our summary lists: Docker. Its frontmatter pre-approves these tools: Bash, Read, Edit, Write, Glob, Grep, WebFetch.
SKILL.md names 3 domains. In commands or code: live.staticflickr.com, ai-gateway.happycapy.ai and trickle.so; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
World Class Carousel is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
About 16k tokens (SKILL.md is roughly 63k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with World Class Carousel: Design System (Ohh-889/skyroc, 795 stars), Design (Ohh-889/skyroc, 795 stars), Frontend Visual QA (daymade/claude-code-skills, 1.4k stars) and Minimax PDF (poco-ai/poco-claw, 1.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
happycapy-ai (a GitHub user) maintains it in happycapy-ai/Happycapy-skills, which has 137 GitHub stars. The repository holds 28 skills in this directory. The repository was last updated on September 3, 2026.
Source: happycapy-ai/Happycapy-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.