article-to-infographic

# 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 |
|-------|------|--------|------...