[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M70HT624BYAV7EZ6XEYXRE7Q":3,"skill-same:01M70HT624BYAV7EZ6XEYXRE7Q":57},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":30,"linkOnly":31,"markdownContent":32,"markdownBody":33,"frontMatter":34,"refName":35,"commitSha":36,"skillDirectory":37,"forksCount":38,"repositoryHtmlUrl":39,"repositoryHomepageUrl":6,"ownerHtmlUrl":40,"ownerBlogUrl":6,"ownerDescription":41,"updatedAt":42,"install":43,"resources":56},"01M70HT624BYAV7EZ6XEYXRE7Q","infographic-creator",null,"Create beautiful infographics based on given text content. Use when users request to create infographics.","mdnaimul22\u002Fhuman-skills","mdnaimul22","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F64520358?v=4","01M70FH95MH2H796Q01TYSFZ03","Naimul","01M70FH96798CQR4YHA13F17GA",3,"MIT","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fantvis_chart-visualization-skills\u002Fantv-infographic-generator\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29],"infographic","infographic creator","creator","when","text","create","request","use","users","infographics","content","2026-11-10 10:12:30",false,"---\nname: infographic-creator\ndescription: Create beautiful infographics based on given text content. Use when users request to create infographics.\n---\n\nInfographics convert data, information, and knowledge into perceptible visual language. They combine visual design with data visualization, compressing complex information with intuitive symbols to help audiences quickly understand and remember key points.\n\n`Infographic = Information Structure + Visual Expression`\n\nThis task uses [AntV Infographic](https:\u002F\u002Finfographic.antv.vision\u002F) to create visual infographics.\n\nBefore starting the task, you need to understand the AntV Infographic syntax specifications, including template list, data structure, themes, etc.\n\n## Specifications\n\n### AntV Infographic Syntax\n\nAntV Infographic syntax is a custom DSL used to describe infographic rendering configurations. It uses indentation to describe information, has strong robustness, and is convenient for AI streaming output and infographic rendering. It mainly contains the following information:\n\n1. template: Use templates to express the text information structure.\n2. data: Infographic data, including title, desc, data items, etc. Data items typically contain fields such as label, desc, icon, etc.\n3. theme: Theme contains style configurations such as palette, font, etc.\n\nFor example:\n\n```plain\ninfographic list-row-horizontal-icon-arrow\ndata\n  title Title\n  desc Description\n  lists\n    - label Label\n      value 12.5\n      desc Explanation\n      icon document text\ntheme\n  palette #3b82f6 #8b5cf6 #f97316\n```\n\n### Syntax Specifications\n\n- The first line must be `infographic \u003Ctemplate-name>`, template selected from the list below (see \"Available Templates\" section).\n- Use `data` \u002F `theme` blocks, with two-space indentation within blocks.\n- Key-value pairs use \"key space value\"; arrays use `-` as entry prefix.\n- icon uses icon keywords (e.g., `star fill`).\n- `data` should contain title\u002Fdesc + template-specific main data field (not necessarily `items`).\n- Main data field selection (use only one, avoid mixing):\n  - `list-*` → `lists`\n  - `sequence-*` → `sequences` (optional `order asc|desc`)\n  - `compare-*` → `compares` (supports `children` for grouped comparisons), can contain multiple comparison items\n  - `hierarchy-structure` → `items` (each item corresponds to an independent hierarchy, each level can contain sub-items, can be nested up to 3 levels)\n  - `hierarchy-*` → single `root` (tree structure, nested through `children`);\n  - `relation-*` → `nodes` + `relations`; simple relation diagrams can omit `nodes`, using arrow syntax in relations\n  - `chart-*` → `values` (numeric statistics, optional `category`)\n  - Use `items` as fallback when uncertain\n- `compare-binary-*` \u002F `compare-hierarchy-left-right-*` binary templates: must have two root nodes, all comparison items hang under these two root nodes' children\n- `hierarchy-*`: use single `root`, nested through `children` (do not repeat `root`)\n- `theme` is used to customize themes (palette, font, etc.)\n  For example: dark theme + custom color scheme\n  ```plain\n  infographic list-row-horizontal-icon-arrow\n  theme dark\n    palette\n      - #61DDAA\n      - #F6BD16\n      - #F08BB4\n  ```\n- Use `theme.base.text.font-family` to specify font, such as handwriting style `851tegakizatsu`\n- Use `theme.stylize` to select built-in styles and pass parameters\n  Common styles:\n  - `rough`: hand-drawn effect\n  - `pattern`: pattern fill\n  - `linear-gradient` \u002F `radial-gradient`: linear\u002Fradial gradient\n\n  For example: hand-drawn style (rough)\n\n  ```plain\n  infographic list-row-horizontal-icon-arrow\n  theme\n    stylize rough\n    base\n      text\n        font-family 851tegakizatsu\n  ```\n\n- Do not output JSON, Markdown, or explanatory text\n\n### Data Syntax Examples\n\nData syntax examples by template category (use corresponding fields, avoid adding `items` simultaneously):\n\n- `list-*` templates\n\n```plain\ninfographic list-grid-badge-card\ndata\n  title Feature List\n  lists\n    - label Fast\n      icon flash fast\n    - label Secure\n      icon secure shield check\n```\n\n- `sequence-*` templates\n\n```plain\ninfographic sequence-steps-simple\ndata\n  sequences\n    - label Step 1\n    - label Step 2\n    - label Step 3\n  order asc\n```\n\n- `hierarchy-*` templates\n\n```plain\ninfographic hierarchy-structure\ndata\n  root\n    label Company\n    children\n      - label Dept A\n      - label Dept B\n```\n\n- `compare-*` templates\n\n```plain\ninfographic compare-swot\ndata\n  compares\n    - label Strengths\n      children\n        - label Strong brand\n        - label Loyal users\n    - label Weaknesses\n      children\n        - label High cost\n        - label Slow release\n```\n\nQuadrant diagram\n\n```plain\ninfographic compare-quadrant-quarter-simple-card\ndata\n  compares\n    - label High Impact & Low Effort\n    - label High Impact & High Effort\n    - label Low Impact & Low Effort\n    - label Low Impact & High Effort\n```\n\n- `chart-*` templates\n\n```plain\ninfographic chart-column-simple\ndata\n  values\n    - label Visits\n      value 1280\n    - label Conversion\n      value 12.4\n```\n\n- `relation-*` templates\n\n> Edge label syntax: A -label-> B or A -->|label| B\n\n```plain\ninfographic relation-dagre-flow-tb-simple-circle-node\ndata\n  nodes\n    - id A\n      label Node A\n    - id B\n      label Node B\n  relations\n    A - approves -> B\n    A -->|blocks| B\n```\n\n- Fallback `items` example\n\n```plain\ninfographic list-row-horizontal-icon-arrow\ndata\n  items\n    - label Item A\n      desc Description\n      icon sun\n    - label Item B\n      desc Description\n      icon moon\n```\n\n### Available Templates\n\n- chart-bar-plain-text\n- chart-column-simple\n- chart-line-plain-text\n- chart-pie-compact-card\n- chart-pie-donut-pill-badge\n- chart-pie-donut-plain-text\n- chart-pie-plain-text\n- chart-wordcloud\n- compare-binary-horizontal-badge-card-arrow\n- compare-binary-horizontal-simple-fold\n- compare-binary-horizontal-underline-text-vs\n- compare-hierarchy-left-right-circle-node-pill-badge\n- compare-quadrant-quarter-circular\n- compare-quadrant-quarter-simple-card\n- compare-swot\n- hierarchy-mindmap-branch-gradient-capsule-item\n- hierarchy-mindmap-level-gradient-compact-card\n- hierarchy-structure\n- hierarchy-tree-curved-line-rounded-rect-node\n- hierarchy-tree-tech-style-badge-card\n- hierarchy-tree-tech-style-capsule-item\n- list-column-done-list\n- list-column-simple-vertical-arrow\n- list-column-vertical-icon-arrow\n- list-grid-badge-card\n- list-grid-candy-card-lite\n- list-grid-ribbon-card\n- list-row-horizontal-icon-arrow\n- list-sector-plain-text\n- list-zigzag-down-compact-card\n- list-zigzag-down-simple\n- list-zigzag-up-compact-card\n- list-zigzag-up-simple\n- relation-dagre-flow-tb-animated-badge-card\n- relation-dagre-flow-tb-animated-simple-circle-node\n- relation-dagre-flow-tb-badge-card\n- relation-dagre-flow-tb-simple-circle-node\n- sequence-ascending-stairs-3d-underline-text\n- sequence-ascending-steps\n- sequence-circular-simple\n- sequence-color-snake-steps-horizontal-icon-line\n- sequence-cylinders-3d-simple\n- sequence-filter-mesh-simple\n- sequence-funnel-simple\n- sequence-horizontal-zigzag-underline-text\n- sequence-mountain-underline-text\n- sequence-pyramid-simple\n- sequence-roadmap-vertical-plain-text\n- sequence-roadmap-vertical-simple\n- sequence-snake-steps-compact-card\n- sequence-snake-steps-simple\n- sequence-snake-steps-underline-text\n- sequence-stairs-front-compact-card\n- sequence-stairs-front-pill-badge\n- sequence-timeline-rounded-rect-node\n- sequence-timeline-simple\n- sequence-zigzag-pucks-3d-simple\n- sequence-zigzag-steps-underline-text\n\n**Template Selection Recommendations:**\n\n- Strict sequence (process\u002Fsteps\u002Fdevelopment trend) → `sequence-*`\n  - Timeline → `sequence-timeline-*`\n  - Staircase diagram → `sequence-stairs-*`\n  - Roadmap → `sequence-roadmap-vertical-*`\n  - Zigzag path → `sequence-zigzag-*`\n  - Circular progress → `sequence-circular-simple`\n  - Colorful snake steps → `sequence-color-snake-steps-*`\n  - Pyramid → `sequence-pyramid-simple`\n- Opinion listing → `list-row-*` or `list-column-*`\n- Binary comparison (pros\u002Fcons) → `compare-binary-*`\n- SWOT → `compare-swot`\n- Hierarchical structure (tree diagram) → `hierarchy-tree-*`\n- Data charts → `chart-*`\n- Quadrant analysis → `compare-quadrant-*`\n- Grid list (key points) → `list-grid-*`\n- Relationship display → `relation-*`\n- Word cloud → `chart-wordcloud`\n- Mind map → `hierarchy-mindmap-*`\n\n### Example\n\nCreating an Internet technology evolution infographic\n\n```plain\ninfographic list-row-horizontal-icon-arrow\ndata\n  title Internet Technology Evolution\n  desc From Web 1.0 to AI era, key milestones\n  lists\n    - time 1991\n      label Web 1.0\n      desc Tim Berners-Lee published the first website, opening the Internet era\n      icon web\n    - time 2004\n      label Web 2.0\n      desc Social media and user-generated content become mainstream\n      icon account multiple\n    - time 2007\n      label Mobile\n      desc iPhone released, smartphone changes the world\n      icon cellphone\n    - time 2015\n      label Cloud Native\n      desc Containerization and microservices architecture are widely used\n      icon cloud\n    - time 2020\n      label Low Code\n      desc Visual development lowers the technology threshold\n      icon application brackets\n    - time 2023\n      label AI Large Model\n      desc ChatGPT ignites the generative AI revolution\n      icon brain\n```\n\n## Generation Process\n\n### Step 1: Understand User Requirements\n\nBefore creating an infographic, first understand the user's needs and the information they want to express, in order to determine the template and data structure.\n\nIf the user provides a clear content description, it should be broken down into a clear and concise structure.\n\nOtherwise, clarification from the user is needed (e.g., \"Please provide a clear and concise content description.\", \"Which template do you want to use?\")\n\n- Extract key information structure (title, desc, items, etc.).\n- Clarify required data fields (title, desc, items, label, value, icon, etc.).\n- Select appropriate template.\n- Describe infographic content using AntV Infographic syntax `{syntax}`.\n\n**Key Note**: Must respect the language of user input. For example, if the user inputs in Chinese, the text in the syntax must also be in Chinese.\n\n### Step 2: Render the Infographic\n\nWhen you have the final AntV Infographic syntax, you can generate a complete HTML file following these steps:\n\n1. Create a complete HTML file with the following structure:\n   - DOCTYPE and HTML meta (charset: utf-8)\n   - Title: `{title} - Infographic`\n   - Include AntV Infographic script: `https:\u002F\u002Funpkg.com\u002F@antv\u002Finfographic@latest\u002Fdist\u002Finfographic.min.js`\n   - Create container div with id `container`\n   - Initialize Infographic (`width: '100%'`, `height: '100%'`)\n   - Replace `{title}` with actual title\n   - Replace `{syntax}` with actual AntV Infographic syntax\n   - Add SVG export functionality: `const svgDataUrl = await infographic.toDataURL({ type: 'svg' });`\n\nReference HTML template:\n\n```html\n\u003Cdiv id=\"container\">\u003C\u002Fdiv>\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002F@antv\u002Finfographic@latest\u002Fdist\u002Finfographic.min.js\">\u003C\u002Fscript>\n\u003Cscript>\n const infographic = new AntVInfographic.Infographic({\n    container: '#container',\n    width: '100%',\n    height: '100%',\n  });\n  document.fonts?.ready.then(() => {\n    infographic.render(`{syntax}`);\n  }).catch((error) => {\n    console.error('Error waiting for fonts to load:', error);\n    infographic.render(`{syntax}`);\n  });\n\u003C\u002Fscript>\n```\n\n2. Use the Write tool to generate HTML file, named as `\u003Ctitle>-infographic.html`\n\n3. Show to user:\n   - Generate file path and prompt: \"Open directly with a browser to view and save as SVG\"\n   - Output syntax and prompt: \"Tell me if you need to adjust template\u002Fcolors\u002Fcontent\"\n\n**Note:** The HTML file must include:\n\n- SVG export via export button\n- Container is responsive, both width and height are 100%\n","Infographics convert data, information, and knowledge into perceptible visual language. They combine visual design with data visualization, compressing complex information with intuitive symbols to help audiences quickly understand and remember key points.\n\n`Infographic = Information Structure + Visual Expression`\n\nThis task uses [AntV Infographic](https:\u002F\u002Finfographic.antv.vision\u002F) to create visual infographics.\n\nBefore starting the task, you need to understand the AntV Infographic syntax specifications, including template list, data structure, themes, etc.\n\n## Specifications\n\n### AntV Infographic Syntax\n\nAntV Infographic syntax is a custom DSL used to describe infographic rendering configurations. It uses indentation to describe information, has strong robustness, and is convenient for AI streaming output and infographic rendering. It mainly contains the following information:\n\n1. template: Use templates to express the text information structure.\n2. data: Infographic data, including title, desc, data items, etc. Data items typically contain fields such as label, desc, icon, etc.\n3. theme: Theme contains style configurations such as palette, font, etc.\n\nFor example:\n\n```plain\ninfographic list-row-horizontal-icon-arrow\ndata\n  title Title\n  desc Description\n  lists\n    - label Label\n      value 12.5\n      desc Explanation\n      icon document text\ntheme\n  palette #3b82f6 #8b5cf6 #f97316\n```\n\n### Syntax Specifications\n\n- The first line must be `infographic \u003Ctemplate-name>`, template selected from the list below (see \"Available Templates\" section).\n- Use `data` \u002F `theme` blocks, with two-space indentation within blocks.\n- Key-value pairs use \"key space value\"; arrays use `-` as entry prefix.\n- icon uses icon keywords (e.g., `star fill`).\n- `data` should contain title\u002Fdesc + template-specific main data field (not necessarily `items`).\n- Main data field selection (use only one, avoid mixing):\n  - `list-*` → `lists`\n  - `sequence-*` → `sequences` (optional `order asc|desc`)\n  - `compare-*` → `compares` (supports `children` for grouped comparisons), can contain multiple comparison items\n  - `hierarchy-structure` → `items` (each item corresponds to an independent hierarchy, each level can contain sub-items, can be nested up to 3 levels)\n  - `hierarchy-*` → single `root` (tree structure, nested through `children`);\n  - `relation-*` → `nodes` + `relations`; simple relation diagrams can omit `nodes`, using arrow syntax in relations\n  - `chart-*` → `values` (numeric statistics, optional `category`)\n  - Use `items` as fallback when uncertain\n- `compare-binary-*` \u002F `compare-hierarchy-left-right-*` binary templates: must have two root nodes, all comparison items hang under these two root nodes' children\n- `hierarchy-*`: use single `root`, nested through `children` (do not repeat `root`)\n- `theme` is used to customize themes (palette, font, etc.)\n  For example: dark theme + custom color scheme\n  ```plain\n  infographic list-row-horizontal-icon-arrow\n  theme dark\n    palette\n      - #61DDAA\n      - #F6BD16\n      - #F08BB4\n  ```\n- Use `theme.base.text.font-family` to specify font, such as handwriting style `851tegakizatsu`\n- Use `theme.stylize` to select built-in styles and pass parameters\n  Common styles:\n  - `rough`: hand-drawn effect\n  - `pattern`: pattern fill\n  - `linear-gradient` \u002F `radial-gradient`: linear\u002Fradial gradient\n\n  For example: hand-drawn style (rough)\n\n  ```plain\n  infographic list-row-horizontal-icon-arrow\n  theme\n    stylize rough\n    base\n      text\n        font-family 851tegakizatsu\n  ```\n\n- Do not output JSON, Markdown, or explanatory text\n\n### Data Syntax Examples\n\nData syntax examples by template category (use corresponding fields, avoid adding `items` simultaneously):\n\n- `list-*` templates\n\n```plain\ninfographic list-grid-badge-card\ndata\n  title Feature List\n  lists\n    - label Fast\n      icon flash fast\n    - label Secure\n      icon secure shield check\n```\n\n- `sequence-*` templates\n\n```plain\ninfographic sequence-steps-simple\ndata\n  sequences\n    - label Step 1\n    - label Step 2\n    - label Step 3\n  order asc\n```\n\n- `hierarchy-*` templates\n\n```plain\ninfographic hierarchy-structure\ndata\n  root\n    label Company\n    children\n      - label Dept A\n      - label Dept B\n```\n\n- `compare-*` templates\n\n```plain\ninfographic compare-swot\ndata\n  compares\n    - label Strengths\n      children\n        - label Strong brand\n        - label Loyal users\n    - label Weaknesses\n      children\n        - label High cost\n        - label Slow release\n```\n\nQuadrant diagram\n\n```plain\ninfographic compare-quadrant-quarter-simple-card\ndata\n  compares\n    - label High Impact & Low Effort\n    - label High Impact & High Effort\n    - label Low Impact & Low Effort\n    - label Low Impact & High Effort\n```\n\n- `chart-*` templates\n\n```plain\ninfographic chart-column-simple\ndata\n  values\n    - label Visits\n      value 1280\n    - label Conversion\n      value 12.4\n```\n\n- `relation-*` templates\n\n> Edge label syntax: A -label-> B or A -->|label| B\n\n```plain\ninfographic relation-dagre-flow-tb-simple-circle-node\ndata\n  nodes\n    - id A\n      label Node A\n    - id B\n      label Node B\n  relations\n    A - approves -> B\n    A -->|blocks| B\n```\n\n- Fallback `items` example\n\n```plain\ninfographic list-row-horizontal-icon-arrow\ndata\n  items\n    - label Item A\n      desc Description\n      icon sun\n    - label Item B\n      desc Description\n      icon moon\n```\n\n### Available Templates\n\n- chart-bar-plain-text\n- chart-column-simple\n- chart-line-plain-text\n- chart-pie-compact-card\n- chart-pie-donut-pill-badge\n- chart-pie-donut-plain-text\n- chart-pie-plain-text\n- chart-wordcloud\n- compare-binary-horizontal-badge-card-arrow\n- compare-binary-horizontal-simple-fold\n- compare-binary-horizontal-underline-text-vs\n- compare-hierarchy-left-right-circle-node-pill-badge\n- compare-quadrant-quarter-circular\n- compare-quadrant-quarter-simple-card\n- compare-swot\n- hierarchy-mindmap-branch-gradient-capsule-item\n- hierarchy-mindmap-level-gradient-compact-card\n- hierarchy-structure\n- hierarchy-tree-curved-line-rounded-rect-node\n- hierarchy-tree-tech-style-badge-card\n- hierarchy-tree-tech-style-capsule-item\n- list-column-done-list\n- list-column-simple-vertical-arrow\n- list-column-vertical-icon-arrow\n- list-grid-badge-card\n- list-grid-candy-card-lite\n- list-grid-ribbon-card\n- list-row-horizontal-icon-arrow\n- list-sector-plain-text\n- list-zigzag-down-compact-card\n- list-zigzag-down-simple\n- list-zigzag-up-compact-card\n- list-zigzag-up-simple\n- relation-dagre-flow-tb-animated-badge-card\n- relation-dagre-flow-tb-animated-simple-circle-node\n- relation-dagre-flow-tb-badge-card\n- relation-dagre-flow-tb-simple-circle-node\n- sequence-ascending-stairs-3d-underline-text\n- sequence-ascending-steps\n- sequence-circular-simple\n- sequence-color-snake-steps-horizontal-icon-line\n- sequence-cylinders-3d-simple\n- sequence-filter-mesh-simple\n- sequence-funnel-simple\n- sequence-horizontal-zigzag-underline-text\n- sequence-mountain-underline-text\n- sequence-pyramid-simple\n- sequence-roadmap-vertical-plain-text\n- sequence-roadmap-vertical-simple\n- sequence-snake-steps-compact-card\n- sequence-snake-steps-simple\n- sequence-snake-steps-underline-text\n- sequence-stairs-front-compact-card\n- sequence-stairs-front-pill-badge\n- sequence-timeline-rounded-rect-node\n- sequence-timeline-simple\n- sequence-zigzag-pucks-3d-simple\n- sequence-zigzag-steps-underline-text\n\n**Template Selection Recommendations:**\n\n- Strict sequence (process\u002Fsteps\u002Fdevelopment trend) → `sequence-*`\n  - Timeline → `sequence-timeline-*`\n  - Staircase diagram → `sequence-stairs-*`\n  - Roadmap → `sequence-roadmap-vertical-*`\n  - Zigzag path → `sequence-zigzag-*`\n  - Circular progress → `sequence-circular-simple`\n  - Colorful snake steps → `sequence-color-snake-steps-*`\n  - Pyramid → `sequence-pyramid-simple`\n- Opinion listing → `list-row-*` or `list-column-*`\n- Binary comparison (pros\u002Fcons) → `compare-binary-*`\n- SWOT → `compare-swot`\n- Hierarchical structure (tree diagram) → `hierarchy-tree-*`\n- Data charts → `chart-*`\n- Quadrant analysis → `compare-quadrant-*`\n- Grid list (key points) → `list-grid-*`\n- Relationship display → `relation-*`\n- Word cloud → `chart-wordcloud`\n- Mind map → `hierarchy-mindmap-*`\n\n### Example\n\nCreating an Internet technology evolution infographic\n\n```plain\ninfographic list-row-horizontal-icon-arrow\ndata\n  title Internet Technology Evolution\n  desc From Web 1.0 to AI era, key milestones\n  lists\n    - time 1991\n      label Web 1.0\n      desc Tim Berners-Lee published the first website, opening the Internet era\n      icon web\n    - time 2004\n      label Web 2.0\n      desc Social media and user-generated content become mainstream\n      icon account multiple\n    - time 2007\n      label Mobile\n      desc iPhone released, smartphone changes the world\n      icon cellphone\n    - time 2015\n      label Cloud Native\n      desc Containerization and microservices architecture are widely used\n      icon cloud\n    - time 2020\n      label Low Code\n      desc Visual development lowers the technology threshold\n      icon application brackets\n    - time 2023\n      label AI Large Model\n      desc ChatGPT ignites the generative AI revolution\n      icon brain\n```\n\n## Generation Process\n\n### Step 1: Understand User Requirements\n\nBefore creating an infographic, first understand the user's needs and the information they want to express, in order to determine the template and data structure.\n\nIf the user provides a clear content description, it should be broken down into a clear and concise structure.\n\nOtherwise, clarification from the user is needed (e.g., \"Please provide a clear and concise content description.\", \"Which template do you want to use?\")\n\n- Extract key information structure (title, desc, items, etc.).\n- Clarify required data fields (title, desc, items, label, value, icon, etc.).\n- Select appropriate template.\n- Describe infographic content using AntV Infographic syntax `{syntax}`.\n\n**Key Note**: Must respect the language of user input. For example, if the user inputs in Chinese, the text in the syntax must also be in Chinese.\n\n### Step 2: Render the Infographic\n\nWhen you have the final AntV Infographic syntax, you can generate a complete HTML file following these steps:\n\n1. Create a complete HTML file with the following structure:\n   - DOCTYPE and HTML meta (charset: utf-8)\n   - Title: `{title} - Infographic`\n   - Include AntV Infographic script: `https:\u002F\u002Funpkg.com\u002F@antv\u002Finfographic@latest\u002Fdist\u002Finfographic.min.js`\n   - Create container div with id `container`\n   - Initialize Infographic (`width: '100%'`, `height: '100%'`)\n   - Replace `{title}` with actual title\n   - Replace `{syntax}` with actual AntV Infographic syntax\n   - Add SVG export functionality: `const svgDataUrl = await infographic.toDataURL({ type: 'svg' });`\n\nReference HTML template:\n\n```html\n\u003Cdiv id=\"container\">\u003C\u002Fdiv>\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002F@antv\u002Finfographic@latest\u002Fdist\u002Finfographic.min.js\">\u003C\u002Fscript>\n\u003Cscript>\n const infographic = new AntVInfographic.Infographic({\n    container: '#container',\n    width: '100%',\n    height: '100%',\n  });\n  document.fonts?.ready.then(() => {\n    infographic.render(`{syntax}`);\n  }).catch((error) => {\n    console.error('Error waiting for fonts to load:', error);\n    infographic.render(`{syntax}`);\n  });\n\u003C\u002Fscript>\n```\n\n2. Use the Write tool to generate HTML file, named as `\u003Ctitle>-infographic.html`\n\n3. Show to user:\n   - Generate file path and prompt: \"Open directly with a browser to view and save as SVG\"\n   - Output syntax and prompt: \"Tell me if you need to adjust template\u002Fcolors\u002Fcontent\"\n\n**Note:** The HTML file must include:\n\n- SVG export via export button\n- Container is responsive, both width and height are 100%\n",{"name":5,"description":7},"main","74715deacdc69119d739f38916f8ee4f0f979ebf","skills\u002Fstorage\u002Fantvis_chart-visualization-skills\u002Fantv-infographic-generator",0,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills","https:\u002F\u002Fgithub.com\u002Fmdnaimul22","AI Agents Workflows Automation | Specializing in Python, FastAPI, MCP Agents & Custom ERP.","2026-11-11 21:16:57",{"source":8,"skillName":5,"commands":44,"prompt":54,"zipAvailable":55},[45,48,51],{"tool":46,"command":47},"npx","npx skills add mdnaimul22\u002Fhuman-skills --skill infographic-creator",{"tool":49,"command":50},"bunx","bunx skills add mdnaimul22\u002Fhuman-skills --skill infographic-creator",{"tool":52,"command":53},"pnpm","pnpm dlx skills add mdnaimul22\u002Fhuman-skills --skill infographic-creator","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fantvis_chart-visualization-skills\u002Fantv-infographic-generator\u002FSKILL.md",true,[],[58,66,96,118,137,152],{"skillNo":59,"name":60,"nameZh":6,"description":61,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":62,"categories":63,"keywords":64,"publishedAt":65},"01M72JT3YP1SQHD0MANGDXQ4RT","higgsfield-websites","Build, edit, and deploy full-stack websites, apps and games via the Higgsfield CLI (`higgsfield website …`). Each is a React 19 + TanStack Start SSR app in one Cloudflare Worker (D1\u002FR2\u002FKV\u002FDO\u002FContainers). THREE product types, picked via `--type` on create: `website` (standalone, no Higgsfield integration — references\u002Fwebsite-flow.md), `app` (Sign in with Higgsfield + fnf SDK, Quanta — references\u002Fapp-flow.md), `game` (realtime multiplayer rooms — references\u002Fgame-flow.md). Routes to the right flow; each carries its own rules and deploy\u002Fpublish gates.\nUse when: \"build me a website\", \"make a landing page\", \"create a web app\", \"build a SaaS dashboard \u002F portfolio\", \"make me a game\", \"deploy this site\", \"publish\". Also owns GAME ART: \"make a spritesheet\", \"tileable texture\", \"animate a 3D character\", game music\u002FSFX — see the game-* references.\nNOT for: single image\u002Fvideo\u002Faudio generation (higgsfield-generate), product photos (higgsfield-product-photoshoot), marketplace cards (higgsfield-marketplace-cards).","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fhiggsfield-ai_skills\u002Fhiggsfield-websites\u002FSKILL.md",[],[],"2026-11-10 22:39:42",{"skillNo":67,"name":68,"nameZh":6,"description":69,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":88,"publishedAt":30},"01M70JPK8HAXXA85P7Q8NKZZYG","writing-skills","Use when creating new skills, editing existing skills, or verifying skills work before deployment","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fobra_superpowers\u002Fwriting-skills\u002FSKILL.md",[72,77,82,85],{"categoryNo":73,"categoryName":74,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000018","写作与文案","SCENARIO","使用场景",{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",{"categoryNo":83,"categoryName":84,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":86,"categoryName":87,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000008","测试与质量",[89,90,91,92,26,93,94,22,95],"writing","writing skills","editing","deployment","Existing","new","work",{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":107,"publishedAt":30},"01M70JP4PHBH1CQVVDWZ94W159","writing-plans","Use when you have a spec or requirements for a multi-step task, before touching code","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fobra_superpowers\u002Fwriting-plans\u002FSKILL.md",[102,103,104],{"categoryNo":73,"categoryName":74,"taxonomyType":75,"taxonomyTypeDesc":76},{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},{"categoryNo":105,"categoryName":106,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000030","开发工程师",[89,108,109,110,22,111,112,26,113,114,115,116,117],"writing plans","plans","you","code","for","requirements","task","multi","spec","multi-step task",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":124,"publishedAt":30},"01M70JNTYVGXFZT8PASZ844TH8","verification-before-completion","Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fobra_superpowers\u002Fverification-before-completion\u002FSKILL.md",[],[125,126,127,128,129,130,26,131,132,133,22,134,95,135,136],"verification","verification before completion","complete","about","output","assertions","prs","evidence","claim","claims","commands","running",{"skillNo":138,"name":139,"nameZh":6,"description":140,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":141,"categories":142,"keywords":144,"publishedAt":30},"01M70JNGVSQDESWN0Q5BPJ875V","using-superpowers","Use when starting any conversation - establishes how to find and use skills, requiring skill invocation before ANY response including clarifying questions","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fobra_superpowers\u002Fusing-superpowers\u002FSKILL.md",[143],{"categoryNo":83,"categoryName":84,"taxonomyType":75,"taxonomyTypeDesc":76},[145,146,147,148,26,22,149,150,151],"using superpowers","superpowers","conversation","how to","how","find","questions",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":156,"categories":157,"keywords":158,"publishedAt":30},"01M70JN57CE588NPYPYTWH1DWG","using-git-worktrees","Use when starting feature work that needs isolation from current workspace or before executing implementation plans - ensures an isolated workspace exists via native tools or git worktree fallback","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fobra_superpowers\u002Fusing-git-worktrees\u002FSKILL.md",[],[159,160,161,162,163,164,22,95,165,166,167,168,169,170,171,109,26,172,173],"using git worktrees","Using git","git","worktrees","git worktrees","implementation","git worktree","worktree","native","Tools","isolation","fallback","feature","via","workspace"]