serv_benchmark/.gemini/skills/frontend-creator/SKILL.md

name, description

name	description
frontend-creator	Spécialisé dans la création et l'amélioration du frontend (HTML/CSS/JS Vanilla) de Linux BenchTools. Utilisez ce skill pour ajouter des fonctionnalités UI, améliorer le design (Monokai), corriger des bugs JS ou intégrer des endpoints API dans l'interface.

Frontend Creator - Linux BenchTools

Ce skill guide la modification et l'évolution de l'interface utilisateur de Linux BenchTools.

Principes de Développement

1. Vanilla JS uniquement : Ne pas introduire de frameworks lourds (React, Vue, etc.). Utiliser les API standard du navigateur.
2. Rendu par template strings : Le HTML est généré dynamiquement en JS via des template strings.
3. Thème Monokai : Respecter les variables de couleur et le style "Dark Mode" établi.
4. Modularité : Utiliser les classes globales partagées (window.BenchAPI, window.BenchUtils, window.IconManager).

Ressources de Référence

Consultez ces fichiers pour des détails spécifiques :

• Design & Styles : Voir css_variables.md pour les couleurs et variables de layout.
• Communication API : Voir api_usage.md pour savoir comment appeler le backend.
• Patterns UI : Voir ui_patterns.md pour les fonctions de rendu et la gestion des icônes.

Workflows Typiques

Ajouter un bouton d'action

1. Localiser la fonction render... appropriée dans le fichier JS (ex: devices.js).
2. Ajouter le HTML du bouton dans le template string (utiliser les classes .icon-btn ou .btn).
3. Ajouter un addEventListener dans la fonction d'initialisation (souvent bindDetailActions ou similaire).

Créer une nouvelle page

1. Créer le fichier HTML dans frontend/.
2. Inclure les CSS de base (main.css, monokai.css, variables.css).
3. Inclure les JS globaux (js/api.js, js/utils.js, js/icon-manager.js).
4. Créer un fichier JS dédié pour la logique de la page.

Vérifications Post-Modification

• Vérifier que les icônes s'affichent (appel à IconManager.inlineSvgIcons).
• Vérifier la compatibilité mobile (responsive).
• Tester les cas d'erreur API (affichage de toast ou message d'erreur).