appsmith-statistics-app/.cursor/skills/create-new-page/SKILL.md

name, description

name	description
create-new-page	Creates a new 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 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, Pending POs - SLx Pending). 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 to hyphens, e.g. pending-pos-slx-pending)
  • 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.
• If the page belongs to a new section (e.g. "Pending POs" section distinct from "Sales"), follow the navigation-section-add skill to add the section label on all pages.

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. pending-pos-slx-pending)
• 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. Add gitSyncId (CRITICAL)

Appsmith's git sync uses gitSyncId to track entities. Without this field, Appsmith will auto-remove the page and query on the next pull/sync.

• Page JSON (<New Page Name>.json): Add "gitSyncId" as the first field in the root object.
• Query metadata (queries/<query_name>/metadata.json): Add "gitSyncId" as the first field in the root object.

Format: "<24-char-hex>_<uuid-v4>"

Generate unique IDs:

python3 -c "import uuid; print(uuid.uuid4().hex[:24] + '_' + str(uuid.uuid4()))"

Use the same 24-char hex prefix for both the page and its queries (they share a creation context), but a unique UUID suffix for each.

Example (page JSON):

{
  "gitSyncId": "3ac30122d2934ca9bf65e36a_54bc4b88-d468-4faa-bab0-80921aa88795",
  "unpublishedPage": { ... }
}

Example (query metadata):

{
  "gitSyncId": "3ac30122d2934ca9bf65e36a_da6910cc-4263-496f-ba35-ffc773eddaae",
  "id": "PageName_query_name",
  ...
}

3. 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).

4. 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.

5. Add the new nav button on every page

Apply the navigation-button-add skill:

• Pages to update: All existing pages and the new page.
• On each page, in widgets/Container1/, add a new button:
  • text: short label for the page (e.g. "SLx Pending" for "Pending POs - SLx Pending").
  • 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 existing nav items within its section. Each button occupies 4 rows (e.g. topRow 22, bottomRow 26).
  • Assign a new unique widgetId and widgetName for the new button on each page.
  • Set parentId to the Canvas widget ID inside that page's Container1.json (the widgetId of the CANVAS_WIDGET child). This varies per page -- read Container1.json to find it.

6. 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.
• Confirm gitSyncId is present in both the page JSON and every query metadata.

Summary

Item	Value
Template	Sales - Capacity Planning
New page folder	pages/<New Page Name>/
gitSyncId	<24-char-hex>_<uuid-v4> in page JSON + query metadata
Heading text	<New Page Name>
Nav button text	Short label (e.g. "SLx Pending")
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.
• New nav sections: follow navigation-section-add skill.
• Slug format: lowercase, spaces to hyphens (e.g. Pending POs - SLx Pending -> pending-pos-slx-pending).
• gitSyncId format: <24-char-hex>_<uuid-v4>. Without this, Appsmith auto-removes the entity on sync.