83.3K+İndir
Kullanım kılavuzuna geç
shader-devyazan MiniMax

Shader Dev Skill.

Claude Code ve Codex için görsel çalışma skill'i: gLSL shader'ları: ray marching, SDF'ler, akışkanlar, parçacıklar, prosedürel görseller.

  • Images & Generative Art
  • Üretken sanat
OpenDesign İndirKullanım kılavuzunu görüntüle
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
Üst akış dosyasından 2026-09-14 tarihinde okunan ön bilgi ve bölüm başlıkları · tam metinde 16.663 karakter

01 Ne yapar

shader-dev Skill'in Claude Code ve Codex'te Yaptığı

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Gerçek zamanlı görsel efektler için 36 ShaderToy uyumlu shader tekniğini bir arada barındıran tek bir GLSL skill'i: SDF geometrisi, ray marching ve ışıklandırma, sıvı, parçacık ve fizik simülasyonu, doğal olaylar (okyanus, arazi, atmosfer, hacimsel), prosedürel üretim, son işleme (post-processing), ses ve WebGL2 hata ayıklama.

Bir yönlendirme tablosu her isteği, temel ilkeleri, uygulama adımlarını ve tam kod şablonlarını içeren techniques/ altındaki teknik dosyalarıyla eşleştirir; daha derin matematik reference/ içinde bulunur. Ardından bağımsız HTML sayfaları üretirken WebGL2 uyarlama kurallarını uygular — fragCoord yerine gl_FragCoord.xy, mainImage için bir void main() sarmalayıcı, fonksiyon çağrısı makroları yerine const — sabit bir performans bütçesi içinde, hızlı tarifler ve görsel hata ayıklama değişimleriyle birlikte.

Neler üretir

  • 36 efekt tekniğinden birine ait, gerçek zamanlı bir görselin temeli olarak kullanılabilen ShaderToy uyumlu GLSL.
  • Tuvali görünüm alanını dolduran, pencereyle yeniden boyutlanan, kaydırma çubuğu olmayan siyah bir arka plan üzerinde oturan ve ShaderToy uyumlu iTime, iResolution, iMouse ve iFrame uniform'larını sunan bağımsız bir HTML sayfası.
  • Buffer A/B tarzı durum için ping-pong tamponları kullanan WebGL2 framebuffer'ları üzerine inşa edilmiş çok geçişli efektler.
  • Fotogerçekçi sahneler için 2x SSAA ve vinyetle birleştirilmiş ACES ton eşleme gibi tamamlanmış bir son işleme zinciri.
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    İsteği Bir Tekniğe Yönlendirin

    Ajan, 36 dosyanın tamamını okumak yerine, kullanıcının ifadesini teknik yönlendirme tablosuyla eşleştirerek bir birincil teknik ile birleştirilebilir tekniklerden birini seçer.

  2. 02
    Teknik Dosyasını Okuyun

    techniques/ altındaki her dosya bağımsızdır; efekt için ilkeleri, sıralı uygulama adımlarını ve eksiksiz bir kod şablonunu sağlar.

  3. 03
    Matematik için Reference/ Klasörüne Yükselt

    Türetimler veya ileri düzey desenler gerektiğinde ajan, teknik dosyasının sonundaki bağlantıyı takip ederek ilgili reference/ kılavuzuna geçer.

  4. 04
    ShaderToy Çıktısını WebGL2'ye Taşıyın

    Bağımsız HTML çıktıları için WebGL2 uyarlama kuralları, sayfa yazılmadan önce ShaderToy tarzı kod üzerine uygulanır.

  5. 05
    Tarifleri Bir Pipeline'da Birleştirin

    Hızlı tarifler, tek bir efekt yerine modülleri — geometri, render, aydınlatma, atmosfer, post-process — zincirleyerek eksiksiz bir pipeline oluşturur.

  6. 06
    Çıkışı Değiştirerek Hata Ayıklayın

    Gerçek renk geri yüklenmeden önce hatayı tespit etmek için çıkış geçici olarak normaller, adım sayıları, derinlik veya SDF bantlarıyla değiştirilir.

02 Uyumunuzu bulun

shader-dev Skill'i Ne Zaman Kullanılır

İş bu türden görüntü işi olduğunda Claude Code veya Codex'te shader-dev skill'ini kullanın. Aşağıdaki uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Yüklü mesh'ler yerine signed distance field'ların implicit yüzeyleri yönlendirdiği, tamamen matematikten oluşturulan 3D nesne ve sahne modellemesi.
  • Ping-pong tamponlarında advection, difüzyon ve basınç projeksiyonu içeren gerçek bir solver gerektiren akışkan, duman ve mürekkep görünümleri.
  • Rayleigh/Mie saçılımı, tanrı ışınları veya subsurface-scattering yaklaşımı gerektiren gökyüzü ve atmosfer çekimleri.
  • Osilatörlerden ve zarflardan filtrelere, FM sentezine kadar shader'ın kendisine gömülü prosedürel ses.
  • Polar yeniden eşleme, kaleydoskop katlama ve spiral koordinat sistemleri üzerine kurulu stilize 2D çalışmalar.

Sınırları Bilin

  • Sınırsız GPU bütçeleri için değil: hedef ortam headless yazılım rendering olabileceğinden, iterasyon sayıları düşük tutulmalıdır.
  • Makrolar döngü sınırlarını belirlemek için güvenli bir yol değildir — bazı ES sürümlerinde döngülerde runtime sabitleri beklenir.
  • Terrain yardımcıları yalnızca XZ koordinatlarını alır, dolayısıyla geçirilmeden önce tam bir vec3 konumun swizzle edilmesi gerekir.

Ne Sağlamalısınız

  • Düz dilde bir efekt talebiSkill, /shader-dev <request> olarak çağrılır ve talep metni $ARGUMENTS içine yerleşir; bunu efekt terimleriyle ifade etmek, routing tablosunun eşleşmesini sağlar.
  • Tablo kelime dağarcığındaki efekt kategorisiRouting tablosu, akışkan/duman/mürekkep efektleri gibi niyetlere göre anahtarlanır ve her birini birincil bir teknikle ve birleştirilecek tekniklerle eşler.

03 Skill'in içinde

shader-dev Skill'inin Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. WebGL2 Shader Başlıkları Üretin

    Oluşturulan her shader #version 300 es ile başlar, fragment shader precision highp float; ekler ve out vec4 fragColor bildirir; varying ise in/out'a çevrilir.

  2. gl_FragCoord.xy Kullanın, Asla fragCoord Değil

    ShaderToy'un fragCoord'u WebGL2'de mevcut değildir, bu nedenle koordinat matematiği gl_FragCoord.xy'yi okumalıdır, aksi halde shader derlenmez.

  3. mainImage'i Gerçek Bir Main() İçine Sarın

    ShaderToy şablonları void mainImage(out vec4 fragColor, in vec2 fragCoord) fonksiyonunu korur ve standart bir void main() bunu gerçek fragman koordinatlarıyla çağırır.

  4. Çağrılanları Çağıranlardan Önce Tanımlayın

    GLSL'de ileri bildirim (forward declaration) yoktur; bu nedenle getSunDirection() gibi bir fonksiyon, onu çağıran getAtmosphere()'in üzerinde tanımlanmalı ya da kod yeniden sıralanmalıdır.

  5. #define İçine Asla Fonksiyon Çağrısı Koymayın

    #define SUN_DIR normalize(vec3(...)) gibi bir makro geçersizdir; bunun yerine önceden hesaplanmış normalize edilmiş bir değer tutan bir const kullanın.

  6. GLSL'in Ayrılmış Kelimelerini İsim Olarak Kullanmaktan Kaçının

    patch, cast, sample, filter, input, output, common, partition ve active dahil olmak üzere tanımlayıcılar ayrılmıştır ve değişken adı olarak kullanılmamalıdır.

  7. JS Durumunu Başta Bildirin

    HTML sayfasında, let/const değişkenleri script bloğunun başında, onlara referans veren herhangi bir fonksiyondan önce yer almalıdır; aksi halde Temporal Dead Zone hatası fırlar ve canvas beyaz kalır.

  8. Performans Bütçesinin İçinde Kalın

    Ray marching ana döngüsü 128 adımla, hacim örnekleme ve aydınlatma iç döngüleri 32 adımla, FBM ise 6 oktavla sınırlıdır; çünkü dağıtım ortamı sınırlı headless yazılım renderlama kullanabilir.

04 İşe koyun

shader-dev'i Claude Code veya Codex'e kurun

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

shader-dev'i Claude Code, Codex veya Ajanınıza Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

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

skills/shader-dev/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgelendirebilir.

Skill'e İlk Görsel Çalışma Görevini Verin

Bu isteği kendi içeriğiniz ve kısıtlamalarınızla uyarlayın, ardından Claude Code veya Codex'te çalıştırın.

Example prompt
create a raymarched SDF scene with soft shadows

Kaynak: SKILL.md örneği (birebir).

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • Her çağrının tanımıyla eşleştiğini, parametre sayısı ve türleri dahil kontrol edin — float fbm(vec3 p) bir vec2 uv alamaz.
  • Sıkı tür eşleştirmeyi zorunlu kılın: skalerler için açık kurucular gerekir ve bir vec2, .z ile okunamaz.
  • Struct değerleri arasında seçim yapan herhangi bir üçlü operatörü if/else olarak yeniden yazın, çünkü ESSL buna izin vermez.
  • İç içe geçmiş döngü yinelemelerini piksel başına 1000 yineleme tavanına göre sayın; aşıldığında tarayıcı donar.
  • Normalleri col = nor * 0.5 + 0.5 olarak görselleştirin ve bantlanma arayın; bu, epsilon'un çok büyük olduğu anlamına gelir.
  • Bir uniform konumu null döndürüyorsa, derleyici uniform'u optimize ederek kaldırmıştır — kaldırılamayacak şekilde kullanın.

OpenDesign'da shader-dev pakete dahildir: Plugins → Skills, üst çubukta seçin.

OpenDesign İndirHızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author
MiniMax
Repository
github.com/MiniMax-AI/skills Dal main
Skill dosyası
skills/shader-dev/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 60aaae5
License
MIT LICENSE dosyasından; SKILL.md "MIT" belirtiyor.
Repository yıldızları
13.547 GitHub anlık görüntüsü, bu katalogda 6 skill içeren tüm MiniMax-AI/skills deposu için 2026-09-14'te alındı. shader-dev için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. Çağırma/shader-dev <request> olarak çalışır, istek $ARGUMENTS üzerinden aktarılır.
  2. Skill YapısıSKILL.md düzeni, techniques/ içindeki teknik başına kılavuzlar ve daha derin reference/ dosyaları.
  3. Nasıl KullanılırDört adım: yönlendirme, teknik dosyalarını okuma, referans bağlantılarını takip etme, WebGL2 kurallarını uygulama.
  4. Teknik Yönlendirme TablosuHer kullanıcı niyetini birincil bir teknik ile birleştirilecek tekniklerle eşleştirir.
  5. Teknik DiziniKategoriye göre gruplanmış 36 teknik, her biri tek satırlık bir açıklamayla.
  6. WebGL2 Uyarlama KurallarıShaderToy'dan WebGL2'ye dönüşümler: sürüm, fragCoord, main sarmalayıcısı, makrolar, tuzaklar.
  7. HTML Sayfa KurulumuBağımsız sayfa gereksinimleri: tam
Skill'in Kendi Açıklaması
"Çarpıcı görsel efektler yaratmak için kapsamlı GLSL shader teknikleri — ray marching, SDF modelleme, akışkan simülasyonu, parçacık sistemleri, prosedürel üretim, aydınlatma, post-processing ve daha fazlası."

SKILL.md'den ön bilgi açıklaması. Tam dosya yaklaşık 16.663 karakterdir. Tam dosyayı GitHub'da okuyun.

Shader Dev

shader-dev'i Gerçek Bir Görsel İş Görevinde Çalıştırın.

shader-dev skill'i OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills'te skill'i seçin, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/MiniMax-AI/skills --skill shader-dev