New skills

2026-02-27 13:20:38 +01:00
parent f207f55565
commit 68ad98ede4
4 changed files with 246 additions and 52 deletions
--- a/.cursor/skills/navigation-section-add/SKILL.md
+++ b/.cursor/skills/navigation-section-add/SKILL.md
@@ -0,0 +1,124 @@
+---
+name: navigation-section-add
+description: Adds a new navigation section (label + first button) to the sidebar on all pages. Use when the user asks to create a new section like "Pending POs", add a section header to navigation, or group pages under a new category separate from "Sales".
+---
+
+# Navigation Section Addition
+
+Adds a new **section** to the left-side navigation container on **all pages**. A section consists of a bold Text label (e.g. "Pending POs") followed by one or more page buttons. This skill covers adding the section label and first button; additional buttons follow the **navigation-button-add** skill.
+
+## Current Sections
+
+| Section | Label widget | Buttons | Row range |
+|---------|-------------|---------|-----------|
+| Sales | `Text1` | `Button1`, `Button1Copy`, `Button1Copy2` | 0-16 |
+| Pending POs | `Text2` | `Button2` | 18-26 |
+
+## Instructions
+
+### 1. Determine row placement
+
+Sections are separated by a **2-row gap**. Find the last widget's `bottomRow` in the current navigation, add 2 for the gap, then place:
+- **Section label** (Text widget): 4 rows (e.g. topRow 18, bottomRow 22)
+- **First button**: 4 rows immediately after (e.g. topRow 22, bottomRow 26)
+
+### 2. Choose widget names
+
+Follow the naming sequence based on existing sections:
+- First section: `Text1`, `Button1` / `Button1Copy` / `Button1Copy2`
+- Second section: `Text2`, `Button2` / `Button2Copy` / ...
+- Third section: `Text3`, `Button3` / `Button3Copy` / ...
+
+### 3. Create the Text label widget on ALL pages
+
+Add a `Text<N>.json` file in `pages/<each page>/widgets/Container1/` with:
+
+```json
+{
+  "animateLoading": true,
+  "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
+  "bottomRow": <calculated>,
+  "dynamicBindingPathList": [
+    {"key": "truncateButtonColor"},
+    {"key": "fontFamily"},
+    {"key": "borderRadius"}
+  ],
+  "dynamicHeight": "AUTO_HEIGHT",
+  "dynamicTriggerPathList": [],
+  "fontFamily": "{{appsmith.theme.fontFamily.appFont}}",
+  "fontSize": "1rem",
+  "fontStyle": "BOLD",
+  "isLoading": false,
+  "isVisible": true,
+  "key": "<unique-key>",
+  "leftColumn": 0,
+  "maxDynamicHeight": 9000,
+  "minDynamicHeight": 4,
+  "minWidth": 450,
+  "mobileBottomRow": <calculated>,
+  "mobileLeftColumn": 10,
+  "mobileRightColumn": 26,
+  "mobileTopRow": <calculated>,
+  "needsErrorInfo": false,
+  "originalBottomRow": <calculated>,
+  "originalTopRow": <calculated>,
+  "overflow": "NONE",
+  "parentColumnSpace": 3.841796875,
+  "parentId": "<Canvas widgetId from Container1.json>",
+  "parentRowSpace": 10,
+  "renderMode": "CANVAS",
+  "responsiveBehavior": "fill",
+  "rightColumn": 64,
+  "shouldTruncate": false,
+  "text": "<Section Name>",
+  "textAlign": "LEFT",
+  "textColor": "#231F20",
+  "topRow": <calculated>,
+  "truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}",
+  "type": "TEXT_WIDGET",
+  "version": 1,
+  "widgetId": "<unique per page>",
+  "widgetName": "Text<N>"
+}
+```
+
+### 4. Create the first button on ALL pages
+
+Follow the **navigation-button-add** skill to add `Button<N>.json`. Key points:
+- On the page the button navigates to: `buttonColor` = `{{appsmith.theme.colors.backgroundColor}}` (highlighted), with `dynamicBindingPathList: [{"key": "buttonColor"}]`.
+- On all other pages: `buttonColor` = `#ffffff` (inactive), with empty `dynamicBindingPathList`.
+- `topRow` = label's `bottomRow`, `bottomRow` = topRow + 4.
+
+### 5. parentId -- CRITICAL
+
+Each page's Container1 has a **different Canvas widget ID**. The `parentId` for all nav widgets must match the `widgetId` of the `CANVAS_WIDGET` child inside that page's `Container1.json`.
+
+**Always read** `pages/<PageName>/widgets/Container1/Container1.json` to find the Canvas `widgetId` before creating widgets. Do NOT copy parentId from another page.
+
+Example Canvas widget IDs (verify these are still current):
+- Sales - Capacity Planning: `x3pc17vp6q`
+- Sales - Units Shipped: `wj6fxg5wpg`
+- Sales - Units Ordered: `wj6fxg5wpg`
+
+### 6. Widget IDs -- must be unique
+
+Every widget across all pages must have a **unique `widgetId`**. Use a short, unique string per widget per page. A practical pattern: `<page-prefix><widget-abbrev>` (e.g. `cp1txtpndpo` for Capacity Planning's "Pending POs" text label).
+
+### 7. Apply to ALL pages
+
+The section label and button must appear on **every page in the app** -- not just pages within the new section. This ensures the full navigation is visible regardless of which page the user is on.
+
+## Example: Adding "Pending POs" section
+
+Files created on each page's `widgets/Container1/`:
+- `Text2.json` -- "Pending POs" label, topRow 18, bottomRow 22
+- `Button2.json` -- "SLx Pending" button, topRow 22, bottomRow 26
+
+On `Pending POs - SLx Pending` page: Button2 is highlighted.
+On all Sales pages: Button2 is white/inactive.
+
+## Reference
+
+- Button styling and highlight pattern: **navigation-button-add** skill.
+- Creating the page itself: **create-new-page** skill.
+- Row layout: 4 rows per widget, 2-row gap between sections.