article-to-infographic

Files (7)

• SKILL.md
• article-to-infographic-README.md · Skills/
• _meta.json
• illustrations-guide.md · references/
• style-presets.md · references/
• html_to_png.py · scripts/
• skill.json

SKILL.md (first lines)

# Article to Infographic

Transform any article or text content into a visually compelling, self-contained HTML infographic. Output is a single HTML file with inline CSS/JS -- zero dependencies, opens in any browser, print-ready for PDF export.

## Core Philosophy

1. **Content-First** -- Analyze the article before choosing layout.
2. **Smart Layout** -- Match infographic type to content type automatically.
3. **Distinctive Design** -- No generic AI aesthetics. Every infographic feels custom-crafted.
4. **Zero Dependencies** -- Single HTML file with inline CSS/JS.
5. **Print-Ready** -- Include print media queries for clean PDF export.

---

## Workflow Overview

**Strict 3-Step Confirmation Process:**

```
Step 1: Outline Confirmation (BLOCKING)
   ↓ User must confirm
Step 2a: Layout Selection (BLOCKING)
   ↓ User must confirm
Step 2b: Style Selection (BLOCKING)
   ↓ User must confirm
Step 2c: Illustrations (BLOCKING)
   ↓ User must confirm
Step 3: Output Format (BLOCKING)
   ↓ User must confirm
Generation Phase (automatic)
```

**CRITICAL RULE**: Each step requires explicit user confirmation before proceeding. Do NOT batch confirmations. Do NOT proceed to next step until current step is confirmed.

---

## Detailed Workflow

1. Acquire and analyze article content
2. Extract key information and classify content type
3. **Step 1: Present outline → Get explicit confirmation**
4. **Step 2a: Present layout options → Get explicit confirmation**
5. **Step 2b: Present style options → Get explicit confirmation**
6. **Step 2c: Present illustration options → Get explicit confirmation**
7. **Step 3: Present output format options → Get explicit confirmation**
8. Generate the HTML infographic (only after all confirmations)
9. Export to PNG if selected in Step 3
10. Deliver the final output

## Confirmation Flow Summary (For AI Reference)

When executing this skill, follow this EXACT sequence:

| Phase | Step | Action | User Confirmation Required |
|-------|------|--------|---------------------------|
| 1 | Content Acquisition | Get article URL/file/text | ❌ No |
| 2 | Content Analysis | Extract info, classify type | ❌ No |
| 2.5 | **Step 1** | Present outline table | ✅ **MUST CONFIRM** |
| 3a | **Step 2a** | Present layout options | ✅ **MUST CONFIRM** |
| 3b | **Step 2b** | Present style options | ✅ **MUST CONFIRM** |
| 3c | **Step 2c** | Present illustration options | ✅ **MUST CONFIRM** |
| 4 | **Step 3** | Present output format options | ✅ **MUST CONFIRM** |
| 5 | Generation | Create HTML | ❌ Automatic |
| 6 | Delivery | Present results | ❌ Automatic |
| 7 | PNG Export | If selected in Step 3 | ❌ Automatic |

**FORBIDDEN ACTIONS:**
- ❌ Never combine Step 1 + Step 2 confirmations
- ❌ Never combine Step 2a + 2b + 2c into one question
- ❌ Never combine Step 2 + Step 3 confirmations
- ❌ Never proceed to generation without all 3 steps confirmed

---

## Phase 1: Content Acquisition

Determine the content source:

- **URL** -- Use WebFetch to retrieve article content
- **File** -- Read the file directly
- **Pasted text** -- Use as-is

If content is ambiguous or too short, ask for clarification.

---

## Phase 2: Content Analysis

Extract from the article:

1. **Title and subtitle** -- Main topic and secondary context
2. **Key statistics** -- Numbers, percentages, data points
3. **Key points** -- 4-8 most important takeaways
4. **Quotes** -- Notable statements
5. **Comparisons** -- Before/after, pros/cons, A vs B
6. **Sequential steps** -- Process flows, timelines, chronological events
7. **Categories** -- Natural groupings
8. **Entities** -- People, organizations, places

Classify the best infographic type:

| Content Signal | Infographic Type |
|---|---|
| Dates, milestones, chronological events | **Timeline** |
| Numbers, percentages, survey data | **Statistics Dashboard** |
| A vs B, pros/cons, before/after | **Comparison** |
| Step-by-step, how-to, tutorial | **Process Flow** |
| Multiple independent tips/facts | **Listicle / Card Grid** |
| Mixed content types | **Magazine / Editorial** |

---

## Phase 2.5: Step 1 - Outline Confirmation (BLOCKING)

**⚠️ CRITICAL: Must get explicit user confirmation before proceeding to Phase 3.**

After content analysis, present the user with a structured outline in table form:

```

From LeoYeAI/openclaw-master-skills, MIT.

More from LeoYeAI/openclaw-master-skills