{
  "schemaVersion": "1.0",
  "item": {
    "slug": "article-to-infographic",
    "name": "Article to Infographic",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/Fengsh0923/article-to-infographic",
    "canonicalUrl": "https://clawhub.ai/Fengsh0923/article-to-infographic",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/article-to-infographic",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=article-to-infographic",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "Skills/article-to-infographic-README.md",
      "SKILL.md",
      "skill.json",
      "references/illustrations-guide.md",
      "references/style-presets.md",
      "scripts/html_to_png.py"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "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."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "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."
        },
        {
          "label": "Upgrade existing",
          "body": "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."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/article-to-infographic"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/article-to-infographic",
    "agentPageUrl": "https://openagent3.xyz/skills/article-to-infographic/agent",
    "manifestUrl": "https://openagent3.xyz/skills/article-to-infographic/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/article-to-infographic/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "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."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "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."
      },
      {
        "label": "Upgrade existing",
        "body": "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."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Article to Infographic",
        "body": "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."
      },
      {
        "title": "Core Philosophy",
        "body": "Content-First -- Analyze the article before choosing layout.\nSmart Layout -- Match infographic type to content type automatically.\nDistinctive Design -- No generic AI aesthetics. Every infographic feels custom-crafted.\nZero Dependencies -- Single HTML file with inline CSS/JS.\nPrint-Ready -- Include print media queries for clean PDF export."
      },
      {
        "title": "Workflow Overview",
        "body": "Strict 3-Step Confirmation Process:\n\nStep 1: Outline Confirmation (BLOCKING)\n   ↓ User must confirm\nStep 2a: Layout Selection (BLOCKING)\n   ↓ User must confirm\nStep 2b: Style Selection (BLOCKING)\n   ↓ User must confirm\nStep 2c: Illustrations (BLOCKING)\n   ↓ User must confirm\nStep 3: Output Format (BLOCKING)\n   ↓ User must confirm\nGeneration Phase (automatic)\n\nCRITICAL RULE: Each step requires explicit user confirmation before proceeding. Do NOT batch confirmations. Do NOT proceed to next step until current step is confirmed."
      },
      {
        "title": "Detailed Workflow",
        "body": "Acquire and analyze article content\nExtract key information and classify content type\nStep 1: Present outline → Get explicit confirmation\nStep 2a: Present layout options → Get explicit confirmation\nStep 2b: Present style options → Get explicit confirmation\nStep 2c: Present illustration options → Get explicit confirmation\nStep 3: Present output format options → Get explicit confirmation\nGenerate the HTML infographic (only after all confirmations)\nExport to PNG if selected in Step 3\nDeliver the final output"
      },
      {
        "title": "Confirmation Flow Summary (For AI Reference)",
        "body": "When executing this skill, follow this EXACT sequence:\n\nPhaseStepActionUser 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\n\nFORBIDDEN ACTIONS:\n\n❌ Never combine Step 1 + Step 2 confirmations\n❌ Never combine Step 2a + 2b + 2c into one question\n❌ Never combine Step 2 + Step 3 confirmations\n❌ Never proceed to generation without all 3 steps confirmed"
      },
      {
        "title": "Phase 1: Content Acquisition",
        "body": "Determine the content source:\n\nURL -- Use WebFetch to retrieve article content\nFile -- Read the file directly\nPasted text -- Use as-is\n\nIf content is ambiguous or too short, ask for clarification."
      },
      {
        "title": "Phase 2: Content Analysis",
        "body": "Extract from the article:\n\nTitle and subtitle -- Main topic and secondary context\nKey statistics -- Numbers, percentages, data points\nKey points -- 4-8 most important takeaways\nQuotes -- Notable statements\nComparisons -- Before/after, pros/cons, A vs B\nSequential steps -- Process flows, timelines, chronological events\nCategories -- Natural groupings\nEntities -- People, organizations, places\n\nClassify the best infographic type:\n\nContent 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"
      },
      {
        "title": "Phase 2.5: Step 1 - Outline Confirmation (BLOCKING)",
        "body": "⚠️ CRITICAL: Must get explicit user confirmation before proceeding to Phase 3.\n\nAfter content analysis, present the user with a structured outline in table form:\n\n| Block | Content | Notes |\n|---|---|---|\n| Header | Title + subtitle | Top section |\n| Hero Stats (3) | [stat1] / [stat2] / [stat3] | Key data highlights |\n| ... | ... | ... |\n\nDO NOT proceed until user explicitly confirms.\n\nUsing AskUserQuestion:\n\nHeader: \"Step 1/3: Outline Confirmation\"\nQuestion: \"Please review the outline above with [N] blocks. Confirm to proceed or request changes:\"\nOptions:\n\n\"✅ Outline confirmed - proceed to style selection\" -- ONLY THEN go to Phase 3\n\"📝 Need adjustments\" -- User specifies changes (add/remove/modify blocks), then RE-CONFIRM\n\"🔄 Simplify to core blocks\" -- Auto-trim to core blocks only, then RE-CONFIRM\n\nHard 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."
      },
      {
        "title": "Phase 3: Step 2 - Style Selection (BLOCKING)",
        "body": "⚠️ CRITICAL: Must get explicit user confirmation for BOTH layout AND style before proceeding to Phase 4.\n\nThis phase requires TWO separate confirmations:"
      },
      {
        "title": "Step 2a: Layout Selection (BLOCKING)",
        "body": "Using AskUserQuestion:\n\nHeader: \"Step 2a/3: Layout Selection\"\nQuestion: \"Based on your article, I recommend a [detected type] layout. Confirm your choice:\"\nOptions:\n\n\"✅ [detected type] - recommended\"\n\"📊 Statistics Dashboard\"\n\"📅 Timeline\"\n\"⚖️ Comparison\"\n\"🔄 Process Flow\"\n\"📝 Listicle / Card Grid\"\n\"📖 Magazine / Editorial\"\n\nSTOP HERE. Wait for user selection. Do NOT show style options yet."
      },
      {
        "title": "Step 2b: Style Selection (BLOCKING)",
        "body": "ONLY after layout is confirmed, present style options:\n\nUsing AskUserQuestion:\n\nHeader: \"Step 2b/3: Visual Style Selection\"\n\n\nQuestion: \"What visual style for the [confirmed layout] infographic?\"\n\n\nOptions (show 4-5 most relevant):\nStandard Styles:\n\n\"🎨 Bold & Vibrant\" -- High contrast, saturated colors, strong visual impact\n\"🌿 Clean & Minimal\" -- Whitespace, subtle colors, elegant typography\n\"🌃 Dark & Techy\" -- Dark backgrounds, neon accents, modern feel\n\"📰 Warm & Editorial\" -- Magazine-style, warm tones, serif typography\n\nPremium Styles:\n\n\"🚀 Sci-fi HUD\" -- Cyberpunk terminal, particle network, neon glow\n\"💎 Premium Magazine\" -- Luxury editorial, massive serif typography\n\"🔮 Glassmorphism Aurora\" -- Frosted glass, animated aurora blobs\n\nSTOP HERE. Wait for user selection."
      },
      {
        "title": "Step 2c: Illustrations (optional, but ASK)",
        "body": "Using AskUserQuestion:\n\nHeader: \"Step 2c/3: Illustrations (Optional)\"\nQuestion: \"Add illustrations to the [confirmed style] infographic?\"\nOptions:\n\n\"🚫 No illustrations - text and data only\"\n\"🔹 Decorative icons - small SVG icons next to headings\"\n\"👤 Character illustrations - full SVG characters from open-source libraries\"\n\nONLY after all 2a→2b→2c are confirmed, proceed to Phase 4.\n\nFor detailed color palettes and font pairings per style, see references/style-presets.md."
      },
      {
        "title": "Phase 4: Step 3 - Output Format Confirmation (BLOCKING)",
        "body": "⚠️ CRITICAL: Must get explicit user confirmation for output format BEFORE generating anything.\n\nUsing AskUserQuestion:\n\nHeader: \"Step 3/3: Output Format\"\nQuestion: \"How would you like to receive the [confirmed style] infographic?\"\nOptions:\n\n\"📄 HTML only - single file, opens in browser\"\n\"🖼️ HTML + PNG - include high-res image export\"\n\"📦 Both formats - explicit delivery of both files\"\n\nONLY after output format is confirmed, proceed to Phase 5 (Generation)."
      },
      {
        "title": "HTML Architecture",
        "body": "Single self-contained HTML file:\n\n<!DOCTYPE html>\n<html lang=\"[content language]\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>[Infographic Title]</title>\n    <link rel=\"stylesheet\" href=\"[Google Fonts / Fontshare URL]\">\n    <style>\n        :root {\n            --bg-primary: ...; --bg-secondary: ...;\n            --text-primary: ...; --text-secondary: ...;\n            --accent-1: ...; --accent-2: ...;\n            --font-display: ...; --font-body: ...;\n        }\n        /* Layout, components, animations */\n        @media print { /* linearize, remove animations */ }\n        @media (prefers-reduced-motion: reduce) { /* disable animations */ }\n    </style>\n</head>\n<body>\n    <article class=\"infographic\">\n        <header class=\"infographic-header\">...</header>\n        <main class=\"infographic-body\">...</main>\n        <footer class=\"infographic-footer\">...</footer>\n    </article>\n    <script>/* Intersection Observer animations, counter effects */</script>\n</body>\n</html>"
      },
      {
        "title": "Design Rules",
        "body": "Typography:\n\nDistinctive Google Fonts or Fontshare fonts -- NEVER Inter, Roboto, Arial, or system fonts\nDisplay font for headings, clean font for body\nResponsive sizing with clamp()\n\nColor:\n\nCSS custom properties for entire palette\nMax 3-4 colors: one dominant, one accent, one-two neutrals\nWCAG AA contrast for readability\n\nLayout:\n\nCSS Grid for overall structure, Flexbox for components\nMax-width 1200px, centered\nCompact 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.\nResponsive: stack on mobile, multi-column on desktop\n\nData Visualization:\n\nPure CSS for simple charts (bar via width%, pie via conic-gradient)\nInline SVG for complex shapes\nAnimate numbers with counter effect (Intersection Observer)\nAlways label data clearly\n\nAnimations:\n\nIntersection Observer triggers .visible class\nStagger children with animation-delay\nSubtle fade + translateY baseline\nprefers-reduced-motion media query required\n\nPrint:\n\n@media print rules: linearize layout, remove animations, ensure readability\nAppropriate page breaks between sections"
      },
      {
        "title": "Layout Patterns",
        "body": "Timeline:\n\nVertical center line, alternating left/right entries\nDate badges on line, content cards offset\nMobile: single-column stack\n\nStatistics Dashboard:\n\nHero stat at top (large number + context)\nGrid of stat cards (2-3 columns)\nCSS bar/pie charts where appropriate\nCounter animation on scroll\n\nComparison:\n\nSide-by-side columns with central divider\nMatching rows, color-coded sides\nMobile: vertical stack with labels\n\nProcess Flow:\n\nNumbered steps with connecting lines/arrows\nIcon + title + description per step\nProgress indicator\n\nListicle / Card Grid:\n\nNumbered/icon cards in responsive grid (2-3 cols desktop, 1 mobile)\nEach card: icon/number + title + description\nHover effects\n\nMagazine / Editorial:\n\nMix of full-width, card grids, pull quotes, stat highlights\nAlternate dense and spacious sections\nStrong typographic hierarchy"
      },
      {
        "title": "Anti-Patterns -- NEVER",
        "body": "Purple gradient on white background\nGeneric card layouts with no visual character\nFont Awesome or emoji spam as decoration\nFlat, lifeless color schemes\nWalls of small text (defeats infographic purpose)\nCharts without labels\nCookie-cutter layouts"
      },
      {
        "title": "Phase 6: Delivery",
        "body": "All 3 confirmation steps completed. Generating final output...\n\nWrite the HTML file and present a summary:\n\n✅ Infographic generated!\n\n📄 File: [filename].html\n📐 Layout: [confirmed layout]\n🎨 Style: [confirmed style]\n🖼️ Illustrations: [confirmed option]\n📦 Output: [confirmed format]\n📊 Sections: [count]\n\nOpen in browser to view. Ctrl+P / Cmd+P to save as PDF.\n\nGeneration is complete. No further confirmations needed."
      },
      {
        "title": "Edge Cases",
        "body": "Short articles (< 200 words): Compact single-section, 3-5 key points as cards.\n\nLong articles (> 3000 words): Summarize to 6-10 key sections max. Prioritize data and takeaways.\n\nNo statistics: Focus on quotes, process flows, or listicle. Use icons instead of charts.\n\nTechnical/code-heavy: Code snippet sections, architecture diagrams with CSS shapes, conceptual flow.\n\nNon-English content: Set lang attribute correctly on <html>. Use appropriate fonts for CJK, RTL, etc."
      },
      {
        "title": "Phase 7: PNG Export (if selected in Step 3)",
        "body": "After generating the HTML, if PNG was selected in Step 3, proceed with export:"
      },
      {
        "title": "Method A: Browser tool (preferred in Claude Code / HappyCapy)",
        "body": "If a browser CLI tool is available:\n\nStart a local HTTP server serving the HTML file\nNavigate browser to the page\nForce all .reveal elements to visible state (skip scroll animations)\nForce all bar fills and counters to final values\nTake a full-page screenshot\nClose browser\n\n// JS to inject before screenshot:\ndocument.querySelectorAll('.reveal').forEach(el => {\n    el.classList.add('visible');\n    el.style.opacity = '1';\n    el.style.transform = 'none';\n});\ndocument.querySelectorAll('.ba-fill, .bar-fill').forEach(bar => {\n    const w = bar.dataset.width;\n    if (w) bar.style.width = w + '%';\n});\ndocument.querySelectorAll('[data-counter]').forEach(el => {\n    const target = el.dataset.counter;\n    const suffix = el.dataset.suffix || '';\n    el.textContent = parseInt(target).toLocaleString() + suffix;\n});"
      },
      {
        "title": "Method B: Playwright script (standalone environments)",
        "body": "Run the bundled script:\n\npython3 scripts/html_to_png.py infographic.html output.png --width 1200 --scale 2\n\nThe script uses headless Chromium via Playwright. It auto-installs dependencies if needed.\n\nArguments:\n\n--width : viewport width in px (default 1200)\n--scale : HiDPI scale factor (default 2, produces 2400px wide image)"
      },
      {
        "title": "When to export PNG",
        "body": "Ask the user after HTML delivery:\n\nHeader: \"Export\"\nQuestion: \"Want a PNG image export as well?\"\nOptions:\n\n\"Yes, export PNG\" -- Run export\n\"HTML only is fine\" -- Skip"
      },
      {
        "title": "OpenClaw / Non-Interactive Adaptation",
        "body": "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.\n\n⚠️ CRITICAL: In parameterized mode, you MUST provide ALL confirmations in a single prompt because the system cannot ask follow-up questions."
      },
      {
        "title": "Parameterized Invocation (Single Prompt)",
        "body": "Users must specify ALL 3 confirmation steps in one prompt:\n\nGenerate an infographic from [article source].\n\nSTEP 1 - OUTLINE:\n[Provide your preferred outline structure, or \"use auto-generated outline\"]\n\nSTEP 2 - STYLE:\nLayout: [timeline|statistics|comparison|process|listicle|magazine]\nStyle: [bold-vibrant|clean-minimal|dark-techy|warm-editorial|scifi-hud|premium-magazine|glassmorphism]\nIllustrations: [none|icons|characters]\n\nSTEP 3 - OUTPUT:\nFormat: [html|png|both]\n\nExample complete prompt:\n\nGenerate an infographic from https://example.com/article.\n\nSTEP 1: Use auto-generated outline\n\nSTEP 2: \nLayout: timeline\nStyle: dark-techy\nIllustrations: icons\n\nSTEP 3:\nFormat: both"
      },
      {
        "title": "Parameter Reference",
        "body": "Style options:\n\nbold-vibrant -- High contrast, saturated colors\nclean-minimal -- Whitespace, subtle colors, serif typography\ndark-techy -- Dark background, neon accents\nwarm-editorial -- Magazine-style, warm tones\nscifi-hud -- Cyberpunk terminal, particle network, neon glow (premium)\npremium-magazine -- Luxury editorial, massive serif, cream/charcoal/vermillion (premium)\nglassmorphism -- Frosted glass, aurora blobs, Apple-inspired depth (premium)\n\nLayout options:\n\ntimeline -- Chronological events\nstatistics -- Data dashboard\ncomparison -- Side-by-side\nprocess -- Step-by-step flow\nlisticle -- Card grid\nmagazine -- Mixed editorial (default for complex articles)\nauto -- Let the skill decide based on content analysis\n\nOutline adjustments (natural language):\n\n\"remove [block name]\"\n\"add [block description]\"\n\"replace [block] with [new content]\"\n\"simplify\" / \"expand\"\n\nExport options:\n\nhtml -- HTML only (default)\npng -- HTML + PNG export\nboth -- Explicitly output both"
      },
      {
        "title": "Fallback Behavior",
        "body": "If no style/layout is specified and AskUserQuestion is not available, use these defaults:\n\nLayout: auto (detect from content)\nStyle: dark-techy for technical content, warm-editorial for narrative content, bold-vibrant for data-heavy content\nExport: html only"
      },
      {
        "title": "Font CDN for China Deployment",
        "body": "When deployed behind the GFW, replace Google Fonts CDN:\n\n<!-- Instead of: -->\n<link href=\"https://fonts.googleapis.com/css2?family=...\" rel=\"stylesheet\">\n\n<!-- Use mirror: -->\n<link href=\"https://fonts.loli.net/css2?family=...\" rel=\"stylesheet\">\n<!-- Or use: -->\n<link href=\"https://fonts.font.im/css2?family=...\" rel=\"stylesheet\">\n\nAlternatively, for CJK-heavy content, use system fonts as fallback:\n\n--font-heading: 'Noto Serif SC', 'STSong', 'SimSun', serif;\n--font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;"
      }
    ],
    "body": "Article to Infographic\n\nTransform 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.\n\nCore Philosophy\nContent-First -- Analyze the article before choosing layout.\nSmart Layout -- Match infographic type to content type automatically.\nDistinctive Design -- No generic AI aesthetics. Every infographic feels custom-crafted.\nZero Dependencies -- Single HTML file with inline CSS/JS.\nPrint-Ready -- Include print media queries for clean PDF export.\nWorkflow Overview\n\nStrict 3-Step Confirmation Process:\n\nStep 1: Outline Confirmation (BLOCKING)\n   ↓ User must confirm\nStep 2a: Layout Selection (BLOCKING)\n   ↓ User must confirm\nStep 2b: Style Selection (BLOCKING)\n   ↓ User must confirm\nStep 2c: Illustrations (BLOCKING)\n   ↓ User must confirm\nStep 3: Output Format (BLOCKING)\n   ↓ User must confirm\nGeneration Phase (automatic)\n\n\nCRITICAL RULE: Each step requires explicit user confirmation before proceeding. Do NOT batch confirmations. Do NOT proceed to next step until current step is confirmed.\n\nDetailed Workflow\nAcquire and analyze article content\nExtract key information and classify content type\nStep 1: Present outline → Get explicit confirmation\nStep 2a: Present layout options → Get explicit confirmation\nStep 2b: Present style options → Get explicit confirmation\nStep 2c: Present illustration options → Get explicit confirmation\nStep 3: Present output format options → Get explicit confirmation\nGenerate the HTML infographic (only after all confirmations)\nExport to PNG if selected in Step 3\nDeliver the final output\nConfirmation Flow Summary (For AI Reference)\n\nWhen executing this skill, follow this EXACT sequence:\n\nPhase\tStep\tAction\tUser Confirmation Required\n1\tContent Acquisition\tGet article URL/file/text\t❌ No\n2\tContent Analysis\tExtract info, classify type\t❌ No\n2.5\tStep 1\tPresent outline table\t✅ MUST CONFIRM\n3a\tStep 2a\tPresent layout options\t✅ MUST CONFIRM\n3b\tStep 2b\tPresent style options\t✅ MUST CONFIRM\n3c\tStep 2c\tPresent illustration options\t✅ MUST CONFIRM\n4\tStep 3\tPresent output format options\t✅ MUST CONFIRM\n5\tGeneration\tCreate HTML\t❌ Automatic\n6\tDelivery\tPresent results\t❌ Automatic\n7\tPNG Export\tIf selected in Step 3\t❌ Automatic\n\nFORBIDDEN ACTIONS:\n\n❌ Never combine Step 1 + Step 2 confirmations\n❌ Never combine Step 2a + 2b + 2c into one question\n❌ Never combine Step 2 + Step 3 confirmations\n❌ Never proceed to generation without all 3 steps confirmed\nPhase 1: Content Acquisition\n\nDetermine the content source:\n\nURL -- Use WebFetch to retrieve article content\nFile -- Read the file directly\nPasted text -- Use as-is\n\nIf content is ambiguous or too short, ask for clarification.\n\nPhase 2: Content Analysis\n\nExtract from the article:\n\nTitle and subtitle -- Main topic and secondary context\nKey statistics -- Numbers, percentages, data points\nKey points -- 4-8 most important takeaways\nQuotes -- Notable statements\nComparisons -- Before/after, pros/cons, A vs B\nSequential steps -- Process flows, timelines, chronological events\nCategories -- Natural groupings\nEntities -- People, organizations, places\n\nClassify the best infographic type:\n\nContent Signal\tInfographic Type\nDates, milestones, chronological events\tTimeline\nNumbers, percentages, survey data\tStatistics Dashboard\nA vs B, pros/cons, before/after\tComparison\nStep-by-step, how-to, tutorial\tProcess Flow\nMultiple independent tips/facts\tListicle / Card Grid\nMixed content types\tMagazine / Editorial\nPhase 2.5: Step 1 - Outline Confirmation (BLOCKING)\n\n⚠️ CRITICAL: Must get explicit user confirmation before proceeding to Phase 3.\n\nAfter content analysis, present the user with a structured outline in table form:\n\n| Block | Content | Notes |\n|---|---|---|\n| Header | Title + subtitle | Top section |\n| Hero Stats (3) | [stat1] / [stat2] / [stat3] | Key data highlights |\n| ... | ... | ... |\n\n\nDO NOT proceed until user explicitly confirms.\n\nUsing AskUserQuestion:\n\nHeader: \"Step 1/3: Outline Confirmation\"\nQuestion: \"Please review the outline above with [N] blocks. Confirm to proceed or request changes:\"\nOptions:\n\"✅ Outline confirmed - proceed to style selection\" -- ONLY THEN go to Phase 3\n\"📝 Need adjustments\" -- User specifies changes (add/remove/modify blocks), then RE-CONFIRM\n\"🔄 Simplify to core blocks\" -- Auto-trim to core blocks only, then RE-CONFIRM\n\nHard 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.\n\nPhase 3: Step 2 - Style Selection (BLOCKING)\n\n⚠️ CRITICAL: Must get explicit user confirmation for BOTH layout AND style before proceeding to Phase 4.\n\nThis phase requires TWO separate confirmations:\n\nStep 2a: Layout Selection (BLOCKING)\n\nUsing AskUserQuestion:\n\nHeader: \"Step 2a/3: Layout Selection\"\nQuestion: \"Based on your article, I recommend a [detected type] layout. Confirm your choice:\"\nOptions:\n\"✅ [detected type] - recommended\"\n\"📊 Statistics Dashboard\"\n\"📅 Timeline\"\n\"⚖️ Comparison\"\n\"🔄 Process Flow\"\n\"📝 Listicle / Card Grid\"\n\"📖 Magazine / Editorial\"\n\nSTOP HERE. Wait for user selection. Do NOT show style options yet.\n\nStep 2b: Style Selection (BLOCKING)\n\nONLY after layout is confirmed, present style options:\n\nUsing AskUserQuestion:\n\nHeader: \"Step 2b/3: Visual Style Selection\"\n\nQuestion: \"What visual style for the [confirmed layout] infographic?\"\n\nOptions (show 4-5 most relevant):\n\nStandard Styles:\n\n\"🎨 Bold & Vibrant\" -- High contrast, saturated colors, strong visual impact\n\"🌿 Clean & Minimal\" -- Whitespace, subtle colors, elegant typography\n\"🌃 Dark & Techy\" -- Dark backgrounds, neon accents, modern feel\n\"📰 Warm & Editorial\" -- Magazine-style, warm tones, serif typography\n\nPremium Styles:\n\n\"🚀 Sci-fi HUD\" -- Cyberpunk terminal, particle network, neon glow\n\"💎 Premium Magazine\" -- Luxury editorial, massive serif typography\n\"🔮 Glassmorphism Aurora\" -- Frosted glass, animated aurora blobs\n\nSTOP HERE. Wait for user selection.\n\nStep 2c: Illustrations (optional, but ASK)\n\nUsing AskUserQuestion:\n\nHeader: \"Step 2c/3: Illustrations (Optional)\"\nQuestion: \"Add illustrations to the [confirmed style] infographic?\"\nOptions:\n\"🚫 No illustrations - text and data only\"\n\"🔹 Decorative icons - small SVG icons next to headings\"\n\"👤 Character illustrations - full SVG characters from open-source libraries\"\n\nONLY after all 2a→2b→2c are confirmed, proceed to Phase 4.\n\nFor detailed color palettes and font pairings per style, see references/style-presets.md.\n\nPhase 4: Step 3 - Output Format Confirmation (BLOCKING)\n\n⚠️ CRITICAL: Must get explicit user confirmation for output format BEFORE generating anything.\n\nUsing AskUserQuestion:\n\nHeader: \"Step 3/3: Output Format\"\nQuestion: \"How would you like to receive the [confirmed style] infographic?\"\nOptions:\n\"📄 HTML only - single file, opens in browser\"\n\"🖼️ HTML + PNG - include high-res image export\"\n\"📦 Both formats - explicit delivery of both files\"\n\nONLY after output format is confirmed, proceed to Phase 5 (Generation).\n\nPhase 5: Generate Infographic\nHTML Architecture\n\nSingle self-contained HTML file:\n\n<!DOCTYPE html>\n<html lang=\"[content language]\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>[Infographic Title]</title>\n    <link rel=\"stylesheet\" href=\"[Google Fonts / Fontshare URL]\">\n    <style>\n        :root {\n            --bg-primary: ...; --bg-secondary: ...;\n            --text-primary: ...; --text-secondary: ...;\n            --accent-1: ...; --accent-2: ...;\n            --font-display: ...; --font-body: ...;\n        }\n        /* Layout, components, animations */\n        @media print { /* linearize, remove animations */ }\n        @media (prefers-reduced-motion: reduce) { /* disable animations */ }\n    </style>\n</head>\n<body>\n    <article class=\"infographic\">\n        <header class=\"infographic-header\">...</header>\n        <main class=\"infographic-body\">...</main>\n        <footer class=\"infographic-footer\">...</footer>\n    </article>\n    <script>/* Intersection Observer animations, counter effects */</script>\n</body>\n</html>\n\nDesign Rules\n\nTypography:\n\nDistinctive Google Fonts or Fontshare fonts -- NEVER Inter, Roboto, Arial, or system fonts\nDisplay font for headings, clean font for body\nResponsive sizing with clamp()\n\nColor:\n\nCSS custom properties for entire palette\nMax 3-4 colors: one dominant, one accent, one-two neutrals\nWCAG AA contrast for readability\n\nLayout:\n\nCSS Grid for overall structure, Flexbox for components\nMax-width 1200px, centered\nCompact 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.\nResponsive: stack on mobile, multi-column on desktop\n\nData Visualization:\n\nPure CSS for simple charts (bar via width%, pie via conic-gradient)\nInline SVG for complex shapes\nAnimate numbers with counter effect (Intersection Observer)\nAlways label data clearly\n\nAnimations:\n\nIntersection Observer triggers .visible class\nStagger children with animation-delay\nSubtle fade + translateY baseline\nprefers-reduced-motion media query required\n\nPrint:\n\n@media print rules: linearize layout, remove animations, ensure readability\nAppropriate page breaks between sections\nLayout Patterns\n\nTimeline:\n\nVertical center line, alternating left/right entries\nDate badges on line, content cards offset\nMobile: single-column stack\n\nStatistics Dashboard:\n\nHero stat at top (large number + context)\nGrid of stat cards (2-3 columns)\nCSS bar/pie charts where appropriate\nCounter animation on scroll\n\nComparison:\n\nSide-by-side columns with central divider\nMatching rows, color-coded sides\nMobile: vertical stack with labels\n\nProcess Flow:\n\nNumbered steps with connecting lines/arrows\nIcon + title + description per step\nProgress indicator\n\nListicle / Card Grid:\n\nNumbered/icon cards in responsive grid (2-3 cols desktop, 1 mobile)\nEach card: icon/number + title + description\nHover effects\n\nMagazine / Editorial:\n\nMix of full-width, card grids, pull quotes, stat highlights\nAlternate dense and spacious sections\nStrong typographic hierarchy\nAnti-Patterns -- NEVER\nPurple gradient on white background\nGeneric card layouts with no visual character\nFont Awesome or emoji spam as decoration\nFlat, lifeless color schemes\nWalls of small text (defeats infographic purpose)\nCharts without labels\nCookie-cutter layouts\nPhase 6: Delivery\n\nAll 3 confirmation steps completed. Generating final output...\n\nWrite the HTML file and present a summary:\n\n✅ Infographic generated!\n\n📄 File: [filename].html\n📐 Layout: [confirmed layout]\n🎨 Style: [confirmed style]\n🖼️ Illustrations: [confirmed option]\n📦 Output: [confirmed format]\n📊 Sections: [count]\n\nOpen in browser to view. Ctrl+P / Cmd+P to save as PDF.\n\n\nGeneration is complete. No further confirmations needed.\n\nEdge Cases\n\nShort articles (< 200 words): Compact single-section, 3-5 key points as cards.\n\nLong articles (> 3000 words): Summarize to 6-10 key sections max. Prioritize data and takeaways.\n\nNo statistics: Focus on quotes, process flows, or listicle. Use icons instead of charts.\n\nTechnical/code-heavy: Code snippet sections, architecture diagrams with CSS shapes, conceptual flow.\n\nNon-English content: Set lang attribute correctly on <html>. Use appropriate fonts for CJK, RTL, etc.\n\nPhase 7: PNG Export (if selected in Step 3)\n\nAfter generating the HTML, if PNG was selected in Step 3, proceed with export:\n\nMethod A: Browser tool (preferred in Claude Code / HappyCapy)\n\nIf a browser CLI tool is available:\n\nStart a local HTTP server serving the HTML file\nNavigate browser to the page\nForce all .reveal elements to visible state (skip scroll animations)\nForce all bar fills and counters to final values\nTake a full-page screenshot\nClose browser\n// JS to inject before screenshot:\ndocument.querySelectorAll('.reveal').forEach(el => {\n    el.classList.add('visible');\n    el.style.opacity = '1';\n    el.style.transform = 'none';\n});\ndocument.querySelectorAll('.ba-fill, .bar-fill').forEach(bar => {\n    const w = bar.dataset.width;\n    if (w) bar.style.width = w + '%';\n});\ndocument.querySelectorAll('[data-counter]').forEach(el => {\n    const target = el.dataset.counter;\n    const suffix = el.dataset.suffix || '';\n    el.textContent = parseInt(target).toLocaleString() + suffix;\n});\n\nMethod B: Playwright script (standalone environments)\n\nRun the bundled script:\n\npython3 scripts/html_to_png.py infographic.html output.png --width 1200 --scale 2\n\n\nThe script uses headless Chromium via Playwright. It auto-installs dependencies if needed.\n\nArguments:\n\n--width : viewport width in px (default 1200)\n--scale : HiDPI scale factor (default 2, produces 2400px wide image)\nWhen to export PNG\n\nAsk the user after HTML delivery:\n\nHeader: \"Export\"\nQuestion: \"Want a PNG image export as well?\"\nOptions:\n\"Yes, export PNG\" -- Run export\n\"HTML only is fine\" -- Skip\nOpenClaw / Non-Interactive Adaptation\n\nWhen 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.\n\n⚠️ CRITICAL: In parameterized mode, you MUST provide ALL confirmations in a single prompt because the system cannot ask follow-up questions.\n\nParameterized Invocation (Single Prompt)\n\nUsers must specify ALL 3 confirmation steps in one prompt:\n\nGenerate an infographic from [article source].\n\nSTEP 1 - OUTLINE:\n[Provide your preferred outline structure, or \"use auto-generated outline\"]\n\nSTEP 2 - STYLE:\nLayout: [timeline|statistics|comparison|process|listicle|magazine]\nStyle: [bold-vibrant|clean-minimal|dark-techy|warm-editorial|scifi-hud|premium-magazine|glassmorphism]\nIllustrations: [none|icons|characters]\n\nSTEP 3 - OUTPUT:\nFormat: [html|png|both]\n\n\nExample complete prompt:\n\nGenerate an infographic from https://example.com/article.\n\nSTEP 1: Use auto-generated outline\n\nSTEP 2: \nLayout: timeline\nStyle: dark-techy\nIllustrations: icons\n\nSTEP 3:\nFormat: both\n\nParameter Reference\n\nStyle options:\n\nbold-vibrant -- High contrast, saturated colors\nclean-minimal -- Whitespace, subtle colors, serif typography\ndark-techy -- Dark background, neon accents\nwarm-editorial -- Magazine-style, warm tones\nscifi-hud -- Cyberpunk terminal, particle network, neon glow (premium)\npremium-magazine -- Luxury editorial, massive serif, cream/charcoal/vermillion (premium)\nglassmorphism -- Frosted glass, aurora blobs, Apple-inspired depth (premium)\n\nLayout options:\n\ntimeline -- Chronological events\nstatistics -- Data dashboard\ncomparison -- Side-by-side\nprocess -- Step-by-step flow\nlisticle -- Card grid\nmagazine -- Mixed editorial (default for complex articles)\nauto -- Let the skill decide based on content analysis\n\nOutline adjustments (natural language):\n\n\"remove [block name]\"\n\"add [block description]\"\n\"replace [block] with [new content]\"\n\"simplify\" / \"expand\"\n\nExport options:\n\nhtml -- HTML only (default)\npng -- HTML + PNG export\nboth -- Explicitly output both\nFallback Behavior\n\nIf no style/layout is specified and AskUserQuestion is not available, use these defaults:\n\nLayout: auto (detect from content)\nStyle: dark-techy for technical content, warm-editorial for narrative content, bold-vibrant for data-heavy content\nExport: html only\nFont CDN for China Deployment\n\nWhen deployed behind the GFW, replace Google Fonts CDN:\n\n<!-- Instead of: -->\n<link href=\"https://fonts.googleapis.com/css2?family=...\" rel=\"stylesheet\">\n\n<!-- Use mirror: -->\n<link href=\"https://fonts.loli.net/css2?family=...\" rel=\"stylesheet\">\n<!-- Or use: -->\n<link href=\"https://fonts.font.im/css2?family=...\" rel=\"stylesheet\">\n\n\nAlternatively, for CJK-heavy content, use system fonts as fallback:\n\n--font-heading: 'Noto Serif SC', 'STSong', 'SimSun', serif;\n--font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/Fengsh0923/article-to-infographic",
    "publisherUrl": "https://clawhub.ai/Fengsh0923/article-to-infographic",
    "owner": "Fengsh0923",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/article-to-infographic",
    "downloadUrl": "https://openagent3.xyz/downloads/article-to-infographic",
    "agentUrl": "https://openagent3.xyz/skills/article-to-infographic/agent",
    "manifestUrl": "https://openagent3.xyz/skills/article-to-infographic/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/article-to-infographic/agent.md"
  }
}