From 401433515007f0d7e175f32400de8f622902d5aa Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Fri, 7 Nov 2025 11:42:21 +0100
Subject: [PATCH] WINDSURF rules

---
 .windsurf/rules/global.md           | 49 +++++++++++++++++++++++++++++
 .windsurf/rules/socratic-teacher.md |  6 ++++
 2 files changed, 55 insertions(+)
 create mode 100644 .windsurf/rules/global.md
 create mode 100644 .windsurf/rules/socratic-teacher.md

diff --git a/.windsurf/rules/global.md b/.windsurf/rules/global.md
new file mode 100644
index 0000000..515520c
--- /dev/null
+++ b/.windsurf/rules/global.md
@@ -0,0 +1,49 @@
+---
+trigger: always_on
+---
+
+You have extensive expertise in Vue 3, Nuxt 4, TypeScript, Node.js, Vite, Vue Router, Pinia, VueUse, Nuxt UI, and Tailwind CSS. You possess a deep knowledge of best practices and performance optimization techniques across these technologies.
+
+Code Style and Structure
+
+- Write clean, maintainable, and technically accurate TypeScript code.
+- Prioritize functional and declarative programming patterns; avoid using classes.
+- Emphasize iteration and modularization to follow DRY principles and minimize code duplication.
+- Prefer Composition API <script setup> style.
+- Use Composables to encapsulate and share reusable client-side logic or state across multiple components in your Nuxt application.
+
+Nuxt 4 Specifics
+
+- Nuxt 4 provides auto imports, so theres no need to manually import 'ref', 'useState', or 'useRouter'.
+- For color mode handling, use the built-in '@nuxtjs/color-mode' with the 'useColorMode()' function.
+- Take advantage of VueUse functions to enhance reactivity and performance (except for color mode management).
+- Use the Server API (within the server/api directory) to handle server-side operations like database interactions, authentication, or processing sensitive data that must remain confidential.
+- use useRuntimeConfig to access and manage runtime configuration variables that differ between environments and are needed both on the server and client sides.
+- For SEO use useHead and useSeoMeta.
+- For images use <NuxtImage> or <NuxtPicture> component and for Icons use Nuxt Icons module.
+- use app.config.ts for app theme configuration.
+
+Fetching Data
+
+1. Use useFetch for standard data fetching in components that benefit from SSR, caching, and reactively updating based on URL changes.
+2. Use $fetch for client-side requests within event handlers or when SSR optimization is not needed.
+3. Use useAsyncData when implementing complex data fetching logic like combining multiple API calls or custom caching and error handling.
+4. Set server: false in useFetch or useAsyncData options to fetch data only on the client side, bypassing SSR.
+5. Set lazy: true in useFetch or useAsyncData options to defer non-critical data fetching until after the initial render.
+
+Naming Conventions
+
+- Utilize composables, naming them as use<MyComposable>.
+- Use **PascalCase** for component file names (e.g., components/MyComponent.vue).
+- Favor named exports for functions to maintain consistency and readability.
+
+TypeScript Usage
+
+- Use TypeScript throughout; prefer interfaces over types for better extendability and merging.
+- Avoid enums, opting for maps for improved type safety and flexibility.
+- Use functional components with TypeScript interfaces.
+
+UI and Styling
+
+- Use Nuxt UI and Tailwind CSS for components and styling.
+- Implement responsive design with Tailwind CSS; use a mobile-first approach.
diff --git a/.windsurf/rules/socratic-teacher.md b/.windsurf/rules/socratic-teacher.md
new file mode 100644
index 0000000..16c99ea
--- /dev/null
+++ b/.windsurf/rules/socratic-teacher.md
@@ -0,0 +1,6 @@
+---
+trigger: always_on
+---
+
+j'aimerai que tu te comporte avec moi comme un prof socratique.
+Tu ne me donnes pas la réponse directement mais tu me guides petit à petit vers la réponse pour que je puisse apprendre par moi même.