Create a new page skill and no docs director rule

.cursor/rules/no-docs-directory.mdc

@@ -0,0 +1,12 @@
+---
+description: Do not create or add to the /docs directory
+alwaysApply: true
+---
+
+# No /docs Directory Changes
+
+Do **not** create new files under `docs/` or add to or modify any content in the `docs/` directory.
+
+- Do not create new files in `docs/`.
+- Do not edit or append to existing files in `docs/`.
+- When a task would normally involve documentation (e.g. README updates, changelog notes), skip any changes under `docs/` unless the user explicitly asks to change that directory.

.cursor/skills/create-new-page/SKILL.md

@@ -0,0 +1,81 @@
+---
+name: create-new-page
+description: Creates a new Sales page by cloning Sales - Capacity Planning, adds a nav button for it on every page, and sets the new page name for the button label and the page Heading. Use when the user asks to add a new page, clone a page, create a page from template, or add a new Sales navigation page.
+---
+
+# Create New Page (Clone + Navigation)
+
+Creates a new page from the **Sales - Capacity Planning** template, registers it in the app, adds a navigation button on every page, and uses the **new page name** for both the nav button label and the Heading on the new page.
+
+## Prerequisites
+
+- **New page name**: User must provide the exact display name (e.g. `Sales - Units Planning`). Use it consistently for:
+  - Page folder name: `pages/<New Page Name>/`
+  - Page JSON filename: `<New Page Name>.json`
+  - `unpublishedPage.name` and `unpublishedPage.slug` (slug = lowercase, spaces → hyphens, e.g. `sales-units-planning`)
+  - Heading widget `text` on the new page
+  - Nav button `text` on all pages
+  - `navigateTo('<New Page Name>', {}, 'SAME_WINDOW')` in the new button’s `onClick`
+- Follow the **navigation-button-add** skill for button styling and placement.
+
+## Instructions
+
+### 1. Clone the template page
+
+- **Template**: `pages/Sales - Capacity Planning/`
+- **Target**: `pages/<New Page Name>/`
+- Copy the entire directory tree (widgets, queries, and the page JSON).
+- In the new folder, rename the page file to `<New Page Name>.json` and update inside it:
+  - `unpublishedPage.name` → `<New Page Name>`
+  - `unpublishedPage.slug` → slug form (e.g. `sales-units-planning`)
+- Replace all widget IDs in the new page’s JSON files with new unique IDs (e.g. new UUIDs or unique strings) so the new page does not conflict with the template. Update any `parentId` references to the new IDs.
+- In every widget JSON under the new page, replace any reference to the old page name or slug with the new page name or slug (e.g. in queries or onClick that might point to the template page).
+
+### 2. Set the new page’s Heading
+
+- In `pages/<New Page Name>/widgets/Heading.json`, set:
+  - `"text": "<New Page Name>"`  
+  so the heading always shows the page name (no dynamic binding; `appsmith.page` is undefined in this app).
+
+### 3. Register the new page in the app
+
+- In `application.json`, add to the `pages` array one entry:
+  - `{"id": "<New Page Name>", "isDefault": false}`
+- Do not change `isDefault: true` on the existing default page unless the user asks to make the new page default.
+
+### 4. Add the new nav button on every page
+
+Apply the **navigation-button-add** skill:
+
+- **Pages to update**: Every existing Sales page (Sales - Capacity Planning, Sales - Units Shipped, Sales - Units Ordered) **and** the new page.
+- **On each page**, in `widgets/Container1/`, add a new button (e.g. copy `Button1Copy2` and name the new file `Button1Copy3` or next available name):
+  - `text`: `<New Page Name>` (or a short label that matches the page, e.g. “Units Planning” if the full name is “Sales - Units Planning” — prefer using the **new page name** for consistency unless the user asks for a shorter label).
+  - `onClick`: `{{navigateTo('<New Page Name>', {}, 'SAME_WINDOW');}}`
+  - `buttonColor`: 
+    - On the **new page only**: `{{appsmith.theme.colors.backgroundColor}}` and add `{"key":"buttonColor"}` to `dynamicBindingPathList`.
+    - On all **other** pages: `#ffffff`, and do not add `buttonColor` to `dynamicBindingPathList`.
+  - Place the new button below the existing nav buttons: set `topRow` / `bottomRow` so it stacks vertically (e.g. copy from the last button and add 4 rows for the new one).
+  - Assign a new `widgetId` and `widgetName` for the new button on each page.
+- Update `Container1.json` (or the parent that lists children) so the new button is included in the layout if the DSL is widget-list based.
+
+### 5. Verify
+
+- Run `git status` / `git diff` and confirm only intended files were added or changed.
+- Ensure no duplicate `widgetId` values across pages and that the new page’s slug and name are used consistently.
+
+## Summary
+
+| Item | Value |
+|------|--------|
+| Template | Sales - Capacity Planning |
+| New page folder | `pages/<New Page Name>/` |
+| Heading text | `<New Page Name>` |
+| Nav button text | `<New Page Name>` (or user-specified short label) |
+| Nav button onClick | `navigateTo('<New Page Name>', {}, 'SAME_WINDOW')` |
+| Highlight (new page) | `buttonColor`: `{{appsmith.theme.colors.backgroundColor}}` |
+| Inactive (other pages) | `buttonColor`: `#ffffff` |
+
+## Reference
+
+- Nav button behavior and layout: follow **navigation-button-add** skill.
+- Slug format: lowercase, spaces to hyphens (e.g. `Sales - Units Planning` → `sales-units-planning`).

.cursor/skills/navigation-button-add/SKILL.md

@@ -16,8 +16,7 @@ description: Implements a new Sales navigation button with the existing highligh
    - Set `buttonColor` to `#ffffff` (inactive) unless the new button replaces the active page; then set its own definition (`on the relevant page`) to `appsmith.theme.colors.backgroundColor`.
    - Ensure `dynamicBindingPathList` stays empty when `buttonColor` is static white; populate it only if the button needs dynamic logic.
    - Point `onClick` to `navigateTo` the new page slug and keep `placement`/`responsiveBehavior` matching other nav buttons.
-4. **Update documentation**: After modifying navigation, update `docs/README.md` with a short note about the new button and its color behavior.
-5. **Run git status/diff** to verify only the intended files changed before reporting back.
+4. **Run git status/diff** to verify only the intended files changed before reporting back.
 
 ## Examples
 
@@ -26,5 +25,4 @@ description: Implements a new Sales navigation button with the existing highligh
  2. Set `text` to “Units Ordered”, `onClick` to `navigateTo('Sales - Units Ordered', {}, 'SAME_WINDOW');`.
  3. Assign `buttonColor` to `#ffffff` for inactive cases and to `appsmith.theme.colors.backgroundColor` inside the `Sales - Units Ordered` page definition for highlight.
  4. Adjust `bottomRow` incrementally so buttons stack vertically.
- 5. Mention the update in `docs/README.md`.
 

.gitignore

@@ -1,4 +1,6 @@
 # Cursor AI reference documentation (internal use only)
 .cursor/*
+!.cursor/rules/
+!.cursor/rules/**
 !.cursor/skills/
 !.cursor/skills/**

docs/README.md

@@ -2,4 +2,3 @@
 
 - Added the **Units Ordered** nav button beneath **Units Shipped** on every Sales canvas so the new sales dashboard route is reachable from Capacity Planning, Units Ordered, and Units Shipped.
 - Each page now hardcodes the highlighted button to `appsmith.theme.colors.backgroundColor` (what used to be the default background) and keeps the inactive buttons at `#ffffff`, so the active canvas still renders distinctly without referencing `appsmith.page`.
-- The **Heading** widget on each page uses `{{ appsmith.page.name }}` so it always shows the current page name. If your Appsmith version doesn’t expose `appsmith.page.name`, set the Heading **Text** back to a static page title or use an onPageLoad that sets `appsmith.store` and bind the Heading to that.

pages/Sales - Capacity Planning/widgets/Heading.json

@@ -3,9 +3,6 @@
   "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
   "bottomRow": 5,
   "dynamicBindingPathList": [
-    {
-      "key": "text"
-    },
     {
       "key": "truncateButtonColor"
     },
@@ -43,7 +40,7 @@
   "responsiveBehavior": "fill",
   "rightColumn": 64,
   "shouldTruncate": false,
-  "text": "{{ appsmith.page.name }}",
+  "text": "Sales - Capacity Planning",
   "textAlign": "LEFT",
   "textColor": "#231F20",
   "topRow": 0,

pages/Sales - Units Ordered/widgets/Heading.json

@@ -3,9 +3,6 @@
   "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
   "bottomRow": 5,
   "dynamicBindingPathList": [
-    {
-      "key": "text"
-    },
     {
       "key": "truncateButtonColor"
     },
@@ -43,7 +40,7 @@
   "responsiveBehavior": "fill",
   "rightColumn": 64,
   "shouldTruncate": false,
-  "text": "{{ appsmith.page.name }}",
+  "text": "Sales - Units Ordered",
   "textAlign": "LEFT",
   "textColor": "#231F20",
   "topRow": 0,

pages/Sales - Units Shipped/widgets/Heading.json

@@ -3,9 +3,6 @@
   "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
   "bottomRow": 5,
   "dynamicBindingPathList": [
-    {
-      "key": "text"
-    },
     {
       "key": "truncateButtonColor"
     },
@@ -43,7 +40,7 @@
   "responsiveBehavior": "fill",
   "rightColumn": 64,
   "shouldTruncate": false,
-  "text": "{{ appsmith.page.name }}",
+  "text": "Sales - Units Shipped",
   "textAlign": "LEFT",
   "textColor": "#231F20",
   "topRow": 0,