article-to-infographic

LeoYeAI/openclaw-master-skillsData VisualizationAudit pendingSnapshot 5308f7c77021

Summary

This source did not publish a separate summary. Review SKILL.md before using the skill.

SKILL.md

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

Content-First -- Analyze the article before choosing layout.
Smart Layout -- Match infographic type to content type automatically.
Distinctive Design -- No generic AI aesthetics. Every infographic feels custom-crafted.
Zero Dependencies -- Single HTML file with inline CSS/JS.
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

Acquire and analyze article content
Extract key information and classify content type
Step 1: Present outline → Get explicit confirmation
Step 2a: Present layout options → Get explicit confirmation
Step 2b: Present style options → Get explicit confirmation
Step 2c: Present illustration options → Get explicit confirmation
Step 3: Present output format options → Get explicit confirmation
Generate the HTML infographic (only after all confirmations)

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

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

| Block | Content | Notes |
|---|---|---|
| Header | Title + subtitle | Top section |
| Hero Stats (3) | [stat1] / [stat2] / [stat3] | Key data highlights |
| ... | ... | ... |

<!DOCTYPE html>
<html lang="[content language]">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Infographic Title]</title>
    <link rel="stylesheet" href="[Google Fonts / Fontshare URL]">
    <style>
        :root {
            --bg-primary: ...; --bg-secondary: ...;
            --text-primary: ...; --text-secondary: ...;
            --accent-1: ...; --accent-2: ...;
            --font-display: ...; --font-body: ...;
        }
        /* Layout, components, animations */
        @media print { /* linearize, remove animations */ }
        @media (prefers-reduced-motion: reduce) { /* disable animations */ }
    </style>
</head>
<body>
    <article class="infographic">
        <header class="infographic-header">...</header>
        <main class="infographic-body">...</main>
        <footer class="infographic-footer">...</footer>
    </article>
    <script>/* Intersection Observer animations, counter effects */</script>
</body>
</html>

✅ Infographic generated!

📄 File: [filename].html
📐 Layout: [confirmed layout]
🎨 Style: [confirmed style]
🖼️ Illustrations: [confirmed option]
📦 Output: [confirmed format]
📊 Sections: [count]

Open in browser to view. Ctrl+P / Cmd+P to save as PDF.

// JS to inject before screenshot:
document.querySelectorAll('.reveal').forEach(el => {
    el.classList.add('visible');
    el.style.opacity = '1';
    el.style.transform = 'none';
});
document.querySelectorAll('.ba-fill, .bar-fill').forEach(bar => {
    const w = bar.dataset.width;
    if (w) bar.style.width = w + '%';
});
document.querySelectorAll('[data-counter]').forEach(el => {
    const target = el.dataset.counter;
    const suffix = el.dataset.suffix || '';
    el.textContent = parseInt(target).toLocaleString() + suffix;
});

python3 scripts/html_to_png.py infographic.html output.png --width 1200 --scale 2

Generate an infographic from [article source].

STEP 1 - OUTLINE:
[Provide your preferred outline structure, or "use auto-generated outline"]

STEP 2 - STYLE:
Layout: [timeline|statistics|comparison|process|listicle|magazine]
Style: [bold-vibrant|clean-minimal|dark-techy|warm-editorial|scifi-hud|premium-magazine|glassmorphism]
Illustrations: [none|icons|characters]

STEP 3 - OUTPUT:
Format: [html|png|both]

Generate an infographic from https://example.com/article.

STEP 1: Use auto-generated outline

STEP 2: 
Layout: timeline
Style: dark-techy
Illustrations: icons

STEP 3:
Format: both

<!-- Instead of: -->
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">

<!-- Use mirror: -->
<link href="https://fonts.loli.net/css2?family=..." rel="stylesheet">
<!-- Or use: -->
<link href="https://fonts.font.im/css2?family=..." rel="stylesheet">

--font-heading: 'Noto Serif SC', 'STSong', 'SimSun', serif;
--font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

article-to-infographic

Summary

SKILL.md

Article to Infographic

Core Philosophy

Workflow Overview

Detailed Workflow

Confirmation Flow Summary (For AI Reference)

Phase 1: Content Acquisition

Phase 2: Content Analysis

Phase 2.5: Step 1 - Outline Confirmation (BLOCKING)

Phase 3: Step 2 - Style Selection (BLOCKING)

Step 2a: Layout Selection (BLOCKING)

Step 2b: Style Selection (BLOCKING)

Step 2c: Illustrations (optional, but ASK)

Phase 4: Step 3 - Output Format Confirmation (BLOCKING)

Phase 5: Generate Infographic

HTML Architecture

Design Rules

Layout Patterns

Anti-Patterns -- NEVER

Phase 6: Delivery

Edge Cases

Phase 7: PNG Export (if selected in Step 3)

Method A: Browser tool (preferred in Claude Code / HappyCapy)

Method B: Playwright script (standalone environments)

When to export PNG

OpenClaw / Non-Interactive Adaptation

Parameterized Invocation (Single Prompt)

Parameter Reference

Fallback Behavior

Font CDN for China Deployment

Related skills