---
name: frontend-creator
description: 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](references/css_variables.md) pour les couleurs et variables de layout.
- **Communication API** : Voir [api_usage.md](references/api_usage.md) pour savoir comment appeler le backend.
- **Patterns UI** : Voir [ui_patterns.md](references/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).