antvis/chart-visualization-skills
9 skills14.3k installs4.1k starsGitHub
Install
npx skills add https://github.com/antvis/chart-visualization-skillsSkills in this repo
1Chart VisualizationThe chart-visualization skill turns structured user data into shareable chart images through the AntV Studio gpt-vis API. Agents first analyze the dataset and user intent, then map data characteristics to an appropriate visualization type: line or area for time trends, dual-axes when scales differ, bar or column for category comparisons, histogram for distributions, pie or treemap for composition, sankey or scatter for flows and correlations, and organization-chart or mind-map for hierarchies. It builds a JSON payload with required type and source fields, posts it with curl to the hosted endpoint, and returns the image URL in Markdown format. The skill documents data schemas per chart, optional theme and sizing controls, axis titles, and specialized types including radar, funnel, liquid, word-cloud, boxplot, violin, network-graph, fishbone-diagram, flow-diagram, and spreadsheet tables. Use it when an agent must visualize metrics, comparisons, or flows without embedding a local charting library, following the documented workflow from analysis through Markdown image output.5.5kinstalls2Infographic CreatorCreate beautiful infographics based on given text content. Use when users request to create infographics. The infographic-creator skill documents workflows and patterns from the repository SKILL.md. --- name: infographic-creator description: Create beautiful infographics based on given text content. Use when users request to create infographics. --- 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. `Infographic = Information Structure + Visual Expression` This task uses [AntV Infographic](https://infographic.antv.vision/) to create visual infographics. Before starting the task, you need to understand the AntV Infographic syntax specifications, including template list, data structure, themes, etc. ## Specifications ### AntV Infographic Syntax AntV 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.1.9kinstalls3Narrative Text VisualizationThe narrative-text-visualization skill is designed for generate structured narrative text visualizations from data using T8 Syntax. Use when users want to create data interpretation reports, summaries, or structured articles with. What is T8 T8 is a text visualization solution under the AntV technology stack designed specifically for insight-based narrative text display. Instead of manually constructing DOM elements, you write simple, human-readable syntax that describes your data narrative. Invoke when the user users want to create data interpretation reports, summaries, or structured articles with semantic entity annotations.1.3kinstalls4Icon RetrievalThe icon-retrieval skill search icons through HTTP API and retrieve SVG strings with curl. # Icon Search Use the icon HTTP API directly with `curl`. ## API ### Search Endpoint - **Method**: `GET` - **URL**: `https://lab.weavefox.cn/api/v1/infographic/icon` - **Query params**: - `text` (required): search keyword, e.g. `"data analysis"` - `topK` (optional): number of icons to fetch (1-20), default `5` Example: ```bash curl -sS -L --max-time 20 "https://lab.weavefox.cn/api/v1/infographic/icon?text=document&topK=5" ``` Typical response: ```json { "success": true, "data": [ "https://example.com/icon1.svg", "https://example.com/icon2.svg" ] } ``` ### Retrieve SVG Content ```bash curl -sS -L --max-time 20 "https://example.com/icon1.svg" ``` ## Workflow 1. Determine the icon concept keyword (for example: `security`, `document`, `data`). Search icon URLs using the API endpoint. Use `curl` to fetch the SVG content of selected URLs. Use SVG directly in pages, diagrams, or infographic materials. ## Notes - Use URL encoding for special characters in `text`.1.3kinstalls5Antv S2 Expertantv-s2-expert is an AntV S2 development assistant for coding agents working on pivot tables, cross-analysis sheets, and spreadsheet UIs with @antv/s2, @antv/s2-react, @antv/s2-vue, @antv/s2-react-components, and @antv/s2-ssr. The skill maps user intent to 30 bundled markdown references covering sheet types, dataCfg fields, custom DataCell and ColCell classes, events, totals, pagination, tooltips, frozen panes, and SSR. Code generation defaults to TypeScript, prefers React SheetComponent, and shows how to extend DataCell drawBackgroundShape with @antv/g Image shapes. Reach for antv-s2-expert when implementing AntV S2 pivot tables, overriding cell rendering, wiring S2Event handlers, or debugging S2DataConfig and S2Options for production analytics dashboards.1.2kinstalls6Antv Skills Maintainerantv-skills-maintainer is an internal-only skill in the antvis/chart-visualization-skills repository that auto-syncs documentation and plugin configuration whenever skills change. It triggers on every AI code execution via an always-on trigger list, updating README Available Skills sections and .claude-plugin/marketplace.json to reflect the current skill tree. The skill explicitly excludes itself from public listings—only user-facing chart skills belong in README and marketplace manifests. Maintainers use it to prevent drift between SKILL.md files on disk and the plugin catalog developers install. The workflow fits repository iteration where new AntV visualization skills are added frequently and manual manifest edits would fall behind commits. Developers maintaining the AntV skills marketplace reach for antv-skills-maintainer to keep installable plugin metadata aligned with the repo.1.1kinstalls7Antv G2 Chartantv-g2-chart is an antvis/chart-visualization-skills agent skill focused on the G2 v5 animation system through the animate configuration property. It documents three timing phases—enter, update, and exit—and built-in animation types including fadeIn/Out, scaleInX/Y, growInX/Y, waveIn, zoomIn/Out, morphing, and pathIn, each tunable with duration, delay, and easing. Frontend developers building AntV G2 dashboards reach for antv-g2-chart when first render, data refresh, or chart removal needs motion without hand-rolling keyframes. The skill is tagged beginner difficulty with full completeness and links related skills g2-animation-keyframe and g2-core-chart-init for deeper animation control.986installs8Antv G6 Graphantv-g6-graph is a chart-visualization skill from AntV for building interactive network diagrams with the G6 graph engine. The skill guides developers through configuring nodes, edges, layout algorithms, interaction events, and rendering patterns suited to dashboards, dependency maps, knowledge graphs, and agent workflow UIs. Developers reach for antv-g6-graph when they need force-directed or hierarchical graph views, draggable nodes, edge styling, zoom and pan handlers, or embeddable graph widgets in React or vanilla JavaScript frontends. It complements other AntV chart-visualization skills by focusing specifically on topology and relationship data instead of time-series or cartesian charts. Outputs are G6 graph configurations, component scaffolding, and event-handler patterns ready to integrate into web applications.680installs9Antv X6 EditorGuides implementation of AntV X6 diagram and flow editors in web frontends, covering custom nodes, connectors, drag-and-drop tooling, routing, and persistence for workflow or visual builder products.327installs