diff --git a/.cursor/skills/add-tabs-to-page/SKILL.md b/.cursor/skills/add-tabs-to-page/SKILL.md new file mode 100644 index 0000000..89ab768 --- /dev/null +++ b/.cursor/skills/add-tabs-to-page/SKILL.md @@ -0,0 +1,215 @@ +--- +name: add-tabs-to-page +description: Adds a TABS_WIDGET to a page so multiple data views live under one page instead of separate pages. Use when the user asks to add tabs, consolidate pages into tabs, create tabbed views, or replace a single table with a tabbed layout. +--- + +# Add Tabs to a Page + +Replaces a page's standalone content (e.g. a single `TABLE_WIDGET_V2`) with a `TABS_WIDGET` containing multiple tabs, each with its own widgets and query binding. + +## Prerequisites + +- **Tab definitions**: User must provide the tab labels and the query each tab should display. +- **Page prefix**: Each page uses a short widget-ID prefix (e.g. `pa1`, `cp1`). Reuse the existing prefix from the page's widgets. +- Follow the **add-query-to-table** skill for creating any new queries needed by the tabs. + +## File Layout + +The Tabs widget and all widgets **inside** tabs live under a `Tabs1/` directory: + +``` +pages//widgets/Tabs1/ +├── Tabs1.json # The TABS_WIDGET itself +├── .json # Table inside tab 1 +├── .json # Table inside tab 2 +├── .json # Optional: date pickers inside a tab +└── ... +``` + +If the page previously had a standalone `Table1.json` at `widgets/Table1.json`, **delete it** after creating the tabbed replacement. + +## Instructions + +### 1. Design the tab structure + +Decide on tab count, labels, and content. Example: + +| Tab ID | Label | Canvas widgetId | Content | +|--------|-------|-----------------|---------| +| tab1 | All | `{prefix}cnvsall` | TableAll bound to `query_all` | +| tab2 | SLx | `{prefix}cnvsslx` | TableSLx bound to `query_slx` | + +### 2. Create `Tabs1.json` + +The TABS_WIDGET has three critical sections: + +**A) `tabsObj`** — declares each tab with id, label, index, and canvas widgetId: + +```json +"tabsObj": { + "tab1": { + "id": "tab1", + "index": 0, + "isVisible": true, + "label": "All", + "positioning": "vertical", + "widgetId": "" + }, + "tab2": { ... } +} +``` + +**B) `children`** — array of `CANVAS_WIDGET` entries, one per tab. Each canvas must reference: +- `"parentId"`: the Tabs widget's `widgetId` +- `"tabId"`: matching key from `tabsObj` (e.g. `"tab1"`) +- `"tabName"`: the display label +- `"widgetId"`: unique canvas ID (referenced in `tabsObj` and by child widgets) + +**C) Top-level Tabs properties: + +```json +{ + "type": "TABS_WIDGET", + "version": 3, + "isCanvas": true, + "shouldShowTabs": true, + "defaultTab": "