Add backdrop click to Add/Edit Template modal, document dialog UI standards

- Add backdrop click handlers to showAddTemplateModal() and editTemplate() to close modal when clicking outside
- Create new "Frontend UI Patterns" section in CLAUDE.md documenting modal dialog standards
- Document backdrop click behavior with code example
- Document close button requirements for dialogs with Cancel buttons

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

server/src/wled_controller/static/app.js

@@ -2281,7 +2281,16 @@ async function showAddTemplateModal() {
     // Load available engines
     await loadAvailableEngines();
 
-    document.getElementById('template-modal').style.display = 'flex';
+    // Show modal
+    const modal = document.getElementById('template-modal');
+    modal.style.display = 'flex';
+
+    // Add backdrop click handler to close modal
+    modal.onclick = function(event) {
+        if (event.target === modal) {
+            closeTemplateModal();
+        }
+    };
 }
 
 // Edit template
@@ -2315,7 +2324,16 @@ async function editTemplate(templateId) {
         document.getElementById('template-test-results').style.display = 'none';
         document.getElementById('template-error').style.display = 'none';
 
-        document.getElementById('template-modal').style.display = 'flex';
+        // Show modal
+        const modal = document.getElementById('template-modal');
+        modal.style.display = 'flex';
+
+        // Add backdrop click handler to close modal
+        modal.onclick = function(event) {
+            if (event.target === modal) {
+                closeTemplateModal();
+            }
+        };
     } catch (error) {
         console.error('Error loading template:', error);
         showToast(t('templates.error.load') + ': ' + error.message, 'error');