41 lines
2.2 KiB
Markdown
41 lines
2.2 KiB
Markdown
---
|
|
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). |