# Founddream Editorial Card Generator Skill Editorial Card Generator Skill

> Editorial Style Informational Poster Generator

- Skill: `tomevault-io/founddream-editorial-card-generator-skill-editorial-card-gen` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/founddream-editorial-card-generator-skill-editorial-card-gen`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/founddream-editorial-card-generator-skill-editorial-card-gen/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/founddream-editorial-card-generator-skill-editorial-card-gen

---


# Editorial Style Informational Poster Generator

## Task

Transform user-provided text content into a set of 3-6 high-aesthetic, magazine-style HTML5 informational posters (adaptively based on content).

## Design Specifications

### Core Style
- **Style**: Modern Editorial + Swiss Style (Swiss Internationalism)
- **Visual**: Order, high contrast, large typography, print media texture
- **Size**: Strictly locked to width: 600px, height: 800px (3:4 ratio)

### Color Scheme
- **Bg (Paper)**: #f2efe9 (off-white/warm gray)
- **Text (Ink)**: #1a1a1a (dark gray)
- **Accent (Emphasis)**: #d95e00 (Hermès orange) - allowed to fine-tune based on content theme
- **Visual Rhythm**: Cards should have "light-light-dark-light" or "light-dark-light" rhythmic variation

### Font Stack (CDN)
Include Google Fonts in HTML Head:
```html
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700;900&family=Noto+Sans+SC:wght@400;500;700&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
```

### Texture Requirements
- **SVG Noise**: Global overlay of feTurbulence noise with opacity 0.05~0.08, blend mode using multiply
- **Shadow**: Cards need unified deep shadow (0 25px 80px rgba(0, 0, 0, 0.4)), creating floating effect

## Pagination Logic

Analyze the word count and logical structure of the [Input Content] to automatically determine the number of cards (usually 3-6):

### Card 1: The Cover
- **Content**: Extracted main title + very short subtitle/tagline
- **Design**: Huge font size, minimalist, visual impact first
- **Key Elements**: Extra-large numbers/percentages, short powerful titles

### Card 2 ~ N-1: The Content
- **Splitting Principle**: Don't crowd! One core point/one chapter = one card
- **List Content**: Use "list layout" (01/02/03)
- **Deep Analysis**: Use "image-text mixed layout" (left text right decoration, or top text bottom summary)
- **Key Emphasis**: Must include a **Dark Mode card** to showcase core data, quotes, or most important concepts

### Card N: The Outro
- **Content**: Concluding statement, CTA (Call to Action) or simple closing
- **Design**: More whitespace, steady ending

## Output Requirements

### HTML Structure
1. Output a single HTML file containing all CSS/JS
2. Use Tailwind CSS + FontAwesome (CDN)
3. Layout: Use flex-wrap to arrange all cards horizontally
4. **CSS must add `flex-shrink: 0` to cards to prevent compression deformation**

### Required Features
- Integrate html2canvas library (CDN: `https://html2canvas.hertzen.com/dist/html2canvas.min.js`)
- Provide "Export All Cards" button:
  - Position: Fixed positioning in top-right corner
  - Style: Orange button with download icon
  - Click to export each card as high-definition PNG (2x resolution)
  - Show export progress indicator
  - File naming format: `{topic}-card-{number}.png`

## Implementation Steps

1. **Analyze Content**: Extract key information, data points, core arguments
2. **Determine Card Count**: Decide 3-6 cards based on content length and structure
3. **Design Each Card**:
   - Card 1: Cover, highlight most shocking numbers/titles
   - Card 2-N-1: Content expansion, at least one dark card for data
   - Card N: Summary or question
4. **Write HTML**:
   - Import Google Fonts, Tailwind CSS, FontAwesome, html2canvas
   - Write complete CSS (including SVG noise, card styles, export button)
   - Implement all card HTML structures
   - Add JavaScript code for export functionality
5. **Output File**: Save as `index.html` or specified path

## Technical Reference

### SVG Noise Implementation
```html
<svg style="position: absolute; width: 0; height: 0">
  <filter id="noise">
    <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/>
  </filter>
</svg>
<!-- Apply in card -->
<svg style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: url(#noise); opacity: 0.06;"></svg>
```

### Export Button Style
```css
.export-btn {
  position: fixed;
  top: 30px;
  right: 30px;
  background: #d95e00;
  color: #f2efe9;
  border: none;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(217, 94, 0, 0.4);
  transition: all 0.3s ease;
  z-index: 1000;
}
```

## Notes

- Maintain visual simplicity and elegance, avoid over-decoration
- Ensure text is clear and readable, with obvious font size contrast
- Control opacity and contrast for dark cards
- Export functionality must be stable and reliable, avoid memory leaks
- Code should be standardized and clean, easy to modify later
- Card content should not be crowded; whitespace is the source of elegance

---
> Source: [FoundDream/editorial-card-generator-skill](https://github.com/FoundDream/editorial-card-generator-skill) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-25 -->