diff --git a/README.md b/README.md index bb31877f..e7ca7a8f 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,11 @@ # Mantis Free React Material UI Dashboard Template [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Get%20Mantis%20Free%20React%20-%20The%20Most%20Beautiful%20Material-UI%20Designed%20Admin%20Dashboard%20Template%20&url=https://mantisdashboard.com/free&via=codedthemes&hashtags=react,materialui,nextjs,webdev,developers,typescript) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) -[![Price](https://img.shields.io/badge/price-FREE-0098f7.svg)](https://github.com/codedthemes/mantis-free-react-admin-template/blob/master/LICENSE) -[![GitHub package version](https://img.shields.io/github/package-json/v/codedthemes/mantis-free-react-admin-template)](https://github.com/codedthemes/mantis-free-react-admin-template/) -[![Download ZIP](https://img.shields.io/badge/Download-ZIP-blue?style=flat-square&logo=github)](https://codedthemes.com/item/mantis-free-mui-admin-template/) +[![React: 19](https://img.shields.io/badge/React-19-skyblue.svg)](https://react.dev) +[![Material: 9](https://img.shields.io/badge/Material_UI-9-blue.svg)](https://mui.com/material-ui) +[![Next: 16](https://img.shields.io/badge/NextJS-16-black.svg)](https://nextjs.org) +[![GitHub package version](https://img.shields.io/github/package-json/v/codedthemes/mantis-free-react-admin-template?color=lightgrey)](https://github.com/codedthemes/mantis-free-react-admin-template/) +[![Download ZIP](https://img.shields.io/badge/Download-ZIP-green?style=flat-square&logo=github)](https://codedthemes.com/item/mantis-free-mui-admin-template/) [![Join Discord](https://img.shields.io/badge/Join-Discord-5865F2?style=flat-square&logo=discord&logoColor=white)](https://discord.com/invite/p2E2WhCb6s) Mantis is a free and open source React dashboard template made using the Material UI React component library with aim of flexibility and better customizability. @@ -29,13 +31,11 @@ Mantis has Ant Design principal on top of the Material UI React component librar - [Technology Stack](#technology-stack) - [Mantis Figma UI Kit](#mantis-figma-ui-kit) - [Other Technologies](#other-technologies) -- πŸ’°[Save more with Big Bundle](#save-more-with-big-bundle)πŸ’° -- [More React Dashboard Templates](#more-react-dashboard-templates) +- [More React Dashboard Templates from CodedThemes](#more-react-dashboard-templates-from-codedthemes) - [Issues?](#issues) - [License](#license) -- [Contributor](#contributor) +- [Community and Support](#community-and-support) - [Useful Resources](#useful-resources) -- [Community](#community) - [Follow us](#follow-us) ## Getting Started @@ -74,6 +74,7 @@ Mantis offers everything needed to build an advanced dashboard application. In t - Support React19. - Professional user interface. - Material UI React components(MUI v7). +- Prompt Library for centralized access to prebuilt AI prompts. - Fully responsive, all modern browser supported. - Easy to use code structure - Flexible & high-Performance code @@ -85,15 +86,22 @@ The [Pro version](https://mantisdashboard.com/) of Mantis react template include | [Mantis Free](https://mantisdashboard.com/free/) | [Mantis](https://mantisdashboard.com/) | | ---------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------- | -| **7** Demo pages | **85+** demo pages | +| **7** Demo pages | Demo pages (100+) | | - | βœ“ Multi-language | | - | βœ“ Dark/Light Mode πŸŒ“ | | - | βœ“ TypeScript version | +| - | βœ“ Next JS 16 | | - | βœ“ Design files (Figma) | | - | βœ“ Multiple color options | | - | βœ“ RTL | -| - | βœ“ JWT authentications | -| - | βœ“ [More components](https://mantisdashboard.com/components-overview/autocomplete) | +| - | Applications (5+) | +| - | βœ“ Form Validation | +| - | Layout (11+) | +| - | Plugins (9+) | +| - | React Table (21+) | +| - | βœ“ ApexChart + MUI Chart | +| - | βœ“ Authentications ( JWT, Auth0, Supabase, AWS, Firebase ) | +| - | [Components](https://mantisdashboard.com/components-overview/autocomplete) (299+) | | βœ“ [MIT License](https://github.com/codedthemes/mantis-free-react-admin-template/blob/master/LICENSE) | βœ“ [Pro License](https://mui.com/store/license/) | ## Documentation @@ -102,11 +110,19 @@ The [Pro version](https://mantisdashboard.com/) of Mantis react template include ## Browser support - +

+ Chrome + Edge + Safari + Firefox + Opera +

## Technology Stack -- Material UI V7 +- [Material UI V7](https://material-ui.com/) +- [React 19.2](https://react.dev/) +- [Next JS 16](https://nextjs.org/) - Built with React Hooks API. - React context API for state management. - SWR. @@ -117,9 +133,9 @@ The [Pro version](https://mantisdashboard.com/) of Mantis react template include ## Mantis Figma UI Kit -| FREE | PRO | -| --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -| Figma Free | Figma Pro | +| FREE | PRO | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Figma Free | Figma Pro | ## Other Technologies @@ -129,17 +145,13 @@ The [Pro version](https://mantisdashboard.com/) of Mantis react template include |

| [**Free**](https://codedthemes.com/item/mantis-bootstrap-free-admin-template/) | [**Pro**](https://codedthemes.com/item/mantis-bootstrap-admin-dashboard/) | |

| [**Free**](https://codedthemes.com/item/mantis-free-vuetify-vuejs-admin-template/) | [**Pro**](https://codedthemes.com/item/mantis-vue-admin-template/) | -## Save more with Big Bundle +## More React Dashboard Templates from CodedThemes -[![bundle-image](https://org-public-assets.s3.us-west-2.amazonaws.com/Banners/Bundle+banner.png)](https://links.codedthemes.com/jhFBJ) - -## More React Dashboard Templates - -| Dashboard | FREE | PRO | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -| | [**Free**](https://codedthemes.com/item/berry-mui-free-react-admin-template/) | [**Pro**](https://codedthemes.com/item/berry-material-react-admin-template/) | -| | [**Free**](https://codedthemes.com/item/datta-able-react-free-admin-template/) | [**Pro**](https://codedthemes.com/item/datta-able-react-admin-template/) | -| | [**Free**](https://codedthemes.com/item/gradient-able-reactjs-free-admin-template/) | [**Pro**](https://codedthemes.com/item/gradient-able-reactjs-admin-dashboard/) | +| Dashboard | FREE | PRO | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | +| | [**Free**](https://github.com/codedthemes/berry-free-react-admin-template) | [**Pro**](https://mui.com/store/items/berry-react-material-admin) | +| | [**Free**](https://codedthemes.com/item/datta-able-react-free-admin-template/) | [**Pro**](https://codedthemes.com/item/datta-able-react-admin-template/) | +| | [**Free**](https://codedthemes.com/item/gradient-able-reactjs-free-admin-template/) | [**Pro**](https://codedthemes.com/item/gradient-able-reactjs-admin-dashboard/) | ## Issues @@ -150,20 +162,11 @@ Please generate a [Github issue](https://github.com/codedthemes/mantis-free-reac - Licensed under [MIT](https://github.com/codedthemes/mantis-free-react-admin-template/blob/master/LICENSE) - Copyright Β© [CodedThemes](https://codedthemes.com/) -## Contributor - -**CodedThemes Team** - -- https://x.com/codedthemes -- https://github.com/codedthemes - -**Rakesh Nakrani** +## Community and Support -- https://x.com/rakesh_nakrani - -**Brijesh Dobariya** - -- https://x.com/dobaria_brijesh +- **GitHub Discussion** - [Ask questions and share ideas](https://github.com/codedthemes/mantis-free-react-admin-template/discussions) +- **X/Twitter** β€” [@codedthemes](https://x.com/codedthemes), [@rakesh_nakrani](https://x.com/rakesh_nakrani) [@dobaria_brijesh](https://x.com/dobaria_brijesh) +- **Join Discord** – [Connect with the community](https://discord.com/invite/dW9cBZMJ) ## Useful Resources @@ -174,15 +177,9 @@ Please generate a [Github issue](https://github.com/codedthemes/mantis-free-reac - [Affiliate Program](https://codedthemes.com/affiliate/) - [Blogs](https://blog.codedthemes.com/) -## Community - -- πŸ‘₯Follow [@codedThemes](https://x.com/codedthemes) -- πŸ”—Join [Discord](https://discord.com/invite/p2E2WhCb6s) -- πŸ””Subscribe to [CodedTheme Blogs](https://blog.codedthemes.com/) - ## Follow Us -- [Twitter](https://twitter.com/codedthemes) 🐦 +- [X/Twitter](https://twitter.com/codedthemes) 🐦 - [Dribbble](https://dribbble.com/codedthemes) πŸ€ - [Github](https://github.com/codedthemes) πŸ™ - [LinkedIn](https://www.linkedin.com/company/codedthemes/) πŸ’Ό diff --git a/prompts/apps/cleanup-pages.prompt.md b/prompts/apps/cleanup-pages.prompt.md deleted file mode 100644 index a5eb2f56..00000000 --- a/prompts/apps/cleanup-pages.prompt.md +++ /dev/null @@ -1,36 +0,0 @@ - - - - -I want to specifically focus on the **{{KEEP_PAGE_NAME}}** page/section. -Please remove all other sample pages and unnecessary components from the codebase to clean it up. - -**Rules for Removal:** - -1. **Identify the Page to Keep:** Ensure you clearly understand which page or section is "{{KEEP_PAGE_NAME}}". If "{{KEEP_PAGE_NAME}}" is "minimal", remove all sample pages. -2. **Delete Page Files:** - - `src/pages/component-overview/`: Remove files NOT belonging to {{KEEP_PAGE_NAME}}. - - `src/pages/extra-pages/`: Remove files NOT belonging to {{KEEP_PAGE_NAME}} (e.g., `sample-page.jsx`). - - `src/sections/`: Remove directories/files NOT used by the dashboard or the page you are keeping. -3. **Clean Global References (Crucial):** - - **Layouts:** Check `src/layout/Dashboard/Drawer/DrawerContent/Navigation` and `src/layout/Dashboard/` for any hardcoded links to deleted pages. - - **Landing/Main Page:** Check `src/pages/dashboard/` or `src/index.jsx` for imports of deleted components. -4. **Update Routing & Navigation:** - - `src/routes/MainRoutes.jsx`: Remove routes **AND** their imports for the pages being deleted. - - `src/menu-items/`: - - Update `utilities.jsx`, `page.jsx`, and `support.jsx` to remove links to deleted pages. - - Update `index.jsx` to exclude entire menu groups if all their items are removed. -5. **Final Verification:** Run a global search for the deleted page names (e.g., "color", "shadow", "sample-page") to ensure no "dead" imports or navigation items remain in the codebase. - -## Example - -**Input:** -I want to focus on a **minimal** dashboard. Remove all other sample pages. - -**Output:** - -- Deleted `src/pages/component-overview/color.jsx`, `shadows.jsx`, `typography.jsx`, etc. -- Deleted `src/pages/extra-pages/sample-page.jsx`. -- Updated `src/routes/MainRoutes.jsx` to remove sample page routes. -- Updated `src/menu-items/utilities.jsx`, `src/menu-items/page.jsx`, and `src/menu-items/support.jsx` to remove menu items. -- Updated `src/menu-items/index.jsx` to only include the dashboard group. diff --git a/prompts/auth/set-login-as-default-page.prompt.md b/prompts/auth/set-login-as-default-page.prompt.md new file mode 100644 index 00000000..b097882e --- /dev/null +++ b/prompts/auth/set-login-as-default-page.prompt.md @@ -0,0 +1,45 @@ + + + + + + +Please configure the React routing to make the Login page as the default starting page of the application (`/`). + +Follow these specific requirements: +1. **Modify `src/routes/index.tsx`**: + * Remove the default Landing Page route that is currently serving `/`. + * Ensure `LoginRoutes` is imported and included in the `createBrowserRouter` array. + +2. **Modify `src/routes/LoginRoutes.tsx`**: + * Change the login route definition to serve at the root path `/`. + * **Crucially**, keep the existing `login` path (`/login`) as well. This is to ensure that redirects (like after logout) that point to `/login` do not break. + * The `LoginRoutes` structure should handle both `/` and `/login` pointing to the login component (e.g., ``). + +## Example Expected Changes + +**In `src/routes/index.tsx`:** +Remove the landing page block: +```tsx +// REMOVE THIS BLOCK +// { +// path: '/', +// element: , +// children: [ +// { +// index: true, +// element: +// } +// ] +// }, +``` + +**In `src/routes/LoginRoutes.tsx`:** +Update the children array for your auth provider (e.g., JWT): +```tsx +children: [ + { path: '/', element: }, // NEW: Default route + { path: 'login', element: }, // KEEP: For compatibility/redirects + // ... other existing routes +] +``` diff --git a/prompts/common/change-branding.prompt.md b/prompts/core/change-branding.prompt.md similarity index 68% rename from prompts/common/change-branding.prompt.md rename to prompts/core/change-branding.prompt.md index 668443d3..9d59efe1 100644 --- a/prompts/common/change-branding.prompt.md +++ b/prompts/core/change-branding.prompt.md @@ -1,26 +1,24 @@ - + - + -Act as a Senior Frontend Developer. Your goal is to rebrand this application from **{{OLD_BRAND}}** to **{{NEW_BRAND}}** with ZERO errors. You must update all configuration files, global text references, and asset pointers. + -**INPUT VARIABLES:** +Your goal is to rebrand this application from **{{OLD_BRAND}}** to **{{NEW_BRAND}}** with ZERO errors. You must update all configuration files, global text references, and asset pointers. +**INPUT VARIABLES:** - **Old Brand:** `{{OLD_BRAND}}` (e.g., Mantis) - **New Brand:** `{{NEW_BRAND}}` (e.g., Able Pro) -- **New Package Name:** `{{NEW_PACKAGE_NAME}}` (e.g., able-pro-react-js) +- **New Package Name:** `{{NEW_PACKAGE_NAME}}` (e.g., able-pro-react-ts) --- ### **Step 1: Global Text Replacement** - **Action:** - 1. **Case Sensitive Search:** Search for `{{OLD_BRAND}}` and replace with `{{NEW_BRAND}}` in all text files (excluding `node_modules`). 2. **Lowercase Search:** Search for `{{OLD_BRAND_LOWER}}` (lowercase) and replace with `{{NEW_BRAND_LOWER}}` (lowercase). - - _Constraint:_ Do NOT replace external library names (e.g., `mantis-ui` if it is a third-party dependency) unless you are sure it is an internal package. - - _Constraint:_ Check URLs carefully. Update links to documentation or repositories if they should point to the new brand, but keep them if they are historical references. + * *Constraint:* Do NOT replace external library names (e.g., `mantis-ui` if it is a third-party dependency) unless you are sure it is an internal package. + * *Constraint:* Check URLs carefully. Update links to documentation or repositories if they should point to the new brand, but keep them if they are historical references. --- @@ -28,19 +26,16 @@ Act as a Senior Frontend Developer. Your goal is to rebrand this application fro **Target File:** `package.json` **Action:** - 1. Update `"name"` property to `{{NEW_PACKAGE_NAME}}`. 2. Update `"description"` references. **Target File:** `public/index.html` **Action:** - 1. Update `` to `{{NEW_BRAND}} React Admin Dashboard`. 2. Update `<meta name="title">` and `<meta name="description">` content. **Target File:** `README.md` **Action:** - 1. Replace the H1 title with `{{NEW_BRAND}} Material React Admin Template`. 2. Update installation steps and descriptions to reflect `{{NEW_BRAND}}`. @@ -48,32 +43,27 @@ Act as a Senior Frontend Developer. Your goal is to rebrand this application fro ### **Step 3: Update Components & Assets** -**Target File:** `src/components/logo/LogoMain.jsx` & `src/components/logo/LogoIcon.jsx` +**Target File:** `src/components/logo/LogoMain.tsx` & `src/components/logo/LogoIcon.tsx` **Action:** - 1. Update the `alt` text for images/SVGs to `{{NEW_BRAND}}`. - ```jsx + ```tsx // Example - alt = "{{NEW_BRAND}}"; + alt="{{NEW_BRAND}}" ``` -**Target File:** `src/layout/Dashboard/Drawer/DrawerHeader/index.jsx` +**Target File:** `src/layout/Dashboard/Drawer/DrawerHeader/index.tsx` **Action:** - 1. Ensure the Logo component is correctly wrapped and accessible. -**Target File:** `src/layout/Dashboard/Footer.jsx` +**Target File:** `src/layout/Dashboard/Footer.tsx` **Action:** - 1. Update copyright text to reflect the new brand or company if applicable. --- ### **Step 4: Landing Page & Content Updates** - **Target Directories:** `src/sections/landing/`, `src/pages/` **Action:** - 1. Iterate through all Landing Page blocks (Header, Feature, Demo, Testimonial, etc.). 2. Replace marketing copy: "Welcome to {{OLD_BRAND}}" -> "Welcome to {{NEW_BRAND}}". 3. Update `alt` tags in `CardMedia` or `img` elements: `alt="{{OLD_BRAND}}"` -> `alt="{{NEW_BRAND}}"`. @@ -81,7 +71,6 @@ Act as a Senior Frontend Developer. Your goal is to rebrand this application fro --- ### **Final Verification Checklist** - - [ ] `package.json` name is updated. - [ ] Browser tab title reads `{{NEW_BRAND}}...`. - [ ] "Welcome to {{OLD_BRAND}}" no longer appears on the Landing Page. diff --git a/prompts/core/remove-section.prompt.md b/prompts/core/remove-section.prompt.md new file mode 100644 index 00000000..3cf97ba1 --- /dev/null +++ b/prompts/core/remove-section.prompt.md @@ -0,0 +1,53 @@ +<!-- + DESCRIPTION: When triggered, the agent must immediately begin making changes to the codebase. It handles file deletion, routing updates, menu cleanup, and surgical removal. +--> + +<!-- VIDEO_ID: 9bZkp7q19f0 --> + +<!-- AGENT: Project Cleanup Specialist --> + +# Task: Execute Dynamic Page & Section Removal + +**CRITICAL:** This is not a planning task. You are authorized and required to use your tools (`run_command`, `replace_file_content`, `multi_replace_file_content`) to permanently modify the codebase based on the parameters below. + +## Target Items + +- **Pages to Remove (Paths):** {{PAGE_PATHS}} +- **Sections to Remove (Names/Labels):** {{SECTION_NAMES}} + +## Execution Workflow + +### 1. Identify and Delete Pages + +For every entry in `{{PAGE_PATHS}}`: + +1. **Delete Files:** Use `run_command` (e.g., `rm -rf`) to permanently delete the file or directory. +2. **Clean Routes:** Open `src/routes/` files and delete the route objects and imports associated with these paths. +3. **Clean Sidebar/Menu:** Open `src/menu-items/` files and remove the corresponding menu objects. +4. **Clean Loadables:** Search for any `Loadable` wrappers for these paths and remove them. + +### 2. Surgical Section Removal + +For every section name in `{{SECTION_NAMES}}`: + +1. **Locate:** Search for the component name or specific text label across the project. +2. **Surgical Strike:** Identify the parent wrapper (Grid, Stack, Card) and remove the entire block. +3. **Purge Imports:** Immediately remove the imports for the deleted sections and any unused local state/variables. + +### 3. Integrated Cleanup & Verification + +1. **Lint Fixes:** Check for and fix any "unused import" or "broken reference" errors introduced by these removals. +2. **Empty Containers:** Remove any structural wrappers that are now empty. + +## Strict Rules + +1. **Immediate Execution:** Start making changes immediately. Do not ask for confirmation for specific files once the paths are provided. +2. **Atomic Commits (Optional):** If possible, group related deletions. +3. **No Placeholders:** If you remove a section, ensure the layout remains balanced. + +--- + +**INPUT PROVIDED:** + +- **PAGE_PATHS:** {{PAGE_PATHS}} +- **SECTION_NAMES:** {{SECTION_NAMES}} diff --git a/prompts/core/scroll-to-top.prompt.md b/prompts/core/scroll-to-top.prompt.md new file mode 100644 index 00000000..41d6b0ea --- /dev/null +++ b/prompts/core/scroll-to-top.prompt.md @@ -0,0 +1,41 @@ +<!-- DESCRIPTION: Add Scroll to Top Button to Landing Page: Implement a floating "Scroll to Top" button specifically for the Landing Page to improve navigation on long scrollable content. --> + +<!-- VIDEO_ID: 9bZkp7q19f0 --> + +<!-- AGENT: Claude Opus 4.5 --> + +## Requirements + +### 1. Feature Description +Add a **Floating "Scroll to Top" Button** to the Landing Page (`src/pages/landing.tsx`). +- **Behavior**: The button should appear when the user scrolls down (e.g., > 200px) and disappear when at the top. +- **Action**: Clicking the button should smoothly scroll the window back to the top. +- **Positioning**: Fixed at the bottom-right corner, ensuring it doesn't overlap with the existing "Preset Color" switcher if present. +- **Styling**: Circular Floating Action Button (FAB) with primary theme color. + +### 2. Files to Modify/Create + +| File | Action | Purpose | +|------|--------|---------| +| `src/components/ScrollToTopButton.tsx` | **CREATE** | Reusable Scroll to Top button component (if not exists) | +| `src/pages/landing.tsx` | **MODIFY** | Import and add the button to the landing page layout | + +--- + +### 3. Implementation Details + +#### **1. Reusable Component (`src/components/ScrollToTopButton.tsx`)** + +If this component doesn't exist yet, create it. It uses `useScrollTrigger` for visibility. + +### 4. Positioning Considerations +- The Landing page currently has a "Preset Color" switcher that slides in at `bottom: { xs: 0, sm: '25%' }` and `right: { xs: 0, sm: 16 }`. +- Ensure `ScrollToTopButton` is positioned to avoid collision, e.g., `bottom: 30px` and `right: 30px`. +- Since the Preset Color switcher takes up vertical space on the side, moving the ScrollToTop button to **bottom-right** (standard) is fine, as the color switcher is `bottom: 25%` (approx middle-bottom-right). + +## Acceptance Criteria +- [ ] Scroll to Top button appears after scrolling down 200px. +- [ ] Button is hidden when at the top of the page. +- [ ] Clicking smoothly scrolls to top. +- [ ] Button does not overlap with the existing Color Preset switcher. +- [ ] Consistent styling with the rest of the Landing page. diff --git a/prompts/menu/manage-menu.prompt.md b/prompts/layouts/manage-menu.prompt.md similarity index 100% rename from prompts/menu/manage-menu.prompt.md rename to prompts/layouts/manage-menu.prompt.md diff --git a/prompts/layouts/remove-group-title.prompt.md b/prompts/layouts/remove-group-title.prompt.md new file mode 100644 index 00000000..1062cc82 --- /dev/null +++ b/prompts/layouts/remove-group-title.prompt.md @@ -0,0 +1,43 @@ +<!-- DESCRIPTION: This prompt is used to remove group titles (section headers) from the menu drawer sidebar navigation --> + +<!-- VIDEO_ID: 9bZkp7q19f0 --> + +<!-- AGENT: Claude Opus 4.5 (Thinking) --> + +I want to **remove the group titles (section headers) from the menu drawer sidebar**. + +Currently, the sidebar navigation shows group titles like "Dashboard", "Widget", "Applications", etc. above each section. I want to hide/remove these titles while keeping all the menu items and their functionality intact. + +**Rules for Execution:** + +1. **Locate the NavGroup Component:** + * Find the component responsible for rendering navigation groups in the drawer + * Identify where the group titles are rendered using the `subheader` prop + +2. **Remove Group Titles:** + * Modify the subheader to not render the title typography + * Keep only a divider as the subheader, or remove it entirely if no separator is needed + +3. **Adjust Spacing:** + * Update any spacing/margin that was added specifically for the title display + +4. **Preserving Functionality:** + * Keep all menu items and navigation working + * Keep collapse/expand functionality + * Keep icons and tooltips + * Keep mini drawer behavior + * Do NOT delete any routes or components + +5. **Final Verification:** + * Ensure the application builds without errors + * Verify the sidebar still functions correctly (click navigation, collapse menus) + * Test in both expanded and mini drawer modes + +## Example + +**Input:** +Remove all group titles from the sidebar + +**Output:** +* Modified the NavGroup component to not render group titles +* **Result:** Sidebar now shows menu items without section headers, with optional dividers between groups diff --git a/prompts/menu/remove-icon.prompt.md b/prompts/layouts/remove-icon.prompt.md similarity index 100% rename from prompts/menu/remove-icon.prompt.md rename to prompts/layouts/remove-icon.prompt.md diff --git a/prompts/theming/remove-animation.prompt.md b/prompts/theming/remove-animation.prompt.md new file mode 100644 index 00000000..9f7330a3 --- /dev/null +++ b/prompts/theming/remove-animation.prompt.md @@ -0,0 +1,136 @@ +<!-- DESCRIPTION: This prompt guides the removal of all animations (Framer Motion & MUI) from the application. It focuses heavily on the DIFFICULT task of removing AnimateButton wrappers across 50+ files. --> + +<!-- VIDEO_ID: 9bZkp7q19f0 --> + +<!-- AGENT: Gemini 3 Pro (High) --> + +# Remove Animations (Disable or Delete) + +## Decision Logic: Disable vs. Delete + +Analyze the user's request to choose the correct path: + +**PATH A: "Disable" / "Turn off" / "Temporary" / "Static UI"** + +> Follow **Section 1 (Configuration)**. Keep libraries installed, set durations to 0. + +**PATH B: "Remove" / "Delete" / "Uninstall" / "Clean up"** + +> Follow **Section 2 (Permanent Removal)**. Uninstall `framer-motion`, **refactor 50+ files** to remove animation wrappers, but **KEEP** the component files (sanitized) to prevent broken references. + +--- + +## Role + +You are a **Frontend Refactoring Specialist**. +Your task is to safely remove animation dependencies without breaking the React component tree. + +--- + +## !Important + +**Execution Rules:** +| Follow each step sequentially +| Use `grep_search` to find usages. Do not guess file paths. + +--- + +## Section 1: Disabling (Configuration Only - Path A) + +_Skip this section if user wants Permanent Removal._ + +1. **Disable MUI Transitions** in `src/themes/index.tsx`: + - Override `transitions.duration` (set all to 0). +2. **Disable Framer Motion** in `src/App.tsx`: + - Wrap app in `<MotionConfig transition={{ duration: 0 }}>`. +3. **Neutralize AnimateButton**: + - Edit `src/components/@extended/AnimateButton.tsx` to force `duration: 0` in its internal logic. + +--- + +## Section 2: Permanent Removal (Refactor & Update - Path B) + +_This is a complex refactoring task. Perform it methodically._ + +### Step 1: Uninstall + +- Run `npm uninstall framer-motion` (or equivalent). + +### Step 2: Refactor `AnimateButton` (The Hard Part) + +`AnimateButton` wraps buttons in ~50 files. You must unwrap them all. + +1. **Find Usages**: + - Run `grep_search` for `AnimateButton` in `src/`. + - _Note: There will be many results._ + +2. **Iterate & Unwrap**: + - For **EVERY** file found: + - Remove the import: `import AnimateButton from 'components/@extended/AnimateButton';` + - Remove the opening tag: `<AnimateButton ...>` (and any props like `scale`, `type`). + - Remove the closing tag: `</AnimateButton>` + - **KEEP THE CHILDREN**. Do not delete the button inside. + + _Example Refactor:_ + + ```typescript + // BEFORE + import AnimateButton from 'components/@extended/AnimateButton'; + // ... + <AnimateButton scale={{ hover: 1.1 }}> + <Button variant="contained">Submit</Button> + </AnimateButton> + + // AFTER + // (Import removed) + // ... + <Button variant="contained">Submit</Button> + ``` + +### Step 3: Refactor Other Animations + +1. **Find `Animation` Component**: + - Search in `src/sections/landing/`. + - Unwrap references to `<Animation>`. +2. **Find direct `motion.*` usage**: + - Search for `<motion.` or `framer-motion` imports. + - Convert `<motion.div>` to `<div>`. + - Remove `initial`, `animate`, `exit`, `variants` props. + +### Step 4: Sanitize Definition File (Do Not Delete) + +Instead of deleting the file (which might cause issues if we missed a reference), replace its content with a standard fallback. + +1. **Modify File**: `src/components/@extended/AnimateButton.tsx` +2. **Replace Content**: + + ```typescript + import { ReactNode } from 'react'; + + // Defaults to simple passthrough to support any leftover references + export default function AnimateButton({ children }: { children?: ReactNode }) { + return <>{children}</>; + } + ``` + + _This ensures any missed references don't crash the app, while removing the dependency on framer-motion._ + +3. **Modify File**: `src/components/@extended/AnimateCard.tsx` +4. **Replace Content**: + + ```typescript + import { ReactNode } from 'react'; + + export default function Animation({ children }: { children: ReactNode }) { + return <>{children}</>; + } + ``` + +--- + +## Verification Checklist + +- [ ] `npm run build` passes (No "Module not found" errors). +- [ ] `AnimateButton` usages are refactored (unwrapped) in specific sections. +- [ ] `framer-motion` is uninstalled. +- [ ] `AnimateButton.tsx` is sanitized (no framer-motion imports). diff --git a/prompts/auth/customize-validation-messages.prompt.md b/prompts/ui-elements/customize-validation-messages.prompt.md similarity index 100% rename from prompts/auth/customize-validation-messages.prompt.md rename to prompts/ui-elements/customize-validation-messages.prompt.md