83.3K+Télécharger
Aller au guide d’utilisation
shader-devpar MiniMax

Shader Dev Skill.

Un skill Claude Code et Codex pour le travail d'image : shaders GLSL : ray marching, SDF, fluides, particules, visuels procéduraux.

  • Images et art génératif
  • Art génératif
Télécharger OpenDesignVoir le guide d'utilisation
MiniMax-AI/skills · skills/shader-dev/SKILL.mdSKILL.md
--- name: shader-dev description: Comprehensive GLSL shader techniques for creating stunning visual effects — ray marching, SDF modeling, fluid simulation, particle systems, procedural generation, lighting, post-processing, and more. --- ## Invocation ## Skill Structure ## How to Use ## Technique Routing Table ## Technique Index ## WebGL2 Adaptation Rules
En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 16 663 caractères au total

01 Ce qu'il fait

Ce que fait le skill shader-dev dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Un skill GLSL unique regroupant 36 techniques de shader compatibles ShaderToy pour des effets visuels en temps réel : géométrie SDF, ray marching et éclairage, simulation de fluides, de particules et de physique, phénomènes naturels (océan, terrain, atmosphère, volumétrie), génération procédurale, post-traitement, audio et débogage WebGL2.

Une table de routage associe chaque requête à des fichiers de technique sous techniques/ contenant les principes de base, les étapes d'implémentation et des modèles de code complets, avec des mathématiques plus approfondies dans reference/. Elle applique ensuite des règles d'adaptation WebGL2 lors de la génération de pages HTML autonomes — gl_FragCoord.xy à la place de fragCoord, un wrapper void main() pour mainImage, const à la place de macros d'appel de fonction — dans un budget de performance fixe, avec des recettes rapides et des substitutions de débogage visuel.

Ce qu'il produit

  • GLSL compatible ShaderToy pour une des 36 techniques d'effet, utilisable comme base d'un visuel en temps réel.
  • Une page HTML autonome dont le canvas remplit le viewport, se redimensionne avec la fenêtre, repose sur un fond noir sans barres de défilement, et expose les uniforms compatibles ShaderToy iTime, iResolution, iMouse et iFrame.
  • Effets multi-passes construits sur des framebuffers WebGL2 avec des buffers ping-pong pour un état de type Buffer A/B.
  • Une chaîne de post-traitement finalisée, telle qu'un tone mapping ACES combiné à un SSAA 2x et une vignette, pour des scènes photoréalistes.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Router la requête vers une technique

    L'agent fait correspondre la formulation de l'utilisateur à la table de routage des techniques pour choisir une technique principale plus des techniques combinables, plutôt que de lire les 36 fichiers.

  2. 02
    Lire le fichier de technique

    Chaque fichier sous techniques/ est autonome et fournit les principes, des étapes d'implémentation ordonnées et un modèle de code complet pour l'effet.

  3. 03
    Passer aux références/ pour les mathématiques

    Lorsque des dérivations ou des schémas avancés sont nécessaires, l'agent suit le lien situé à la fin du fichier de technique vers le guide reference/ correspondant.

  4. 04
    Porter une sortie ShaderToy vers WebGL2

    Pour les livrables HTML autonomes, les règles d'adaptation WebGL2 sont appliquées au code de style ShaderToy avant l'écriture de la page.

  5. 05
    Assembler des recettes en un pipeline

    Les recettes rapides enchaînent des modules — géométrie, rendu, éclairage, atmosphère, post-traitement — pour former un pipeline complet plutôt qu'un simple effet.

  6. 06
    Déboguer en remplaçant la sortie

    La sortie est temporairement remplacée par les normales, le nombre d'étapes, la profondeur ou des bandes de SDF pour localiser un défaut avant de restaurer la couleur réelle.

02 Trouvez celui qui vous convient

Quand utiliser la compétence shader-dev

Utilisez la compétence shader-dev dans Claude Code ou Codex lorsque le travail concerne ce type de traitement d'image. L'adéquation et les limites ci-dessous sont tirées du fichier de la compétence elle-même.

Bon choix

  • Modélisation d'objets et de scènes 3D purement à partir de calculs mathématiques, où des champs de distance signée pilotent des surfaces implicites plutôt que des maillages chargés.
  • Aspects de fluide, de fumée et d'encre nécessitant un véritable solveur avec advection, diffusion et projection de pression sur des tampons ping-pong.
  • Plans de ciel et d'atmosphère nécessitant une diffusion Rayleigh/Mie, des rayons de dieu ou une approximation de diffusion sous-surface.
  • Audio procédural intégré directement dans le shader, des oscillateurs et enveloppes jusqu'à la synthèse FM en passant par les filtres.
  • Travail 2D stylisé basé sur le remappage polaire, le pliage kaléidoscope et les systèmes de coordonnées en spirale.

Connaître les limites

  • Non adapté aux budgets GPU illimités : l'environnement cible peut être un rendu logiciel headless, donc le nombre d'itérations doit rester faible.
  • Les macros ne sont pas un moyen sûr de définir les limites de boucle — des constantes à l'exécution sont attendues dans les boucles sur certaines versions d'ES.
  • Les fonctions d'aide pour le terrain n'acceptent que des coordonnées XZ, donc une position vec3 complète doit être swizzlée avant d'être transmise.

Quoi fournir

  • Une demande d'effet en langage clairLe skill est invoqué via /shader-dev <request>, le texte de la demande atterrissant dans $ARGUMENTS ; le formuler en termes d'effets permet à la table de routage de le faire correspondre.
  • La catégorie d'effet, dans le vocabulaire de la tableLa table de routage est indexée sur des intentions comme les effets fluide/fumée/encre, associant chacune à une technique principale et aux techniques avec lesquelles la combiner.

03 Dans le skill

Règles que le skill shader-dev donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Émettre les en-têtes de shader WebGL2

    Chaque shader généré commence par #version 300 es, le fragment shader ajoute precision highp float; et déclare out vec4 fragColor, avec varying converti en in/out.

  2. Utiliser gl_FragCoord.xy, jamais fragCoord

    Le fragCoord de ShaderToy n'existe pas dans WebGL2, donc les calculs de coordonnées doivent lire gl_FragCoord.xy, sinon le shader ne compilera pas.

  3. Envelopper mainImage dans un véritable Main()

    Les modèles ShaderToy conservent void mainImage(out vec4 fragColor, in vec2 fragCoord) et un void main() standard l'appelle avec les coordonnées de fragment réelles.

  4. Déclarer les fonctions appelées avant celles qui les appellent

    GLSL n'a pas de déclarations anticipées, donc une fonction comme getSunDirection() doit être définie avant getAtmosphere() qui l'appelle, ou le code doit être réordonné.

  5. Ne jamais mettre d'appels de fonction dans #define

    Une macro telle que #define SUN_DIR normalize(vec3(...)) est invalide ; remplacez-la par une const contenant une valeur normalisée pré-calculée.

  6. Éviter les mots réservés GLSL comme noms

    Des identifiants tels que patch, cast, sample, filter, input, output, common, partition et active sont réservés et ne doivent pas être utilisés comme variables.

  7. Déclarer l'état JS en haut

    Dans la page HTML, les variables let/const doivent être placées en haut du bloc script avant toute fonction qui les référence, sinon la Temporal Dead Zone lève une erreur et le canvas reste blanc.

  8. Rester dans le budget de performance

    La boucle principale de ray marching est plafonnée à 128 pas, les boucles internes d'échantillonnage de volume et d'éclairage à 32, et FBM à 6 octaves, car le déploiement peut utiliser un rendu logiciel headless limité.

04 Mettez-le en pratique

Installer shader-dev dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter shader-dev à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/MiniMax-AI/skills --skill shader-dev

Forme générique de la CLI skills pour skills/shader-dev/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au Skill une première tâche de travail d'image

Adaptez ce prompt avec votre propre contenu et contraintes, puis exécutez-le dans Claude Code ou Codex.

Example prompt
create a raymarched SDF scene with soft shadows

Source : exemple SKILL.md (verbatim).

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Vérifiez que chaque appel correspond à sa définition, y compris le nombre et les types de paramètres — une float fbm(vec3 p) ne peut pas recevoir un vec2 uv.
  • Appliquez une correspondance de types stricte : les scalaires nécessitent des constructeurs explicites, et un vec2 ne peut pas être lu avec .z.
  • Réécrivez tout opérateur ternaire qui sélectionne entre des valeurs de struct en if/else, ce que ESSL n'autorise pas.
  • Comptez les itérations de boucles imbriquées par pixel par rapport au plafond de 1000 itérations, qui gèle le navigateur en cas de dépassement.
  • Visualisez les normales comme col = nor * 0.5 + 0.5 et recherchez le banding, ce qui signifie que l'epsilon est trop grand.
  • Si un emplacement d'uniform revient null, le compilateur a optimisé l'uniform — utilisez-le d'une manière qui ne peut pas être supprimée.

Dans OpenDesign shader-dev est intégré : Plugins → Skills, sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
MiniMax
Repository
github.com/MiniMax-AI/skills Branche main
Fichier du skill
skills/shader-dev/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 60aaae5
License
MIT D'après LICENSE ; SKILL.md indique « MIT ».
Étoiles du dépôt
13 547 Capture GitHub prise le 14/09/2026 pour l'ensemble du dépôt MiniMax-AI/skills, qui contient 6 skills dans ce catalogue. Ce n'est pas une note ni un compteur d'utilisation pour shader-dev.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. InvocationS'exécute comme /shader-dev <request>, la requête étant transmise via $ARGUMENTS.
  2. Structure du skillDisposition de SKILL.md, guides par technique dans techniques/, et fichiers reference/ plus approfondis.
  3. Comment utiliserQuatre étapes : router, lire les fichiers de technique, suivre les liens de référence, appliquer les règles WebGL2.
  4. Table de routage des techniquesAssocie chaque intention utilisateur à une technique principale plus des techniques à combiner.
  5. Index des techniquesLes 36 techniques regroupées par catégorie, chacune avec une description en une ligne.
  6. Règles d'adaptation WebGL2Conversions de ShaderToy vers WebGL2 : version, fragCoord, wrapper main, macros, pièges.
  7. Configuration de la page HTMLExigences pour une page autonome : complète
Description du skill lui-même
« Techniques GLSL complètes pour créer des effets visuels époustouflants — ray marching, modélisation SDF, simulation de fluides, systèmes de particules, génération procédurale, éclairage, post-traitement, et plus encore. »

Description en en-tête du SKILL.md. Le fichier complet fait environ 16 663 caractères. Lire le fichier complet sur GitHub.

Shader Dev

Exécutez shader-dev sur une tâche de travail sur image réelle.

Le skill shader-dev est inclus dans OpenDesign. Téléchargez l'application, sélectionnez le skill dans Plugins → Skills, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/MiniMax-AI/skills --skill shader-dev