Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Content Creation
Article to Infographic
Transform articles, blog posts, reports, or any text content into visually stunning, self-contained HTML infographics. Use when the user wants to convert tex...
skill openclawclawhub Free
Transform articles, blog posts, reports, or any text content into visually stunning, self-contained HTML infographics. Use when the user wants to convert tex...
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- Skills/article-to-infographic-README.md, SKILL.md, skill.json, references/illustrations-guide.md, references/style-presets.md, scripts/html_to_png.py
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- Fengsh0923
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
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) Export to PNG if selected in Step 3 Deliver the final output
Confirmation Flow Summary (For AI Reference)
When executing this skill, follow this EXACT sequence: PhaseStepActionUser Confirmation Required1Content AcquisitionGet article URL/file/textโ No2Content AnalysisExtract info, classify typeโ No2.5Step 1Present outline tableโ MUST CONFIRM3aStep 2aPresent layout optionsโ MUST CONFIRM3bStep 2bPresent style optionsโ MUST CONFIRM3cStep 2cPresent illustration optionsโ MUST CONFIRM4Step 3Present output format optionsโ MUST CONFIRM5GenerationCreate HTMLโ Automatic6DeliveryPresent resultsโ Automatic7PNG ExportIf 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: Title and subtitle -- Main topic and secondary context Key statistics -- Numbers, percentages, data points Key points -- 4-8 most important takeaways Quotes -- Notable statements Comparisons -- Before/after, pros/cons, A vs B Sequential steps -- Process flows, timelines, chronological events Categories -- Natural groupings Entities -- People, organizations, places Classify the best infographic type: Content SignalInfographic TypeDates, milestones, chronological eventsTimelineNumbers, percentages, survey dataStatistics DashboardA vs B, pros/cons, before/afterComparisonStep-by-step, how-to, tutorialProcess FlowMultiple independent tips/factsListicle / Card GridMixed content typesMagazine / 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: | Block | Content | Notes | |---|---|---| | Header | Title + subtitle | Top section | | Hero Stats (3) | [stat1] / [stat2] / [stat3] | Key data highlights | | ... | ... | ... | DO NOT proceed until user explicitly confirms. Using AskUserQuestion: Header: "Step 1/3: Outline Confirmation" Question: "Please review the outline above with [N] blocks. Confirm to proceed or request changes:" Options: "โ Outline confirmed - proceed to style selection" -- ONLY THEN go to Phase 3 "๐ Need adjustments" -- User specifies changes (add/remove/modify blocks), then RE-CONFIRM "๐ Simplify to core blocks" -- Auto-trim to core blocks only, then RE-CONFIRM Hard rule: If user chooses adjustments, update the outline and return to this same confirmation step. Do NOT proceed to Phase 3 until "โ Outline confirmed" is selected.
Phase 3: Step 2 - Style Selection (BLOCKING)
โ ๏ธ CRITICAL: Must get explicit user confirmation for BOTH layout AND style before proceeding to Phase 4. This phase requires TWO separate confirmations:
Step 2a: Layout Selection (BLOCKING)
Using AskUserQuestion: Header: "Step 2a/3: Layout Selection" Question: "Based on your article, I recommend a [detected type] layout. Confirm your choice:" Options: "โ [detected type] - recommended" "๐ Statistics Dashboard" "๐ Timeline" "โ๏ธ Comparison" "๐ Process Flow" "๐ Listicle / Card Grid" "๐ Magazine / Editorial" STOP HERE. Wait for user selection. Do NOT show style options yet.
Step 2b: Style Selection (BLOCKING)
ONLY after layout is confirmed, present style options: Using AskUserQuestion: Header: "Step 2b/3: Visual Style Selection" Question: "What visual style for the [confirmed layout] infographic?" Options (show 4-5 most relevant): Standard Styles: "๐จ Bold & Vibrant" -- High contrast, saturated colors, strong visual impact "๐ฟ Clean & Minimal" -- Whitespace, subtle colors, elegant typography "๐ Dark & Techy" -- Dark backgrounds, neon accents, modern feel "๐ฐ Warm & Editorial" -- Magazine-style, warm tones, serif typography Premium Styles: "๐ Sci-fi HUD" -- Cyberpunk terminal, particle network, neon glow "๐ Premium Magazine" -- Luxury editorial, massive serif typography "๐ฎ Glassmorphism Aurora" -- Frosted glass, animated aurora blobs STOP HERE. Wait for user selection.
Step 2c: Illustrations (optional, but ASK)
Using AskUserQuestion: Header: "Step 2c/3: Illustrations (Optional)" Question: "Add illustrations to the [confirmed style] infographic?" Options: "๐ซ No illustrations - text and data only" "๐น Decorative icons - small SVG icons next to headings" "๐ค Character illustrations - full SVG characters from open-source libraries" ONLY after all 2aโ2bโ2c are confirmed, proceed to Phase 4. For detailed color palettes and font pairings per style, see references/style-presets.md.
Phase 4: Step 3 - Output Format Confirmation (BLOCKING)
โ ๏ธ CRITICAL: Must get explicit user confirmation for output format BEFORE generating anything. Using AskUserQuestion: Header: "Step 3/3: Output Format" Question: "How would you like to receive the [confirmed style] infographic?" Options: "๐ HTML only - single file, opens in browser" "๐ผ๏ธ HTML + PNG - include high-res image export" "๐ฆ Both formats - explicit delivery of both files" ONLY after output format is confirmed, proceed to Phase 5 (Generation).
HTML Architecture
Single self-contained HTML file: <!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>
Design Rules
Typography: Distinctive Google Fonts or Fontshare fonts -- NEVER Inter, Roboto, Arial, or system fonts Display font for headings, clean font for body Responsive sizing with clamp() Color: CSS custom properties for entire palette Max 3-4 colors: one dominant, one accent, one-two neutrals WCAG AA contrast for readability Layout: CSS Grid for overall structure, Flexbox for components Max-width 1200px, centered Compact spacing: Use 2-3rem between sections, NOT 5rem+. Infographics should feel dense and information-rich, not stretched out. Header padding: 2-2.5rem. Section padding: 2-3rem. Grid gaps: 2-2.5rem. Responsive: stack on mobile, multi-column on desktop Data Visualization: Pure CSS for simple charts (bar via width%, pie via conic-gradient) Inline SVG for complex shapes Animate numbers with counter effect (Intersection Observer) Always label data clearly Animations: Intersection Observer triggers .visible class Stagger children with animation-delay Subtle fade + translateY baseline prefers-reduced-motion media query required Print: @media print rules: linearize layout, remove animations, ensure readability Appropriate page breaks between sections
Layout Patterns
Timeline: Vertical center line, alternating left/right entries Date badges on line, content cards offset Mobile: single-column stack Statistics Dashboard: Hero stat at top (large number + context) Grid of stat cards (2-3 columns) CSS bar/pie charts where appropriate Counter animation on scroll Comparison: Side-by-side columns with central divider Matching rows, color-coded sides Mobile: vertical stack with labels Process Flow: Numbered steps with connecting lines/arrows Icon + title + description per step Progress indicator Listicle / Card Grid: Numbered/icon cards in responsive grid (2-3 cols desktop, 1 mobile) Each card: icon/number + title + description Hover effects Magazine / Editorial: Mix of full-width, card grids, pull quotes, stat highlights Alternate dense and spacious sections Strong typographic hierarchy
Anti-Patterns -- NEVER
Purple gradient on white background Generic card layouts with no visual character Font Awesome or emoji spam as decoration Flat, lifeless color schemes Walls of small text (defeats infographic purpose) Charts without labels Cookie-cutter layouts
Phase 6: Delivery
All 3 confirmation steps completed. Generating final output... Write the HTML file and present a summary: โ 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. Generation is complete. No further confirmations needed.
Edge Cases
Short articles (< 200 words): Compact single-section, 3-5 key points as cards. Long articles (> 3000 words): Summarize to 6-10 key sections max. Prioritize data and takeaways. No statistics: Focus on quotes, process flows, or listicle. Use icons instead of charts. Technical/code-heavy: Code snippet sections, architecture diagrams with CSS shapes, conceptual flow. Non-English content: Set lang attribute correctly on <html>. Use appropriate fonts for CJK, RTL, etc.
Phase 7: PNG Export (if selected in Step 3)
After generating the HTML, if PNG was selected in Step 3, proceed with export:
Method A: Browser tool (preferred in Claude Code / HappyCapy)
If a browser CLI tool is available: Start a local HTTP server serving the HTML file Navigate browser to the page Force all .reveal elements to visible state (skip scroll animations) Force all bar fills and counters to final values Take a full-page screenshot Close browser // 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; });
Method B: Playwright script (standalone environments)
Run the bundled script: python3 scripts/html_to_png.py infographic.html output.png --width 1200 --scale 2 The script uses headless Chromium via Playwright. It auto-installs dependencies if needed. Arguments: --width : viewport width in px (default 1200) --scale : HiDPI scale factor (default 2, produces 2400px wide image)
When to export PNG
Ask the user after HTML delivery: Header: "Export" Question: "Want a PNG image export as well?" Options: "Yes, export PNG" -- Run export "HTML only is fine" -- Skip
OpenClaw / Non-Interactive Adaptation
When deploying to environments without interactive question-answer support (e.g., OpenClaw, API-only setups), the skill operates in parameterized mode where ALL options must be specified upfront. โ ๏ธ CRITICAL: In parameterized mode, you MUST provide ALL confirmations in a single prompt because the system cannot ask follow-up questions.
Parameterized Invocation (Single Prompt)
Users must specify ALL 3 confirmation steps in one prompt: 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] Example complete prompt: 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
Parameter Reference
Style options: bold-vibrant -- High contrast, saturated colors clean-minimal -- Whitespace, subtle colors, serif typography dark-techy -- Dark background, neon accents warm-editorial -- Magazine-style, warm tones scifi-hud -- Cyberpunk terminal, particle network, neon glow (premium) premium-magazine -- Luxury editorial, massive serif, cream/charcoal/vermillion (premium) glassmorphism -- Frosted glass, aurora blobs, Apple-inspired depth (premium) Layout options: timeline -- Chronological events statistics -- Data dashboard comparison -- Side-by-side process -- Step-by-step flow listicle -- Card grid magazine -- Mixed editorial (default for complex articles) auto -- Let the skill decide based on content analysis Outline adjustments (natural language): "remove [block name]" "add [block description]" "replace [block] with [new content]" "simplify" / "expand" Export options: html -- HTML only (default) png -- HTML + PNG export both -- Explicitly output both
Fallback Behavior
If no style/layout is specified and AskUserQuestion is not available, use these defaults: Layout: auto (detect from content) Style: dark-techy for technical content, warm-editorial for narrative content, bold-vibrant for data-heavy content Export: html only
Font CDN for China Deployment
When deployed behind the GFW, replace Google Fonts CDN: <!-- 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"> Alternatively, for CJK-heavy content, use system fonts as fallback: --font-heading: 'Noto Serif SC', 'STSong', 'SimSun', serif; --font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
Category context
Writing, remixing, publishing, visual generation, and marketing content production.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
4 Docs1 Scripts1 Config
- SKILL.md
- references/illustrations-guide.md
- references/style-presets.md
- Skills/article-to-infographic-README.md
- scripts/html_to_png.py
- skill.json