83.3K+Download
Zur Nutzungsanleitung springen
shader-devvon MiniMax

Shader Dev Skill.

Ein Claude Code- und Codex-Skill für Bildbearbeitung: gLSL-Shader: Ray Marching, SDFs, Fluide, Partikel, prozedurale Visualisierungen.

  • Images & Generative Art
  • Generative Kunst
OpenDesign herunterladenAnleitung ansehen
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
Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 16.663 Zeichen insgesamt

01 Was es tut

Was der shader-dev Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Ein einziges GLSL-Skill, das 36 ShaderToy-kompatible Shader-Techniken für Echtzeit-Visualeffekte bündelt: SDF-Geometrie, Ray Marching und Beleuchtung, Fluid-, Partikel- und Physiksimulation, Naturphänomene (Ozean, Terrain, Atmosphäre, volumetrisch), prozedurale Generierung, Post-Processing, Audio und WebGL2-Debugging.

Eine Routing-Tabelle ordnet jede Anfrage einer Technik-Datei unter techniques/ zu, die Grundprinzipien, Implementierungsschritte und vollständige Code-Vorlagen enthält, mit tiefergehender Mathematik in reference/. Anschließend wendet sie beim Erstellen eigenständiger HTML-Seiten die WebGL2-Anpassungsregeln an – gl_FragCoord.xy statt fragCoord, ein void main()-Wrapper für mainImage, const statt Funktionsaufruf-Makros – innerhalb eines festen Performance-Budgets, mit schnellen Rezepten und visuellen Debugging-Swaps.

Was er erzeugt

  • ShaderToy-kompatibles GLSL für eine von 36 Effekt-Techniken, nutzbar als Grundlage für ein Echtzeit-Visual.
  • Eine eigenständige HTML-Seite, deren Canvas den Viewport ausfüllt, sich mit dem Fenster anpasst, auf schwarzem Hintergrund ohne Scrollbalken sitzt und die ShaderToy-kompatiblen Uniforms iTime, iResolution, iMouse und iFrame bereitstellt.
  • Mehrpass-Effekte, aufgebaut auf WebGL2-Framebuffern mit Ping-Pong-Buffern für Buffer-A/B-artigen Zustand.
  • Eine fertige Post-Chain, etwa ACES-Tonemapping kombiniert mit 2x SSAA und Vignette für fotorealistische Szenen.
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Die Anfrage einer Technik zuordnen

    Der Agent gleicht die Formulierung des Nutzers mit der Technik-Routing-Tabelle ab, um eine primäre Technik plus kombinierbare auszuwählen, anstatt alle 36 Dateien zu lesen.

  2. 02
    Die Technik-Datei lesen

    Jede Datei unter techniques/ ist eigenständig und liefert Prinzipien, geordnete Implementierungsschritte sowie eine vollständige Code-Vorlage für den Effekt.

  3. 03
    Bei Bedarf zu Reference/ für Mathematik eskalieren

    Wenn Herleitungen oder fortgeschrittene Muster erforderlich sind, folgt der Agent dem Link am Ende der Technikdatei zum passenden reference/-Leitfaden.

  4. 04
    ShaderToy-Ausgabe nach WebGL2 portieren

    Für eigenständige HTML-Ergebnisse werden die WebGL2-Anpassungsregeln auf den ShaderToy-artigen Code angewendet, bevor die Seite geschrieben wird.

  5. 05
    Rezepte zu einer Pipeline zusammensetzen

    Quick Recipes verketten Module — Geometrie, Rendering, Beleuchtung, Atmosphäre, Post-Processing — zu einer vollständigen Pipeline statt zu einem einzelnen Effekt.

  6. 06
    Durch Austauschen der Ausgabe debuggen

    Die Ausgabe wird vorübergehend durch Normalen, Schrittzahlen, Tiefe oder SDF-Bänder ersetzt, um einen Fehler zu lokalisieren, bevor die echte Farbe wiederhergestellt wird.

02 Finden Sie Ihren Favoriten

Wann der shader-dev Skill einzusetzen ist

Verwenden Sie den shader-dev Skill in Claude Code oder Codex, wenn es sich um Bildbearbeitung dieser Art handelt. Eignung und Grenzen unten sind der eigenen Datei des Skills entnommen.

Gut geeignet

  • Modellierung von 3D-Objekten und -Szenen rein aus Mathematik, bei der Signed-Distance-Fields implizite Flächen erzeugen statt geladener Meshes.
  • Fluid-, Rauch- und Tinten-Looks, die einen echten Solver mit Advektion, Diffusion und Druckprojektion über Ping-Pong-Buffer benötigen.
  • Himmel- und Atmosphäre-Aufnahmen, die Rayleigh-/Mie-Streuung, Gottesstrahlen oder eine Subsurface-Scattering-Näherung erfordern.
  • Prozedurales Audio, das direkt in den Shader eingebacken ist, von Oszillatoren und Envelopes über Filter bis zur FM-Synthese.
  • Stilisierte 2D-Arbeiten auf Basis von Polar-Remapping, Kaleidoskop-Faltung und spiralförmigen Koordinatensystemen.

Grenzen kennen

  • Nicht für unbegrenzte GPU-Budgets geeignet: Die Zielumgebung kann headless Software-Rendering sein, daher müssen die Iterationszahlen niedrig bleiben.
  • Makros sind keine sichere Methode, um Schleifengrenzen festzulegen — in Schleifen werden bei manchen ES-Versionen Laufzeitkonstanten erwartet.
  • Terrain-Hilfsfunktionen nehmen nur XZ-Koordinaten entgegen, daher muss eine vollständige vec3-Position vor der Übergabe entsprechend geswizzelt werden.

Was Sie bereitstellen sollten

  • Eine Effektanfrage in einfacher SpracheDer Skill wird als /shader-dev <request> aufgerufen, wobei der Anfragetext in $ARGUMENTS landet; die Formulierung in Effektbegriffen ermöglicht der Routing-Tabelle die Zuordnung.
  • Die Effektkategorie im Vokabular der TabelleDie Routing-Tabelle ist nach Intents wie Fluid-/Rauch-/Tinten-Effekten geschlüsselt und ordnet jedem eine primäre Technik sowie die damit zu kombinierenden Techniken zu.

03 Innerhalb des Skills

Regeln, die der shader-dev-Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

  1. WebGL2-Shader-Header ausgeben

    Jeder generierte Shader beginnt mit #version 300 es, der Fragment-Shader fügt precision highp float; hinzu und deklariert out vec4 fragColor, wobei varying zu in/out konvertiert wird.

  2. gl_FragCoord.xy verwenden, niemals fragCoord

    ShaderToys fragCoord existiert in WebGL2 nicht, daher muss die Koordinatenberechnung gl_FragCoord.xy lesen, sonst kompiliert der Shader nicht.

  3. mainImage in eine echte Main()-Funktion einbetten

    ShaderToy-Templates behalten void mainImage(out vec4 fragColor, in vec2 fragCoord) bei, und eine Standard-void main() ruft sie mit den tatsächlichen Fragment-Koordinaten auf.

  4. Callees vor Callern deklarieren

    GLSL kennt keine Vorwärtsdeklarationen, daher muss eine Funktion wie getSunDirection() oberhalb von getAtmosphere(), die sie aufruft, definiert werden, oder der Code muss umsortiert werden.

  5. Niemals Funktionsaufrufe in #define verwenden

    Ein Makro wie #define SUN_DIR normalize(vec3(...)) ist ungültig; ersetzen Sie es durch eine const mit einem vorberechneten normalisierten Wert.

  6. Reservierte GLSL-Wörter als Namen vermeiden

    Bezeichner wie patch, cast, sample, filter, input, output, common, partition und active sind reserviert und dürfen nicht als Variablennamen verwendet werden.

  7. JS-State am Anfang deklarieren

    Auf der HTML-Seite gehören let/const-Variablen an den Anfang des Script-Blocks, vor jede Funktion, die sich auf sie bezieht — sonst wirft die Temporal Dead Zone einen Fehler und das Canvas bleibt weiß.

  8. Innerhalb des Performance-Budgets bleiben

    Die Hauptschleife des Ray Marching ist auf 128 Schritte begrenzt, die inneren Schleifen für Volume-Sampling und Beleuchtung auf 32, und FBM auf 6 Oktaven, da beim Deployment eingeschränktes Headless-Software-Rendering genutzt werden kann.

04 In Betrieb nehmen

shader-dev in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

shader-dev zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

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

Generische skills-CLI-Form für skills/shader-dev/SKILL.md; das Repository dokumentiert unter Umständen einen eigenen Pfad.

Gib dem Skill eine erste Bildarbeitsaufgabe

Passen Sie diesen Prompt mit Ihren eigenen Inhalten und Vorgaben an und führen Sie ihn dann in Claude Code oder Codex aus.

Example prompt
create a raymarched SDF scene with soft shadows

Quelle: SKILL.md-Beispiel (wörtlich).

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Prüfen Sie, ob jeder Aufruf zu seiner Definition passt, einschließlich Parameteranzahl und -typen — eine float fbm(vec3 p) kann kein vec2 uv entgegennehmen.
  • Setzen Sie strikte Typübereinstimmung durch: Skalare benötigen explizite Konstruktoren, und ein vec2 kann nicht mit .z gelesen werden.
  • Schreiben Sie jeden ternären Ausdruck, der zwischen Struct-Werten wählt, als if/else um, da ESSL dies nicht erlaubt.
  • Zählen Sie verschachtelte Schleifeniterationen pro Pixel gegen die Obergrenze von 1000 Iterationen, deren Überschreitung den Browser einfrieren lässt.
  • Visualisieren Sie Normalen als col = nor * 0.5 + 0.5 und achten Sie auf Banding, was bedeutet, dass das Epsilon zu groß ist.
  • Wenn ein Uniform-Location-Wert null zurückgibt, hat der Compiler das Uniform herausoptimiert — verwenden Sie es so, dass es nicht entfernt werden kann.

In OpenDesign ist shader-dev vorinstalliert: Plugins → Skills, wählen Sie es in der oberen Leiste aus.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
MiniMax
Repository
github.com/MiniMax-AI/skills Branch main
Skill-Datei
skills/shader-dev/SKILL.md Inhaltsprüfsumme bei Verifizierung aufgezeichnet; Commit 60aaae5
License
MIT Aus LICENSE; SKILL.md gibt „MIT" an.
Repository-Sterne
13.547 GitHub-Snapshot vom 2026-09-14 für das gesamte MiniMax-AI/skills-Repository, das 6 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für shader-dev.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. AufrufLäuft als /shader-dev <request>, wobei die Anfrage über $ARGUMENTS übergeben wird.
  2. Skill-StrukturAufbau von SKILL.md, technikspezifische Anleitungen in techniques/, sowie tiefergehende reference/-Dateien.
  3. VerwendungVier Schritte: routen, Technik-Dateien lesen, Referenzlinks folgen, WebGL2-Regeln anwenden.
  4. Technik-Routing-TabelleOrdnet jede Nutzerabsicht einer primären Technik sowie zu kombinierenden Techniken zu.
  5. Techniken-IndexDie 36 Techniken nach Kategorie gruppiert, jede mit einer einzeiligen Beschreibung.
  6. WebGL2-AnpassungsregelnShaderToy-zu-WebGL2-Konvertierungen: Version, fragCoord, main-Wrapper, Makros, Fallstricke.
  7. HTML-Seiten-SetupAnforderungen an eine eigenständige Seite: vollständig
Die eigene Beschreibung des Skills
„Umfassende GLSL-Shader-Techniken zur Erstellung beeindruckender visueller Effekte — Ray Marching, SDF-Modellierung, Fluidsimulation, Partikelsysteme, prozedurale Generierung, Beleuchtung, Nachbearbeitung und mehr."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 16.663 Zeichen. Die vollständige Datei auf GitHub lesen.

Shader Dev

Führen Sie shader-dev für eine echte Bildbearbeitungsaufgabe aus.

Das shader-dev-Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie das Skill unter Plugins → Skills, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

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