/

.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.