# Carousel Generator

> >

- **Type:** Skill
- **Install:** `agentstack add skill-crealwork-ai-marketing-kit-carousel-generator`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [crealwork](https://agentstack.voostack.com/s/crealwork)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [crealwork](https://github.com/crealwork)
- **Source:** https://github.com/crealwork/ai-marketing-kit/tree/main/skills/carousel-generator

## Install

```sh
agentstack add skill-crealwork-ai-marketing-kit-carousel-generator
```

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

## About

# Card News Generator (카드뉴스 자동 생성기)

This skill creates professional Instagram/Threads card news (4:5 ratio, 1080x1350px) through a
complete pipeline: brand selection, topic confirmation, deep research, card flow planning,
HTML generation with neumorphism design, and PNG download capability.

The goal is not just pretty cards -- it's a full content pipeline where research quality and
message flow matter more than decoration.

---

## Brand Templates

This generator supports multiple brand presets. If the user doesn't specify a brand,
ask which one to use via AskUserQuestion. If context makes the brand obvious (e.g., the user
mentions a specific brand name or account), use that preset directly.

**The presets below are worked examples** (real brands run with this skill in
production). Treat them as the template for defining YOUR brand's preset: copy one,
swap the account/palette/tone/footer, and add it as a new preset section. If a brand
has its own dedicated card-news skill installed, that skill wins over these presets.

### Preset: CREAL (댄정 @crealwork)

**Account**: @crealwork
**Brand name**: 댄정
**Footer text**: `댄정 @crealwork`
**Content domain**: AI + Marketing (AI 활용법, 마케팅 자동화, 생산성, 트렌드 등)
**Language**: Korean
**CTA button text**: `Follow Dan`

**Tone**: 쉽고 실용적인 정보형 -- 전문 용어를 쓰더라도 한 번은 쉽게 풀어서 설명하고,
독자가 "이거 저장해야지"라고 느낄 수 있게 구체적이고 실행 가능한 내용 위주로 쓴다.
가볍지만 근거 있는 톤. 과장하지 않되, 임팩트는 살린다.

**Color Palette (CREAL B.I. Guideline):**
- Navy (Primary): `#1A2A4F` -- headings, key text, dark backgrounds
- Yellow (Accent): `#FFCC4E` -- highlights, CTAs, emphasis, badges
- Black: `#000000` -- body text on light backgrounds
- White: `#FFFFFF` -- text on dark backgrounds
- Warm Gray: `#A39F94` -- secondary text, dividers, subtle elements
- Coral: `#D77A61` -- charts, secondary accents
- Background: `#F8F5F0` (ivory cream) for light mode, `#1A2A4F` for dark mode

**Default style**: Style A (Light Neumorphism) for general audiences.
**Logo**: CREAL Text logo in footer. White/Yellow on dark, Black/Blue on light.

### Preset: Red Seal Pro

**Account**: @redseal.pro
**Brand name**: RED SEAL PRO
**Footer text**: `RED SEAL PRO @redseal.pro`
**Content domain**: Contractor tips, home improvement, trades, HVAC, plumbing, electrical
**Language**: English
**CTA button text**: `Follow @redseal.pro`

**Tone**: Direct, authoritative, practical. Speaks contractor-to-contractor.
No fluff, real-world advice. Professional but approachable.

**Color Palette:**
- Dark charcoal (Primary): `#1A1A1A` -- backgrounds, headings
- Red (Accent): `#C0392B` -- highlights, CTAs, emphasis
- White: `#FFFFFF` -- text on dark backgrounds
- Light gray: `#F5F5F5` -- secondary backgrounds
- Medium gray: `#888888` -- secondary text

**Default style**: Style B (Dark Neumorphism) for premium/professional feel.

### Preset: Sundayable

*(Synced to the live site sundayable.com on 2026-07-16. If in doubt, the live site and
the brand portal at proof.getsundayable.com/brand win over this file.)*

**Account**: @sundayable
**Brand name**: Sundayable.
**Footer text**: `Sundayable.` (wordmark only, period included, never burgundy)
**Content domain**: Sunday, the AI operator, ships finished work for small business —
pages, ads, reels, cold outreach, CRM ops, weekly workflows. Positioning: "AI + Revenue
Growth Team for Small Business". Key line: "People don't need more software. They need
the work done." Never call Sunday a tool or copilot; it's an operator that ships.
**Language**: English (Korean OK for Korean-market audiences)
**CTA button text**: `Book a Free Demo` (site CTA) or `Follow Dan Jeong at Sundayable` for follow-type cards
**Site**: sundayable.com · Brand kit: proof.getsundayable.com/brand

**Tone**: Editorial-minimal. Magazine typography meets a clean iOS message thread.
Direct, declarative, no jargon. **No em-dashes. No emojis. No exclamation marks.**
Contractions OK. Talks like a person, not a brand.

**Color Palette (warm — never cool grays, never pure-white backgrounds):**
- Paper (Background): `#EFECE6` -- warm cream, main background
- Card: `#FFFFFF` -- cards/panels sitting on paper
- Ink (Primary): `#0A0A0A` -- headings, primary text, wordmark
- Body: `#1F1F1F` -- body text on paper
- Muted: `#5F5A50` -- subtext, descriptions, meta labels
- Subtle: `#98927F` -- disclaimers, fine print
- Divider: `#DDD8CC` -- borders, separators
- Surface: `#E7E3D9` -- card insets, alternating sections
- Burgundy (Accent): `#800020` -- italic emphasis, CTA fills, accent bars (hover `#660019`)
- **No burgundy tints** (rose-soft `#F2DEE3` was killed 2026-07-16): full-strength burgundy or nothing. Sunday's bubbles/status pills sit on Surface `#E7E3D9` with the burgundy S avatar for differentiation

**Typography (override Pretendard with these):**
- Display headings: `Instrument Serif` (400) -- Google Fonts
- Italic emphasis only: `DM Serif Display` (400 italic) -- burgundy color
- Body: `Inter` (300-700) -- Google Fonts
- Wordmark `Sundayable.` is **always Instrument Serif**, ink color, period included

**Italic emphasis pattern** -- ONE per card max (max 2-3 per deck total):
```html
phrase
```

**Hard rules (Sundayable-specific):**
1. **Hard ban: em-dashes, emojis, exclamation marks.** No exceptions.
2. **Hard ban words**: leverage, unlock, seamless, dive into, AI-powered, robust, navigate the complexities, in the realm of.
3. **One italic emphasis per card max.** Don't stack.
4. **Wordmark `Sundayable.`** -- the period is part of the wordmark, never colored separately, never burgundy.
4b. **S mark is minimal-use ONLY** (Dan, 2026-07-16): favicons, point icons, Sunday's chat avatar. Never next to the wordmark, never as a card's brand mark, no lockups. On cards the brand is always the wordmark.
5. **Burgundy is for**: italic emphasis spans, CTA button fills, accent bars only. Nothing else competes.
6. **No gradients. No multi-tone shadows. No stock photos. No illustrations.**
7. **Body never below 16px** (cards: ≥ 24px since cards are mobile-first social).
8. **CTAs are pill-shaped** (`border-radius: 999px`) with burgundy fill, white text.
9. **Footer pattern**: `Sundayable.` wordmark left, `topic-slug · NN / NN` muted right.

**Default style**: Custom editorial (NOT neumorphism). Warm cream paper background, generous whitespace, restrained shadows, ink typography. Minimal divider lines instead of card outlines.

**Phone mockup specs (when used):**
- iMessage user (the owner / viewer): `#007AFF` blue, RIGHT-aligned, `border-bottom-right-radius: 6px`
- iMessage other party (Sunday / coach / etc.): `#E9E9EB` gray, LEFT-aligned, `border-bottom-left-radius: 6px`
- Sunday avatar (when shown): `#800020` burgundy circle with cream "S" (official monogram SVG in the brand kit)

**Operator profile series — fixed closing card (Sundayable IG @sundayable.ai):**

When building IG profile cards on iconic salespeople / operators (Tom Ferry, Joe Girard, future
ones), the last card is ALWAYS this exact CTA, industry-unspecific:

- Hero: `Sales,decoded.`
- Lead: `Sundayable studies the operators who built modern sales. The math, the scripts, the discipline. Follow for more.`
- CTA button: `Follow @sundayable.ai` linking to `https://instagram.com/sundayable.ai`
- Background: dark ink (`var(--ink)`)
- Italic emphasis color: `#FFB6C1` (lighter pink for contrast on dark)

**Never use industry-specific language** ("real estate sales", "car sales", etc.) in this
closing because the same closing must work across operators from different industries
(Tom Ferry = real estate, Joe Girard = cars, etc.). One-off campaigns (skill launches,
product announcements) can have custom closings.

### Custom Brand

When the user specifies a brand not in the presets, collect:
1. **Brand name** and **account handle**
2. **Footer text**
3. **Color palette** (at minimum: primary, accent, background)
4. **Tone description** (1-2 sentences)
5. **Content domain/topic focus**
6. **Language** (Korean, English, etc.)
7. **CTA button text**
8. **Logo** (optional -- file path or "none")

Use provided values and fill reasonable defaults for anything not specified.

---

## Step 0: Brand & Topic Confirmation

Determine the brand and topic. If the user's message makes both clear, confirm and proceed.
Otherwise ask via AskUserQuestion:

1. **Brand** -- Which brand template? (CREAL / Red Seal Pro / custom)
2. **Topic** -- What specific subject?
3. **Purpose** -- What's the main goal? (저장/공유 유도 / 팔로워 증가 / 교육 / 브랜드 신뢰)

Optionally check:
4. **Card count preference** -- 짧게 5-7장 / 일반 8-12장 / 깊이 있게 13-19장
5. **Must-include or must-avoid** -- 특정 서비스, 통계, 금지 표현 등

Don't over-interview. Once brand + topic are clear, move to research quickly.

---

## Step 1: Deep Research

Once you have the user's input, do thorough web research. This is the most important step --
the quality of your research directly determines whether the card news is worth saving or just
looks nice but says nothing.

### What to search for (5-10 searches)

- Key statistics and recent numbers
- Latest trends and market changes
- Comparable data points for before/after or vs. comparisons
- Visualizable data (percentages, growth rates, rankings)
- Real examples or quotable insights
- Source-backed facts (not vague claims)

### For general/beginner audiences, also find

- **Empathy hooks**: why people struggle, common misconceptions, relatable frustrations
- **Shock points**: surprising stats that flip assumptions
- **Success stories**: ordinary people who got results (non-experts, side-hustlers, beginners)
- **Low barrier evidence**: free tools exist, low cost, quick first results

### Organize your research

After researching, compile:

```
Topic summary (1 line)
Key data points (5-8)
Chart-ready data (numbers that can become visuals)
Memorable example or quote
Reader empathy points (3)
Shock stat (1-2)
Key takeaways (3)
```

### Show the draft plan before designing

Present to the user:
- Proposed card flow (which cards cover what)
- Key messages per card
- Main data points you'll use
- Expected card count

Wait for approval before proceeding to design. This prevents expensive rework.

---

## Step 1.5: Hooking Strategy

The first 1-2 cards decide whether anyone reads the rest. Design them strategically.

### Reader persona (quick sketch)

Think about:
- What's their situation/job?
- What problem are they dealing with?
- What scares them most about this topic?
- What result do they want?

### Cover card (Card 1) must do three things simultaneously

1. **Stop the scroll** -- a bold statement or surprising number
2. **Communicate the topic instantly** -- no ambiguity
3. **Hint at value** -- why should I keep reading?

### Card 2 answers "Why should I care?"

- Name the reader's problem clearly
- Show what they'll gain from reading
- Build trust (data-backed, not hype)

### Hooking styles to choose from

- **Info-shock**: lead with a surprising number or counterintuitive fact
- **Empathy**: lead with the reader's frustration or situation
- **Success story**: lead with a relatable person's result

---

## Step 2: Design System

Choose one of two base styles based on the brand mood and topic:

### Style A: Light Neumorphism

Best for: bright/friendly brands, beginner audiences, readability-first, Instagram-native feel.
Features: light background, soft shadows for depth, high readability, approachable feel.

### Style B: Dark Neumorphism

Best for: tech/IT feel, premium brands, immersive experience, high-contrast data display.
Features: dark background, sophisticated atmosphere, numbers and highlights pop harder.

### Bento Grid Layout

Inside each card, use a bento grid approach -- information blocks of varying sizes arranged
together so cards feel dynamic, not like a boring slide deck.

The key balance: cards should share the same design language but vary enough in internal
layout that scrolling through them feels engaging, not repetitive.

---

## Step 3: Card Flow Design

Card count is flexible (5-19 cards) based on how much good content you have from research.

### Recommended flow

1. **Hook cover** -- stop the scroll
2. **Problem/empathy** -- why this matters to you
3. **Shock data** -- key evidence
4. **Background** -- context that makes the data meaningful
5. **Solution/method** -- what to actually do
6. **Real example** -- proof it works
7. **Common mistakes** -- what to avoid
8. **Key tips** -- actionable advice
9. **Summary** -- core takeaways in one card
10. **CTA** -- follow, save, share, comment

### CTA card (last card) design rules

The CTA card is the final card that encourages follow/save/share. Follow these rules strictly:

1. **Follow button text**: Use the brand's CTA button text from the Brand Templates section
2. **Center alignment**: The follow button and all CTA content must be **centered** horizontally
3. **Visibility**: Section headers must have strong contrast against the background.
   Never use a light/faded color that blends into the background.
4. **Button style**: Brand accent color background with contrasting text, rounded corners,
   centered in the card. Make it visually prominent.
5. **Layout**: Center all elements vertically and horizontally. Don't left-align the button
   while centering other text -- everything should be consistently centered.

For shorter card news, compress the middle. For longer ones, expand with more data/examples.

### One message per card

Each card should communicate exactly one key point. If you catch yourself putting 2-3 ideas on
one card, split them. Cards are meant to be swiped through quickly.

---

## Step 4: Data Visualization

For stable PNG rendering, do NOT use external chart libraries like Chart.js or canvas-based tools.
They break during PNG capture.

### Allowed methods

- Inline SVG
- HTML/CSS div-based charts (width percentages, flexbox bars, etc.)

### Recommended chart types (mix at least 3 different types)

- Donut charts (SVG)
- Bar charts (CSS divs)
- Comparison bars (side-by-side CSS)
- Progress bars
- Ratio cards (big number + label)
- Number counter blocks

### Visualization checklist

- Numbers in the chart match the text
- Percentages add up correctly
- Sources are mentioned naturally in context when needed
- No card has too many charts crammed together

---

## Step 5: HTML Generation

Generate a single HTML file containing all cards. This is the core deliverable.

### Critical rules for Cowork compatibility

These rules ensure the card news displays correctly in Claude's preview AND exports cleanly as PNG:

**Rule 1: Static HTML only for cards.**
Every `` must exist directly in the ``. Never generate cards with JavaScript.
JS-generated cards won't show in Cowork preview.

**Rule 2: JavaScript is only for the download button.**
No JS for card rendering. Only for PNG capture and ZIP download.

**Rule 3: Use Pretendard font via CDN.**

Pretendard is the designated brand font. Load it via CDN `` tag in the HTML ``:

```html

```

Then set the font stack and Korean text rules:

```css
:root {
  --font-main: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo',
               'Malgun Gothic', 'NanumGothic', sans-serif;
}

* {
  word-break: keep-all;
  overflow-wrap: break-word;
}
```

`word-break: keep-all` is essential for Korean. Without it, the browser breaks lines in the
middle of words (character by character), which looks broken. `keep-all` forces line breaks
only at spaces, keeping Korean phrases intact.

This CSS-only `` tag works in Cowork preview (unlike JS-based font loading).
For PNG capture, inline the font in the download JS to ensure it embeds in the PNG output.

**Rule 4: Deliver the HTML file directly.**
No separate viewer files. One self-contained HTML file in the client's project folder.

**Rule 5: Inline ALL images as base64 data URIs.**

Never reference external images via relative path or absolute URL — they break during
`dom-to-image-more` PNG capture due to file:// CORS restrictions and resource loading races.

**Always do this:**
1. Resize source

…

## Source & license

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

- **Author:** [crealwork](https://github.com/crealwork)
- **Source:** [crealwork/ai-marketing-kit](https://github.com/crealwork/ai-marketing-kit)
- **License:** MIT

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:** yes
- **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-crealwork-ai-marketing-kit-carousel-generator
- Seller: https://agentstack.voostack.com/s/crealwork
- 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%.