diff --git a/.cursorrules b/.cursorrules index 2a61e6f26..af88564a3 100644 --- a/.cursorrules +++ b/.cursorrules @@ -38,6 +38,20 @@ const tailwindCssBestPractices = [ "Implement responsive design with Tailwind CSS", ] +// PrimeVue deprecated components - DO NOT USE +const deprecatedPrimeVueComponents = [ + "DO NOT use deprecated PrimeVue components. Use these replacements instead:", + "Dropdown → Use Select (import from 'primevue/select')", + "OverlayPanel → Use Popover (import from 'primevue/popover')", + "Calendar → Use DatePicker (import from 'primevue/datepicker')", + "InputSwitch → Use ToggleSwitch (import from 'primevue/toggleswitch')", + "Sidebar → Use Drawer (import from 'primevue/drawer')", + "Chips → Use AutoComplete with multiple enabled and typeahead disabled", + "TabMenu → Use Tabs without panels", + "Steps → Use Stepper without panels", + "InlineMessage → Use Message component" +] + // Additional instructions const additionalInstructions = ` 1. Leverage VueUse functions for performance-enhancing styles @@ -51,4 +65,5 @@ const additionalInstructions = ` 9. Use Vite for fast development and building 10. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json. +11. Never use deprecated PrimeVue components listed above `; diff --git a/CLAUDE.md b/CLAUDE.md index 707ca1a5e..7979193b1 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -36,3 +36,13 @@ - Use Vite for fast development and building - Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json. - Avoid using `@ts-expect-error` to work around type issues. We needed to employ it to migrate to TypeScript, but it should not be viewed as an accepted practice or standard. +- DO NOT use deprecated PrimeVue components. Use these replacements instead: + * `Dropdown` → Use `Select` (import from 'primevue/select') + * `OverlayPanel` → Use `Popover` (import from 'primevue/popover') + * `Calendar` → Use `DatePicker` (import from 'primevue/datepicker') + * `InputSwitch` → Use `ToggleSwitch` (import from 'primevue/toggleswitch') + * `Sidebar` → Use `Drawer` (import from 'primevue/drawer') + * `Chips` → Use `AutoComplete` with multiple enabled and typeahead disabled + * `TabMenu` → Use `Tabs` without panels + * `Steps` → Use `Stepper` without panels + * `InlineMessage` → Use `Message` component