magna-power/appsmith-statistics-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New skills

Browse Source
This commit is contained in:
ivarsbariss
2026-02-27 13:20:38 +01:00
parent f207f55565
commit 68ad98ede4
4 changed files with 246 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
.cursor/skills/navigation-button-add/SKILL.md
View File

@@ -1,28 +1,54 @@
---
name: navigation-button-add
description: 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.
description: Implements a new navigation button with the existing highlight/default colors. Use when the user asks to add buttons to the nav block, mentions page 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).
1. **Understand the current navigation canvas** by checking `pages/*/widgets/Container1/`. Each page reuses the same container structure. The navigation is organized into **sections**, each with a Text label and one or more buttons:
- **Sales** section: `Text1` (label), `Button1` (Capacity Planning), `Button1Copy` (Units Shipped), `Button1Copy2` (Units Ordered)
- **Pending POs** section: `Text2` (label), `Button2` (SLx Pending)
- Future sections follow the same pattern (`Text3`/`Button3`, etc.)
2. **Follow the established color scheme**:
- The highlighted button uses `appsmith.theme.colors.backgroundColor`.
- The highlighted button (current page) 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. **Run git status/diff** to verify only the intended files changed before reporting back.
- Copy one of the existing `Button*` definitions, adjusting `text`, `onClick`, `widgetId`, `widgetName`, `topRow`, `bottomRow`, and any other placement metadata so it fits below the existing items in its section.
- Set `buttonColor` to `#ffffff` (inactive) unless the button is on its own page; then set its definition to `appsmith.theme.colors.backgroundColor` with `dynamicBindingPathList: [{"key": "buttonColor"}]`.
- Ensure `dynamicBindingPathList` stays empty when `buttonColor` is static white.
- Point `onClick` to `navigateTo('<Page Name>', {}, 'SAME_WINDOW')` and keep `placement`/`responsiveBehavior` matching other nav buttons.
- Set `parentId` to the **Canvas widget ID** inside that page's `Container1.json` (the `widgetId` of the `CANVAS_WIDGET` child). This varies per page -- always read `Container1.json` to find the correct value.
4. **Add the button on ALL pages** (not just pages in the same section). Every page gets the full navigation.
5. **If adding a button to a new section**, follow the **navigation-section-add** skill first to create the section label.
6. **Run git status/diff** to verify only the intended files changed before reporting back.
## Row Layout
Each widget occupies 4 rows. Sections are separated by a 2-row gap:
| Widget | topRow | bottomRow |
|--------|--------|-----------|
| Text1 "Sales" | 0 | 4 |
| Button1 "Capacity Planning" | 4 | 8 |
| Button1Copy "Units Shipped" | 8 | 12 |
| Button1Copy2 "Units Ordered" | 12 | 16 |
| *(2-row gap)* | 16 | 18 |
| Text2 "Pending POs" | 18 | 22 |
| Button2 "SLx Pending" | 22 | 26 |
When adding a new button within a section, increment from the last button's `bottomRow` by 4. When adding a new section after the last one, add 2 rows gap, then 4 for the label, then 4 for each button.
## 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.
- *Adding "Units Ordered" button to Sales section*:
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. Set `topRow: 12`, `bottomRow: 16` (next slot after Units Shipped).
- *Adding a second button to Pending POs section*:
1. Create `Button2Copy.json` in each page's `Container1`.
2. Set `topRow: 26`, `bottomRow: 30` (next slot after SLx Pending at 22-26).
3. Follow the same highlight/inactive pattern.