feat : readme et agents

AGENTS.md

@@ -79,9 +79,6 @@ Aucune abstraction prématurée.
 
 Si une logique n’est pas utilisée immédiatement, elle ne doit pas être écrite.
 
-Ne pas introduire de complexité inutile pour une fonctionnalité simple.
-
-
 
 ## Cohérence architecturale
 
@@ -134,9 +131,6 @@ choisir la solution la plus cohérente avec le code existant
 éviter d’introduire un nouveau pattern architectural
 
 
-
-
-
 ## Actions interdites
 
 L’agent ne doit jamais :
@@ -162,6 +156,4 @@ minimal
 
 cohérent avec le dépôt
 
-immédiatement utilisable
+immédiatement utilisable
-
-Ne pas build ou exécuter du code qui n’est pas demandé explicitement ou sans validation préalable.

README.md

@@ -1,42 +1,93 @@
----
+# Projet Monitoring
-name: frontend-design
-description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-license: Complete terms in LICENSE.txt
----
 
-This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+## Installation du projet
 
-The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+### Windows
+Sur Windows, installer WSL2, Ubuntu, Docker et nvm.  
+Suivre la documentation suivante :  
+https://wiki.malio.fr/bookstack/books/environnement-de-dev/chapter/windows
 
-## Design Thinking
+### Linux
+Sur Linux, installer Docker et nvm.  
+Suivre la documentation suivante :  
+https://wiki.malio.fr/bookstack/books/environnement-de-dev/chapter/linux
 
-Before coding, understand the context and commit to a BOLD aesthetic direction:
+### Installation du projet
-- **Purpose**: What problem does this interface solve? Who uses it?
+Une fois les prérequis installés, cloner le dépôt puis installer les dépendances.
-- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
-- **Constraints**: Technical requirements (framework, performance, accessibility).
-- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
 
-**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+```bash
+npm install
+```
 
-Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
+Lancer ensuite le serveur de développement.
-- Production-grade and functional
-- Visually striking and memorable
-- Cohesive with a clear aesthetic point-of-view
-- Meticulously refined in every detail
 
-## Frontend Aesthetics Guidelines
+```bash
+npm run dev
+```
 
-Focus on:
+L’application sera accessible sur :
-- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+http://localhost:3000
-- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
-- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
-- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
-- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
 
-NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+Si une erreur liée à la version de Node apparaît, vérifier que Node ≥ 20 est utilisé via nvm.
 
-Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+nvm install 20
+nvm use 20
 
-**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+## Utilisation du projet
+### Frontend
 
-Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
+Lancer le serveur de développement.
+```
+npm run dev
+```
+Compilation pour la production.
+```
+npm run build
+```
+Prévisualisation du build de production.
+```
+npm run preview
+```
+
+## Commandes utiles
+
+Installation des dépendances.
+```
+npm install
+```
+Lancer le serveur de développement.
+```
+npm run dev
+```
+Build de production.
+```
+npm run build
+```
+Prévisualisation du build.
+```
+npm run preview
+```
+Supprimer les dépendances et réinstaller proprement.
+```
+rm -rf node_modules package-lock.json
+npm install
+Déploiement
+```
+Construire l’application.
+```
+npm run build
+```
+Les fichiers générés se trouvent dans :
+.output/
+
+Le serveur peut ensuite être lancé avec :
+```
+node .output/server/index.mjs
+```
+Il est recommandé d’utiliser un reverse proxy comme Nginx en production.
+
+### Notes
+
+Les accès SSH ou les chemins système utilisés par les endpoints doivent rester côté serveur.
+Ne jamais exposer de credentials dans le frontend.
+Les variables sensibles doivent être stockées dans un fichier .env.