/

.gemini/skills/frontend-creator/references/api_usage.md

@@ -0,0 +1,29 @@
+# Utilisation de l'API (Client JS)
+
+Le frontend utilise une classe globale `BenchAPI` (instanciée sous `window.BenchAPI` ou `apiClient`).
+
+## Client API Global
+Le client est défini dans `js/api.js`.
+
+### Méthodes Communes
+- `getDevices(params)` : Liste les appareils.
+- `getDevice(deviceId)` : Détails d'un appareil.
+- `updateDevice(deviceId, data)` : Met à jour un appareil.
+- `getDeviceBenchmarks(deviceId, params)` : Historique des benchmarks.
+- `uploadDocument(deviceId, file, docType)` : Upload d'image ou PDF.
+
+### Exemple d'appel
+```javascript
+const apiClient = window.BenchAPI;
+
+try {
+  const devices = await apiClient.getDevices();
+  // Traiter les données
+} catch (error) {
+  console.error("Erreur API:", error);
+}
+```
+
+## Gestion des Erreurs
+L'API renvoie des erreurs détaillées. Utilisez `error.message` pour l'affichage à l'utilisateur.
+Le module `utils.js` (sous `window.BenchUtils`) propose des méthodes comme `showToast` ou `showError`.

.gemini/skills/frontend-creator/references/css_variables.md

@@ -0,0 +1,46 @@
+# Variables CSS (Thème)
+
+Le projet utilise des variables CSS pour maintenir une cohérence visuelle.
+
+## Variables de Layout
+```css
+:root {
+  /* Spacing */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+
+  /* Border Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.2s ease;
+  --transition-slow: 0.3s ease;
+
+  /* Font */
+  --font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  --font-mono: 'Courier New', Courier, monospace;
+
+  /* Icon sizing */
+  --section-icon-size: 32px;
+  --button-icon-size: 24px;
+  --icon-btn-size: 42px;
+  --icon-btn-icon-size: 26px;
+}
+```
+
+## Thème Monokai (exemple de couleurs courantes)
+Les couleurs du thème sont définies dans `monokai.css` et `themes/`.
+Généralement :
+- `--bg-primary` : Fond principal.
+- `--bg-secondary` : Fond des cartes/sections.
+- `--text-primary` : Texte principal.
+- `--color-primary` : Couleur d'accentuation (souvent jaune/orange Monokai).
+- `--border-color` : Couleur des bordures.
+- `--color-danger` : Rouge pour les erreurs/suppression.
+- `--color-success` : Vert pour les succès.

.gemini/skills/frontend-creator/references/ui_patterns.md

@@ -0,0 +1,38 @@
+# Patterns UI et Rendu
+
+Le projet utilise du JavaScript Vanilla avec des gabarits de chaînes de caractères (template strings) pour le rendu du DOM.
+
+## Rendu de Section
+La fonction `createSection` est souvent utilisée pour générer le HTML d'une section de détail.
+
+```javascript
+function createSection(id, icon, title, content, options = {}) {
+  // icon est souvent un span avec data-icon pour IconManager
+  return `
+    <section class="device-section" id="${id}">
+      <div class="section-header">
+        <h3>${icon}<span class="section-title">${title}</span></h3>
+        ${options.actionsHtml || ''}
+      </div>
+      <div class="section-body">
+        ${content}
+      </div>
+    </section>
+  `;
+}
+```
+
+## Gestion des Icônes
+Le système utilise `IconManager` pour injecter des SVG à partir d'attributs `data-icon`.
+Après avoir injecté du HTML contenant des `data-icon`, il faut appeler :
+```javascript
+if (window.IconManager) {
+  window.IconManager.inlineSvgIcons(containerElement);
+}
+```
+
+## Échappement HTML
+Utilisez toujours `window.BenchUtils.escapeHtml()` pour les données venant de l'API afin d'éviter les failles XSS.
+
+## Interaction et État
+Les pages utilisent souvent des variables d'état globales simples (ex: `isEditing`, `currentDevice`) et re-rendent la section entière lors d'un changement d'état.