feat: add antv-s2-expert skill

skills/s2-expert/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: s2-expert
+description: S2 multi-dimensional cross-analysis table development assistant. Use when users need help with S2 pivot tables, table sheets, or any @antv/s2 related development.
+---
+
+# 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
+
+1. Prefer TypeScript
+2. For React, use `<SheetComponent>` from `@antv/s2-react`
+3. Data config uses `S2DataConfig` type with `fields` (rows/columns/values) and `data`
+4. Table config uses `S2Options` type
+5. Event listeners use `s2.on(S2Event.XXX, handler)` or React `onXXX` props
+6. Custom cells via extending `DataCell`/`ColCell`/`RowCell`/`CornerCell`
+7. Destroy table by calling `s2.destroy()`
+
+## How to Use
+
+When a user asks about S2 development:
+
+1. Identify the user's intent from the query routing table above
+2. Read the corresponding reference file(s) for context
+3. Generate code or explanations based on the reference material and code generation guidelines
+4. Always provide complete, runnable code examples when possible

skills/s2-expert/references/examples/custom-cell-render.md

@@ -0,0 +1,215 @@
+# Custom Cell Rendering Examples
+
+## Example 1: Custom DataCell with Background Image
+
+Extend `DataCell` to override the `drawBackgroundShape` method and add a custom background image to data cells.
+
+```typescript
+import { PivotSheet, DataCell, S2DataConfig, S2Options } from '@antv/s2';
+import { Image as GImage } from '@antv/g';
+
+/**
+ * Custom DataCell - adds a background image to data cells.
+ * For TableSheet, extend TableDataCell instead.
+ * See: https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts
+ */
+class CustomDataCell extends DataCell {
+  // Override the background drawing method to add a background image
+  drawBackgroundShape() {
+    const url =
+      'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png';
+
+    this.backgroundShape = this.appendChild(
+      new GImage({
+        style: {
+          ...this.getBBoxByType(),
+          src: url,
+        },
+      }),
+    );
+  }
+}
+
+const s2DataConfig: S2DataConfig = {
+  fields: {
+    rows: ['province', 'city'],
+    columns: ['type', 'sub_type'],
+    values: ['number'],
+  },
+  meta: [/* ... */],
+  data: [/* ... */],
+};
+
+const s2Options: S2Options = {
+  width: 600,
+  height: 480,
+  interaction: {
+    // Disable hover cross-highlight for visual clarity
+    hoverHighlight: false,
+  },
+  // Register custom DataCell via the dataCell callback
+  dataCell: (viewMeta, spreadsheet) => {
+    return new CustomDataCell(viewMeta, spreadsheet);
+  },
+};
+
+const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+await s2.render();
+```
+
+## Example 2: Custom TableDataCell with Conditional Styling
+
+Extend `TableDataCell` to override `getBackgroundColor` and `getTextStyle` for conditional formatting based on cell data.
+
+```typescript
+import {
+  TableColCell,
+  TableDataCell,
+  TableSheet,
+  type S2DataConfig,
+  type S2Options,
+} from '@antv/s2';
+
+/**
+ * Custom TableDataCell - conditional background color and text styling.
+ * See: https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-data-cell.ts
+ */
+class CustomDataCell extends TableDataCell {
+  getBackgroundColor() {
+    // Highlight cells with value >= 6000
+    if (this.meta.fieldValue >= 6000) {
+      return {
+        backgroundColor: 'red',
+        backgroundColorOpacity: 0.2,
+      };
+    }
+
+    return super.getBackgroundColor();
+  }
+
+  getTextStyle() {
+    const defaultTextStyle = super.getTextStyle();
+
+    // Bold centered text for the first column (series number)
+    if (this.meta.colIndex === 0) {
+      return {
+        ...defaultTextStyle,
+        fontWeight: 600,
+        textAlign: 'center',
+      };
+    }
+
+    // Alternating row style for specific columns
+    if (this.meta.rowIndex % 2 === 0 && this.meta.colIndex > 0) {
+      return {
+        ...defaultTextStyle,
+        fontSize: 16,
+        fill: '#396',
+        textAlign: 'left',
+      };
+    }
+
+    // Highlight high-value data
+    if (this.meta.fieldValue >= 600) {
+      return {
+        ...defaultTextStyle,
+        fontSize: 14,
+        fontWeight: 700,
+        fill: '#f63',
+        textAlign: 'center',
+      };
+    }
+
+    return super.getTextStyle();
+  }
+}
+
+/**
+ * Custom TableColCell - conditional text styling for column headers.
+ * See: https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-col-cell.ts
+ */
+class CustomColCell extends TableColCell {
+  getTextStyle() {
+    const defaultTextStyle = super.getTextStyle();
+
+    // Style even-indexed columns
+    if (this.meta.colIndex % 2 === 0) {
+      return {
+        ...defaultTextStyle,
+        fontSize: 16,
+        fill: '#396',
+        textAlign: 'left',
+      };
+    }
+
+    return super.getTextStyle();
+  }
+}
+
+const s2Options: S2Options = {
+  width: 600,
+  height: 480,
+  seriesNumber: {
+    enable: true,
+  },
+  // Register custom cells via callbacks
+  colCell: (node, spreadsheet, headerConfig) => {
+    return new CustomColCell(node, spreadsheet, headerConfig);
+  },
+  dataCell: (viewMeta, spreadsheet) => {
+    return new CustomDataCell(viewMeta, spreadsheet);
+  },
+};
+
+const s2 = new TableSheet(container, s2DataConfig, s2Options);
+
+await s2.render();
+```
+
+## Example 3: Custom ColCell with Background Image
+
+Extend `ColCell` to add a background image to column header cells.
+
+```typescript
+import { PivotSheet, ColCell, S2Options, S2DataConfig } from '@antv/s2';
+import { Image as GImage } from '@antv/g';
+
+/**
+ * Custom ColCell - adds a background image to column headers.
+ * For TableSheet, extend TableColCell instead.
+ * See: https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/col-cell.ts
+ */
+class CustomColCell extends ColCell {
+  // Override the background drawing method
+  drawBackgroundShape() {
+    const url =
+      'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png';
+
+    this.backgroundShape = this.appendChild(
+      new GImage({
+        style: {
+          ...this.getBBoxByType(),
+          src: url,
+        },
+      }),
+    );
+  }
+}
+
+const s2Options: S2Options = {
+  width: 600,
+  height: 480,
+  interaction: {
+    hoverHighlight: false,
+  },
+  // Register custom ColCell via the colCell callback
+  colCell: (node, s2, headConfig) => {
+    return new CustomColCell(node, s2, headConfig);
+  },
+};
+
+const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+await s2.render();
+```