antv-s2-expert

Name: antv-s2-expert
Author: antvis

github.com/antvisData & databases5161.2k installsUpdated 5w ago

About antv-s2-expert

A development skill for AntV S2 users, with guidance and reference routing for multidimensional cross-analysis tables. It covers the core engine, React and Vue components, server-side rendering, and common configuration topics.

Key features

01Route questions to relevant references
02Cover S2 core and framework bindings
03Guide data, table, and theme configuration
04Explain events, interactions, and custom cells
05Provide TypeScript code-generation guidelines

Use cases

01Look up pivot table types and data configuration
02Write S2 code for React or Vue projects
03Implement table events, export, or pagination

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/antvis/chart-visualization-skills --skill antv-s2-expert

After installing, type/antv-s2-expertin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/examples/

custom-cell-render.md

custom-theme.md

interaction-examples.md

layout-examples.md

pivot-sheet-basic.md

react-component-usage.md

table-sheet-basic.md

references/knowledge/

00-overview.md

01-sheet-types.md

02-framework-bindings.md

03-theme-style.md

04-custom-cell.md

05-events-interaction.md

06-data-config.md

07-sort.md

08-totals.md

09-copy-export.md

10-pagination.md

11-conditions.md

12-tooltip.md

13-frozen.md

14-icon.md

15-ssr.md

16-react-components.md

references/type/

s2-data-config.md

s2-event.md

s2-options.md

s2-theme.md

sheet-component.md

Details

From the project README

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

Comments

Markdown supported

Details

Author: antvis
Repository: antvis/chart-visualization-skills
Category: Data & databases
Installs: 1,163
GitHub stars: 516

Report

More skills

All skills

hyperframes-core

github.com/heygen-com

930.6k

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

lark-base

open.feishu.cn

823.2k

Operate on Feishu Base: create tables, fields, records, and views; handle statistics, formulas/lookups, forms, dashboards, app mode (BaseApp/AppMode pages and components), Workspace directories, workflows, role permissions, and the template center (Base template categories, lists, and search). Use when encountering Base/multidimensional tables/bitable, BaseApp/AppMode, or /base/ or /app/ links. Do not use lark-apps for BaseApp; route file import/export to lark-drive and authentication/authorization to lark-shared.

lark-sheets

open.feishu.cn

821.8k

Feishu Spreadsheets: create and operate spreadsheets. Supports worksheets and row/column structures (add/delete/merge/size/hide/freeze/group), cell read/write (values/formulas/styles/comments/cell images), range copy/move/sort/fill, find and replace, bulk updates, and creating and maintaining objects such as charts, pivot tables, conditional formatting, filters and filter views, dropdown lists, sparklines, and floating images. Also supports formula validation, restoring historical versions, and importing/exporting local Excel/CSV files and Feishu spreadsheets. Use when users need to create or edit spreadsheets, summarize and visualize data, format spreadsheets, calculate formulas (including migrating Excel formulas), or build financial models (DCF, three statements, budgets, Sensitivity, etc.). For multidimensional tables (Base/bitable), use lark-base. If users want to search for spreadsheet files in cloud storage (Drive/cloud storage) by name or keyword, use lark-drive's drive +search to locate resources first. When users provide a doubao.com /sheets/ URL/token, use this skill directly; do not fall back to WebFetch because the domain is not Feishu. Routing is based on the URL path pattern and token, not the domain.

remotion-best-practices

github.com/remotion-dev

701.4k

Best practices and domain knowledge for building videos programmatically with Remotion (videos in React/TypeScript, rendered to MP4). Use whenever writing or editing Remotion code — scaffolding a video project, animating with interpolate/spring over useCurrentFrame(), sequencing scenes and transitions, captions/subtitles, audio, GIFs/Lottie/3D, charts, visual effects, dynamic duration via calculateMetadata, or rendering. Consult before reaching for a Remotion API, since its components and props evolve (e.g. @remotion/media).