makepad-2.0-shaders

Aperçu du skill makepad-2.0-shaders

À quoi sert ce skill

Le skill makepad-2.0-shaders vous aide à écrire et déboguer du code shader Makepad 2.0, en particulier lorsque vous devez utiliser des blocs pixel: fn() / vertex: fn(), des formes Sdf2d ou un dessin de widgets personnalisé. Il est surtout utile quand votre objectif n’est pas « apprendre la 3D ou les shaders en général », mais « faire en sorte que cette interface Makepad s’affiche correctement, avec la bonne syntaxe shader, les bonnes variables et la bonne gestion des couleurs ».

Qui devrait l’installer

Le skill makepad-2.0-shaders convient bien aux workflows de Frontend Development qui touchent à l’UI Makepad, aux contrôles personnalisés, aux états animés ou au rendu de formes. Installez-le si vous avez besoin de conseils fiables sur la structure des shaders, les variables intégrées, le premultiplied alpha ou le dessin basé sur SDF, plutôt que d’un code généré de façon générique par un prompt.

En quoi il est différent

Contrairement à un simple prompt, le skill s’appuie sur des conventions propres à Makepad : blocs shader en ligne, instance contre uniform, Sdf2d.viewport et règles de premultiply-alpha. C’est important, car de petites erreurs de syntaxe ou de couleur peuvent casser le rendu ou provoquer des bugs visuels subtils. Le skill makepad-2.0-shaders est surtout utile quand vous voulez limiter les faux pas et obtenir du code qui colle réellement au moteur.

Comment utiliser le skill makepad-2.0-shaders

Installez-le et déclenchez-le

Utilisez le flux d’installation du repo indiqué dans les métadonnées du skill, puis invoquez le skill makepad-2.0-shaders lorsque votre tâche implique du travail shader dans Makepad. Un bon déclencheur est une demande qui nomme le widget ou l’effet recherché, l’objectif visuel et l’état d’entrée auquel le shader doit réagir. Par exemple : « Crée un shader draw_bg Makepad pour un bouton arrondi avec états hover et active, en utilisant Sdf2d et le premultiplied alpha. »

Donnez au skill les bonnes entrées

L’utilisation de makepad-2.0-shaders s’améliore lorsque vous fournissez :

• la cible de rendu : draw_bg, draw_text, draw_quad ou un objet de dessin personnalisé
• l’exigence visuelle : bordure, remplissage, glow, masque, dégradé, ombre ou transition
• le modèle d’état : hover, active, selected, couleur de thème, sensibilité au DPI
• toute contrainte stricte : ancien code à conserver, limites de performance ou absence de texture sampling

Un prompt faible dit : « fais un shader cool ». Un prompt plus solide dit : « Réécris ce shader draw_bg pour dessiner un contour de 1px et un remplissage intérieur doux, conserve l’animation hover et garde Pal.premul correct. »

Lisez ces fichiers d’abord

Commencez par SKILL.md pour la syntaxe de base et les garde-fous, puis lisez references/shader-reference.md pour les types de variables, la gestion des couleurs et les fonctions shader personnalisées. Utilisez references/sdf2d-reference.md lorsque la tâche repose sur des formes et que vous avez besoin des primitives SDF exactes, des combinateurs ou de l’ordre de remplissage/contour. Cet ordre de lecture offre le chemin le plus rapide entre l’intention et un code valide.

Workflow qui donne de meilleurs résultats

Pour obtenir les meilleurs résultats avec le guide makepad-2.0-shaders, procédez dans cet ordre :

1. définissez le widget et la cible visuelle
2. choisissez si le shader doit renvoyer sdf.result ou une couleur premultiplied
3. mappez chaque entrée vers instance, uniform ou varying
4. rédigez le bloc shader minimal
5. testez le comportement visuel au hover, à l’état active et sur des tailles high-DPI

Si vous partez d’un autre moteur, traduisez d’abord l’effet sur le plan conceptuel, pas ligne par ligne. La syntaxe des shaders Makepad et la gestion de l’alpha sont suffisamment différentes pour qu’un port direct échoue souvent.

FAQ du skill makepad-2.0-shaders

Est-ce réservé aux shaders avancés ?

Non. Le skill makepad-2.0-shaders est utile même pour des formes UI simples si vous voulez une syntaxe Makepad correcte et moins de bugs de rendu. Les débutants en tirent souvent le plus de bénéfices lorsqu’ils ont un objectif visuel clair et peuvent reprendre un pattern exact du moteur au lieu d’en improviser un.

Quand ne faut-il pas l’utiliser ?

Évitez-le si vous n’écrivez pas de code Makepad, si vous avez seulement besoin de théorie GLSL générique, ou si votre tâche n’a rien à voir avec le dessin de widgets et le rendu UI basé sur SDF. Ce n’est pas non plus le meilleur choix si vous avez besoin d’une aide large en frontend design sans aucune implémentation shader.

En quoi est-il meilleur qu’un prompt classique ?

Un prompt classique peut produire un code shader plausible, mais le skill makepad-2.0-shaders est calibré sur les conventions réelles de Makepad : pixel: fn(), Sdf2d, Pal.premul et la distinction entre état par instance et état partagé. Cela réduit le risque d’obtenir un résultat qui « a l’air correct » mais casse dans le repo.

Convient-il aux workflows de Frontend Development ?

Oui, surtout pour les systèmes UI qui mêlent layout et rendu. makepad-2.0-shaders for Frontend Development est particulièrement pertinent lorsque votre tâche frontend inclut des visuels personnalisés, des états animés ou un style de composants réutilisables qui doit compiler dans Makepad.

Comment améliorer le skill makepad-2.0-shaders

Donnez un rôle au shader, pas seulement un style

Les meilleures entrées décrivent ce que le shader doit faire, pas seulement son apparence. Par exemple, « rendre un bouton enfoncé avec une ombre douce qui s’estompe au hover » est bien plus utile que « fais quelque chose de moderne ». Le premier prompt permet à makepad-2.0-shaders de choisir la bonne logique de forme, le bon câblage des états et le bon flux de couleurs.

Évitez les modes d’échec courants

La plupart des mauvais résultats viennent de détails manquants : syntaxe shader obsolète, oubli du premultiplied alpha, ou déclaration d’état au mauvais niveau de scope. Un autre problème fréquent est une géométrie de forme trop vague. Si vous avez besoin d’un rectangle arrondi, décrivez-le comme box, box_all ou une autre primitive SDF, plutôt que de demander simplement « une carte arrondie ».

Demandez du code qui correspond à votre fichier actuel

Si vous avez déjà un widget, collez le bloc draw_* existant et indiquez ce qui doit changer. L’usage le plus utile de makepad-2.0-shaders est itératif : on conserve d’abord ce qui fonctionne, puis on modifie un comportement à la fois, comme la largeur du contour, le blending, la douceur de l’ombre ou la transition de hover.

Vérifiez avec les bons contrôles

Après le premier passage, testez le shader sur de petites et de grandes tailles, avec des thèmes clairs et sombres, et avec les bascules des états hover ou active. Si le résultat paraît incorrect, précisez le défaut exact dans votre retour : « le contour est trop épais en DPI 2.0 » ou « la couleur de remplissage est bonne, mais les bords alpha sont faux ». Ce type de retour aide le skill makepad-2.0-shaders à converger rapidement.