83.3K+ダウンロード
使い方ガイドへスキップ
shader-dev作者 MiniMax

Shader Dev スキル。

画像制作向けの Claude Code と Codex スキル：GLSL シェーダー：レイマーチング、SDF、流体、パーティクル、プロシージャルビジュアル。

  • 画像と生成アート
  • 生成アート
OpenDesign をダウンロード使い方ガイドを見る
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
2026-09-14 に上流ファイルから読み込まれたフロントマターとセクション見出し · 全体で 16,663 文字

01 できること

Claude CodeとCodexでshader-devスキルが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

リアルタイムビジュアルエフェクトのために、36種類のShaderToy互換シェーダー技法を1つのGLSLスキルにまとめたもの：SDFジオメトリ、レイマーチングとライティング、流体・パーティクル・物理シミュレーション、自然現象（海洋、地形、大気、ボリュメトリック）、プロシージャル生成、ポストプロセッシング、オーディオ、WebGL2デバッグ。

ルーティングテーブルは各リクエストを、コアとなる原理・実装手順・完全なコードテンプレートを収めたtechniques/配下の技法ファイルに対応付け、より深い数学的内容はreference/に置かれます。単体のHTMLページを生成する際には、WebGL2への適応ルール（fragCoordの代わりにgl_FragCoord.xy、mainImageのためのvoid main()ラッパー、関数呼び出しマクロの代わりにconst）を、決められたパフォーマンス予算の中で適用し、簡易レシピとビジュアルデバッグの切り替えを提供します。

生成されるもの

  • 36種類のエフェクト技法のうちの1つに対応する、ShaderToy互換のGLSLで、リアルタイムビジュアルの土台として使用できます。
  • キャンバスがビューポート全体を占め、ウィンドウに合わせてリサイズされ、黒背景でスクロールバーがなく、ShaderToy互換のuniform（iTime、iResolution、iMouse、iFrame）を公開する単体のHTMLページです。
  • Buffer A/Bのような状態を扱うためにピンポンバッファを使用し、WebGL2のフレームバッファ上に構築されたマルチパスエフェクトです。
  • フォトリアリスティックなシーン向けに、ACESトーンマッピングと2x SSAA、ビネットを組み合わせた完成したポストチェーン。
プロンプト例を見る ↗

仕組み

  1. 01
    リクエストを技法にルーティングする

    エージェントは、36個のファイルすべてを読むのではなく、技法ルーティングテーブルとユーザーの表現を照合し、主となる技法1つと組み合わせ可能な技法を選択します。

  2. 02
    技法ファイルを読む

    techniques/配下の各ファイルは自己完結しており、原理、順序立てられた実装手順、そのエフェクトのための完全なコードテンプレートを提供します。

  3. 03
    数式が必要な場合はReference/にエスカレーションする

    導出や高度なパターンが必要な場合、エージェントはテクニックファイルの末尾にあるリンクをたどり、対応するreference/ガイドを参照します。

  4. 04
    ShaderToyの出力をWebGL2へ移植する

    単体のHTML成果物の場合、ShaderToy形式のコードを書き出す前にWebGL2への適応ルールを適用します。

  5. 05
    レシピを組み合わせてパイプラインを構築する

    クイックレシピは、単一のエフェクトではなく、ジオメトリ・レンダリング・ライティング・大気・ポストといったモジュールを連結して完全なパイプラインを組み立てます。

  6. 06
    出力を入れ替えてデバッグする

    実際の色を復元する前に、法線・ステップ数・深度・SDFバンドで出力を一時的に置き換え、不具合を特定します。

02 適合性を確認

shader-dev スキルを使用するタイミング

この種の画像作業のジョブでは、Claude Code または Codex で shader-dev スキルを使用します。適合性と制限は、スキルのファイルから引用しています。

適している場合

  • 読み込んだメッシュではなく符号付き距離場が暗黒面を駆動する、純粋な数式による3Dオブジェクトやシーンのモデリングです。
  • ピンポンバッファ間で移流・拡散・圧力投影を行う本格的なソルバーが必要な、流体・煙・インクの表現です。
  • レイリー散乱／ミー散乱、ゴッドレイ、サブサーフェススキャッタリング近似が必要な空や大気のショットです。
  • シェーダー自体に組み込まれたプロシージャルオーディオで、オシレーターやエンベロープからフィルター、FM合成まで含みます。
  • 極座標変換、カレイドスコープ折り返し、スパイラル座標系を基盤としたスタイライズされた2D表現です。

境界を知る

  • 無制限のGPU予算を前提としません。対象環境がヘッドレスのソフトウェアレンダリングになる場合があるため、反復回数は低く抑える必要があります。
  • マクロはループ境界を設定する安全な方法ではありません。一部のESバージョンでは、ループにはランタイム定数が求められます。
  • 地形ヘルパーはXZ座標のみを受け取るため、渡す前に完全なvec3位置をスウィズルする必要があります。

提供すべきもの

  • 平易な言葉によるエフェクトのリクエストこのスキルは/shader-dev <request>として呼び出され、リクエストのテキストは$ARGUMENTSに渡されます。エフェクトの用語で表現することで、ルーティングテーブルによるマッチングが可能になります。
  • テーブルの語彙によるエフェクトのカテゴリルーティングテーブルは、流体／煙／インクエフェクトなどのインテントをキーとし、それぞれを主要なテクニックと、それに組み合わせるテクニックにマッピングします。

03 スキルの内部

shader-devスキルがClaude CodeとCodexに与えるルール

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

  1. WebGL2シェーダーヘッダーを出力する

    生成されるすべてのシェーダーは#version 300 esで始まり、フラグメントシェーダーにはprecision highp float;が追加され、out vec4 fragColorが宣言され、varyingはin/outに変換されます。

  2. fragCoordではなく、常にgl_FragCoord.xyを使用する

    ShaderToyのfragCoordはWebGL2には存在しないため、座標計算はgl_FragCoord.xyを参照する必要があります。そうしないとシェーダーはコンパイルされません。

  3. mainImageを実際のMain()でラップする

    ShaderToyのテンプレートでは、void mainImage(out vec4 fragColor, in vec2 fragCoord)を保持し、標準のvoid main()が実際のフラグメント座標を渡してこれを呼び出します。

  4. 呼び出される関数を呼び出す関数より前に宣言する

    GLSLには前方宣言がないため、getAtmosphere()から呼び出されるgetSunDirection()のような関数は、それより上に定義するか、コードの順序を入れ替える必要があります。

  5. #defineに関数呼び出しを入れない

    #define SUN_DIR normalize(vec3(...))のようなマクロは無効です。事前に計算した正規化済みの値を保持するconstに置き換えてください。

  6. GLSLの予約語を名前として使わない

    patch、cast、sample、filter、input、output、common、partition、activeを含む識別子は予約語であり、変数名として使用してはいけません。

  7. JSの状態は先頭で宣言する

    HTMLページでは、let/constの変数はそれらを参照するどの関数よりも前、scriptブロックの先頭に置いてください。そうしないとTemporal Dead Zoneがエラーを発生させ、キャンバスが白いままになります。

  8. パフォーマンス予算内に収める

    レイマーチングのメインループは128ステップ、ボリュームサンプリングとライティングの内側ループは32ステップ、FBMは6オクターブに制限されています。これは、デプロイ環境で制限されたヘッドレスのソフトウェアレンダリングが使われる場合があるためです。

04 実際に使う

Claude Code または Codex に shader-dev をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex またはお使いのエージェントに shader-dev を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

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

skills/shader-dev/SKILL.mdに対する汎用skills CLI形式です。リポジトリによっては独自のパスが記載されている場合があります。

スキルに最初の画像制作タスクを与える

このプロンプトを独自のコンテンツと制約に合わせて調整し、Claude Code または Codex で実行してください。

Example prompt
create a raymarched SDF scene with soft shadows

出典：SKILL.mdの例（原文のまま）。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

  • すべての呼び出しがパラメータ数や型を含めて定義と一致しているか確認してください。float fbm(vec3 p)にvec2 uvを渡すことはできません。
  • 厳密な型の一致を強制してください。スカラーには明示的なコンストラクタが必要であり、vec2を.zで読み取ることはできません。
  • struct値の間で選択する三項演算子はすべてif/elseに書き換えてください。ESSLではこれが許可されていません。
  • ピクセルごとのネストしたループの反復回数を1000回の上限と比較して数えてください。超えるとブラウザがフリーズします。
  • 法線をcol = nor * 0.5 + 0.5として可視化し、バンディングがないか確認してください。バンディングが見える場合はepsilonが大きすぎます。
  • uniformの位置がnullで返ってきた場合、コンパイラがそのuniformを最適化して削除しています。削除できない形で使用してください。

OpenDesignではshader-devが同梱されています。Plugins → Skillsから上部バーで選択してください。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
MiniMax
Repository
github.com/MiniMax-AI/skills ブランチ main
スキルファイル
skills/shader-dev/SKILL.md 検証時に記録されたコンテンツチェックサム。コミット 60aaae5
License
MIT LICENSE より。SKILL.md には "MIT" と記載されています。
リポジトリスター数
13,547 MiniMax-AI/skills リポジトリ全体の GitHub スナップショット（2026年9月14日取得）。このカタログには6つのスキルが含まれています。shader-dev の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign メイン版に同梱（2026-08-28 確認）。このページでは実際の実行記録はまだありません。

SKILL.md の中身

  1. 呼び出し方/shader-dev <request>として実行され、requestは$ARGUMENTSを通じて渡されます。
  2. スキル構成SKILL.mdの構成、techniques/内のテクニックごとのガイド、より詳細なreference/ファイルの配置です。
  3. 使い方4つのステップ：ルーティング、テクニックファイルを読む、参照リンクをたどる、WebGL2のルールを適用する。
  4. テクニックルーティング表各ユーザーの意図を、主要なテクニックと組み合わせるべきテクニックにマッピングします。
  5. テクニック索引36のテクニックをカテゴリ別にまとめ、それぞれに一行の説明を付けています。
  6. WebGL2適応ルールShaderToyからWebGL2への変換：version、fragCoord、mainラッパー、マクロ、注意点。
  7. HTMLページ設定スタンドアロンページの要件：full
スキル自身による説明
「レイマーチング、SDF モデリング、流体シミュレーション、パーティクルシステム、プロシージャル生成、ライティング、ポストプロセッシングなど、驚くべき視覚効果を作成するための包括的な GLSL シェーダーテクニック」

SKILL.md からのフロントマターの説明です。完全なファイルは約16,663文字です。完全なファイルを GitHub で読む

Shader Dev

実際の画像作業タスクで shader-dev を実行します。

shader-dev スキルは OpenDesign に同梱されています。アプリをダウンロードし、Plugins → Skills でスキルを選択し、上記のプロンプトを貼り付けて、結果を見る前にプランを確認してください。

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/MiniMax-AI/skills --skill shader-dev