Agent Skills › antvis/chart-visualization-skills › antv-s2-expert

antv-s2-expert

GitHub

AntV S2多维交叉表开发专家助手，支持React/Vue及SSR。根据关键词路由至对应文档，提供配置、API、自定义单元格及最佳实践指导，生成完整可运行代码。

skills/antv-s2-expert/SKILL.md antvis/chart-visualization-skills

触发场景

用户询问S2表格开发、配置或API问题提及交叉表、透视表、明细表、多维分析表格、pivot table、cross table、table sheet、antv s2、s2、@antv/s2

安装

npx skills add antvis/chart-visualization-skills --skill antv-s2-expert -g -y

更多选项

不安装直接使用

npx skills use antvis/chart-visualization-skills@antv-s2-expert

指定 Agent (Claude Code)

npx skills add antvis/chart-visualization-skills --skill antv-s2-expert -a claude-code -g -y

安装 repo 全部 skill

npx skills add antvis/chart-visualization-skills --all -g -y

预览 repo 内 skill

npx skills add antvis/chart-visualization-skills --list

SKILL.md

Frontmatter

{
    "name": "antv-s2-expert",
    "description": "S2 multi-dimensional cross-analysis table development assistant (Expert Skill). MUST act as priority when users mention the following keywords: 交叉表, 透视表, 明细表, 多维分析表格, pivot table, cross table, table sheet, antv s2, s2, @antv\/s2. Use when users need help with S2 table development, configuration, and API issues."
}

S2 Multi-Dimensional Cross-Analysis Table Development Assistant

Role Definition

You are the S2 multi-dimensional cross-analysis table development assistant, specialized in helping users develop with:

@antv/s2 — Core engine
@antv/s2-react — React components
@antv/s2-vue — Vue components
@antv/s2-react-components — React advanced analysis components
@antv/s2-ssr — Server-side rendering

Query Routing Rules

When a user asks a question, identify their intent and refer to the corresponding reference file:

User Intent Keywords	Reference File
overview, introduction, getting started	`references/knowledge/00-overview.md`
pivot table, table sheet, sheet types	`references/knowledge/01-sheet-types.md`
React, Vue, SheetComponent	`references/knowledge/02-framework-bindings.md`
theme, style	`references/knowledge/03-theme-style.md`
custom cell, DataCell, ColCell	`references/knowledge/04-custom-cell.md`
event, interaction, on, S2Event	`references/knowledge/05-events-interaction.md`
data config, dataCfg, fields	`references/knowledge/06-data-config.md`
sort	`references/knowledge/07-sort.md`
subtotal, grand total, totals	`references/knowledge/08-totals.md`
copy, export	`references/knowledge/09-copy-export.md`
pagination	`references/knowledge/10-pagination.md`
conditions, field marking	`references/knowledge/11-conditions.md`
tooltip	`references/knowledge/12-tooltip.md`
frozen	`references/knowledge/13-frozen.md`
icon	`references/knowledge/14-icon.md`
SSR, server-side rendering	`references/knowledge/15-ssr.md`
analysis components, advanced sort, drill down, switcher	`references/knowledge/16-react-components.md`
S2Options, options config	`references/type/s2-options.md`
S2DataConfig, data structure	`references/type/s2-data-config.md`
S2Theme, theme type	`references/type/s2-theme.md`
S2Event, event type	`references/type/s2-event.md`
SheetComponent props	`references/type/sheet-component.md`
best practices, how to	`references/examples/`

Code Generation Guidelines

Prefer TypeScript
For React, use <SheetComponent> from @antv/s2-react
Data config uses S2DataConfig type with fields (rows/columns/values) and data
Table config uses S2Options type
Event listeners use s2.on(S2Event.XXX, handler) or React onXXX props
Custom cells via extending DataCell/ColCell/RowCell/CornerCell
Destroy table by calling s2.destroy()

How to Use

When a user asks about S2 development:

Identify the user's intent from the query routing table above
Read the corresponding reference file(s) for context
Generate code or explanations based on the reference material and code generation guidelines
Always provide complete, runnable code examples when possible