appsmith-statistics-app/.cursor/skills/navigation-button-add/SKILL.md

name, description

name	description
navigation-button-add	Implements a new Sales navigation button with the existing highlight/default colors. Use when the user asks to add buttons to the nav block, mentions “Units Ordered”, “Units Shipped”, or “Sales” navigation, or instructs to keep the highlight behavior consistent with the latest change.

Navigation Button Addition

Instructions

1. Understand the current navigation canvas by checking pages/*/widgets/Container1/Button*. Each Sales page reuses the same container; the existing buttons are Button1 (Capacity Planning), Button1Copy (Units Shipped), and Button1Copy2 (Units Ordered).
2. Follow the established color scheme:
   • The highlighted button uses appsmith.theme.colors.backgroundColor.
   • The inactive buttons use #ffffff.
3. When adding a new navigation button:
   • Copy one of the existing Button* definitions, adjusting text, onClick, widgetId, widgetName, bottomRow, and any other placement metadata so it fits below the existing items.
   • 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.

Examples

• Adding “Units Ordered” button:
  1. Copy Button1Copy (Units Shipped) in each page’s Container1.

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.