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

name, description

name	description
create-new-page	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).