kubai087/kubai-icons

Kubai Icons

Ce skill fournit une implémentation complète : un moteur, un ensemble d'icônes d'exemple, une page de démonstration, un script d'auto-vérification et un script d'exportation statique. Votre travail consiste à écrire de nouvelles icônes selon les règles, pas à réécrire le moteur.

Ce que contient le paquet

• PROMPT.md : Toutes les règles de conception, chaque règle est une exigence stricte. Lisez-le en entier avant de commencer.
• src/engine.js : Le moteur. Dérivation des couleurs, masque de contour extérieur, épaisseur avec dégradé, ombre portée et filtre de lueur interne, animation par interpolation, palettes. Tout est ici. Réutilisez-le directement, ne le modifiez pas.
• src/icons.js : Icônes d'exemple. Ajoutez les nouvelles icônes dans le même format.
• src/app.js, index.html : Page de démonstration. ORDER détermine quelles icônes sont affichées et dans quel ordre.
• scripts/check.mjs : Script d'auto-vérification. Capture les images au repos, au survol, et les images intermédiaires du survol en 24px, 28px et toutes les palettes dans un Chrome sans tête, et lit les erreurs de script de chaque page. Les fichiers temporaires sont placés dans le répertoire de sortie et sont automatiquement nettoyés.
• scripts/export.mjs : Exportation statique. Rend les icônes en fichiers SVG indépendants, sans dépendance aux scripts ou feuilles de style. Vous pouvez spécifier la palette, la couleur principale et l'état (repos ou survol).

Procédure

1. Lisez PROMPT.md.

2. Déterminez le format de livraison. Si l'utilisateur n'est pas clair, demandez d'abord :

   • Dynamique (par défaut) : SVG + JS, se déforme au survol, exécuté par src/engine.js dans la page. Idéal pour les sites web et les interfaces capables d'exécuter du JS.
   • Statique : fichiers .svg indépendants, sans animation, utilisables partout : outils de conception, applications natives, documentation, <img>. Si l'utilisateur mentionne "découpe", "fichier SVG", "mettre dans Figma", "utiliser dans l'app", etc., c'est statique.
   • Les deux : Faites la version dynamique, puis exportez une version statique.

3. Déterminez où travailler :

   • Nouvel ensemble : Copiez index.html, src/, scripts/ du skill vers l'emplacement cible (un nouveau répertoire ou un nouveau dépôt), et travaillez sur cette copie. Conservez les avis de droits d'auteur en tête de chaque fichier ; PROMPT.md et SKILL.md restent dans le skill uniquement, ne les copiez pas (voir l'article 3 de LICENSE).
   • Ajout à un ensemble existant : Ajoutez directement dans src/icons.js de cet ensemble.
   • Contribution au dépôt open-source kubai-icons : Chaque icône dans un fichier séparé sous icons/, format, nommage et badge selon docs/authoring.md, auto-vérification avec node tools/check.mjs --only nom --with folder,mail,download. Les règles restent celles de PROMPT.md.
   • Uniquement statique : Copiez également dans un répertoire de travail pour dessiner, et ne remettez que les SVG exportés à l'utilisateur.

4. Lisez le code du produit, listez les fonctionnalités. Pour la version dynamique : chaque fonctionnalité s'écrit "objet + action au survol" ; pour la version statique, déterminez simplement l'objet (section 1 de PROMPT.md).

5. Avant d'écrire chaque icône, trouvez dans src/icons.js un ou deux exemples dont la structure est la plus proche (par exemple, pour quelque chose qui s'ouvre, regardez l'enveloppe et le calendrier ; pour quelque chose qui se découpe en avant-plan, regardez le téléchargement et l'upload ; pour quelque chose qui tourne, regardez l'engrenage et l'étoile), et suivez leur écriture.

6. Ajoutez le nom dans ORDER de src/app.js. Les exemples inutilisés ne seront pas affichés s'ils ne sont pas dans ORDER.

7. Exécutez l'auto-vérification, et comparez les nouvelles icônes avec quelques icônes existantes :

   node scripts/check.mjs --only nouvelle_icone_A,nouvelle_icone_B --with dossier,email,telechargement
   

   Les captures sont dans check-out/. Vérifiez point par point avec la liste de la section 10 de PROMPT.md ; si le script signale des erreurs, corrigez-les d'abord. Pour les actions de va-et-vient, regardez frames.png ; pour les interstices, ajoutez --scale 3 ; pour les marques sur fond clair, ajoutez --accent #F59E0B, en changeant toutes les icônes avec la même couleur principale. Sans --only, l'ensemble complet est vérifié. Pour la version statique, rest.png, size-24.png, size-28.png et palettes.png suffisent.

8. Une fois que tout est validé, mettez à jour le nombre d'icônes mentionné dans le README, et le nombre de colonnes par point d'arrêt sur la page de démonstration (le nombre de colonnes doit diviser le nombre total d'icônes, les points d'arrêt peuvent être ajoutés ou supprimés).

9. Pour le statique, exportez vers le répertoire indiqué par l'utilisateur et dites-lui quelle palette est utilisée :

   node scripts/export.mjs --only nouvelle_icone_A,nouvelle_icone_B --palette colore --out repertoire_cible
   

   --palette sélectionne la palette par nom (coloré, bleu-gris, céladon, menthe, lavande, abricot, noir), --accent #hex applique une couleur principale à toutes les icônes, --state hover exporte l'état de fin de survol, --size définit la taille en pixels, --pad ajoute une marge pour l'ombre portée. Un fichier nom.svg par icône.

Environnement

• Node 18 ou supérieur, et Chrome. Le chemin du navigateur peut être remplacé par la variable d'environnement CHROME.
• Toutes les vérifications se font en mode sans tête, sans ouvrir de fenêtre visible et sans affecter le navigateur utilisé par l'utilisateur.

---

Copyright (c) 2026 Kubai087. Sous licence Kubai Icons License ; voir LICENSE.