Generative UI

⚠️ **Trading warning / Avertissement trading** : informationnel seulement, pas un conseil en investissement. Cette fiche vit dans une collection finance parce que ses widgets affichent souvent des données financières, mais un graphique est une couche de présentation, pas une analyse : rendre une série de prix magnifiquement ne dit rien de ce qu'elle fera ensuite, et agir sur un beau visuel comporte le même risque de perte qu'agir sur un ordinaire. Aucun résultat ici n'est une promesse de rendement. Sélectionné par Skill Harbor : le système de design complet et l'ensemble de gabarits pour l'interface générative intégrée à claude.ai, l'outil show_widget qui rend du HTML et du SVG interactifs en ligne dans une conversation. Le skill route sur le verbe, pas le nom : comment quelque chose fonctionne devient un diagramme SVG illustratif, des étapes deviennent un organigramme, une comparaison devient une grille, une série de données devient un graphique Chart.js, et une explication avec un paramètre devient une explication interactive avec curseurs et chiffres vivants. Ses règles sont strictes et arrêtées : styles d'abord, puis contenu, puis script ; surfaces plates sans gradients, ombres ni lueurs ; deux graisses de police seulement ; casse de phrase ; aucun tic de design IA générique comme les panneaux crème, les boutons pilules ou les étiquettes de section numérotées ; ressources externes seulement depuis une courte liste CDN permise ; variables CSS partout pour que le mode sombre soit obligatoire et automatique ; et chaque nombre affiché arrondi. Il livre des gabarits fonctionnels pour tableaux de bord Chart.js (avec le patron onload qui survit au streaming), diagrammes SVG sur un viewBox de 680 pixels avec classes de noeuds et de couleurs préconstruites, et explications interactives qui utilisent sendPrompt pour les suivis, plus trois fichiers de référence couvrant le système de couleurs, les patrons SVG et la configuration Chart.js. Tiré du dépôt himself65/finance-skills (MIT), où il sert de couche visuelle aux autres skills d'analyse de la collection. Bémols honnêtes : show_widget existe sur claude.ai ; dans un client sans cet outil, les mêmes gabarits produisent quand même du HTML ou du SVG autonome, mais le rendu en ligne est l'intérêt ; les jetons de design visent l'allure de l'hôte claude.ai, donc les widgets peuvent détonner dans un autre produit ; et l'ensemble de règles est délibérément restrictif, ce qui explique la constance du résultat. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.