import type { DesignSkill } from "./design-skill.js";
export const socialCarousel: DesignSkill = {
name: "social-carousel",
scenario: "marketing",
description:
"Social media carousel. Multiple slides in a single HTML file with horizontal scroll, designed for Instagram/LinkedIn/Twitter export.",
outputKind: "html",
workflow: `# Social Carousel Skill
Produce a social media carousel as a single HTML file. 1080×1080 (Instagram) or 1200×628 (LinkedIn/Twitter), horizontal scroll, export-friendly.
## Phase 0 — Pre-flight
1. Read the design system.
2. Determine: platform (instagram=1080×1080, linkedin=1200×627), number of cards (3-10), topic.
3. Vocalize: "I'll create a [N]-card carousel for [platform] about [topic]."
## Phase 1 — Shell
Create \`carousel.html\`:
\`\`\`html
Carousel
\`\`\`
## Phase 2 — Card Layouts
### Title Card (first)
A bold, eye-catching title. Centered, large typography, accent color background or dark solid.
\`\`\`css
.card-title { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; background: var(--color-accent); color: #fff; }
.card-title .number { font-size: 14px; opacity: 0.7; letter-spacing: 0.1em; text-transform: uppercase; margin-top: auto; }
.card-title h1 { font-size: 64px; font-weight: 800; line-height: 1.1; }
.card-title p { font-size: 24px; opacity: 0.9; margin-top: 16px; max-width: 600px; }
\`\`\`
### Content Card
\`\`\`css
.card-content { flex: 1; display: flex; flex-direction: column; padding: 64px; }
.card-content h2 { font-size: 42px; font-weight: 700; margin-bottom: 24px; }
.card-content p { font-size: 24px; line-height: 1.6; color: var(--color-text-secondary); }
.card-content .number { font-size: 14px; color: var(--color-text-secondary); margin-top: auto; }
\`\`\`
### Stat Card
\`\`\`css
.card-stat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; }
.card-stat .stat-value { font-size: 120px; font-weight: 800; color: var(--color-accent); line-height: 1; }
.card-stat .stat-label { font-size: 24px; color: var(--color-text-secondary); margin-top: 16px; }
\`\`\`
### Quote Card
\`\`\`css
.card-quote { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; }
.card-quote blockquote { font-size: 36px; font-style: italic; line-height: 1.4; max-width: 700px; }
.card-quote cite { font-size: 20px; color: var(--color-text-secondary); margin-top: 24px; font-style: normal; }
\`\`\`
### CTA Card (last)
\`\`\`css
.card-cta { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; background: var(--color-bg-primary); }
.card-cta h2 { font-size: 48px; font-weight: 700; margin-bottom: 16px; }
.card-cta p { font-size: 24px; color: var(--color-text-secondary); margin-bottom: 32px; }
.card-cta .cta-text { font-size: 28px; font-weight: 600; color: var(--color-accent); }
\`\`\`
## Phase 3 — Content Rules
- Each card has a clear visual hierarchy: big number/headline → supporting text → card number
- Card number shows position (e.g., "1/8") in bottom corner
- Title card grabs attention — use solid accent or dark bg
- Content cards: 30-60 words max
- Stat cards: one big number, one-line label
- Last card: always a CTA or summary with contact/handle
- Consistent padding within cards (64-80px)
- Each card works as a standalone image when screenshot`,
};