83.3K+Baixar
Ir para o guia de uso
shader-devpor MiniMax

Shader Dev Skill.

Uma skill de Claude Code e Codex para trabalho com imagens: shaders GLSL: ray marching, SDFs, fluidos, partículas, visuais procedurais.

  • Imagens e Arte Generativa
  • Arte generativa
Baixar OpenDesignVer guia de uso
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
Front matter e títulos de seção lidos do arquivo original em 2026-09-14 · 16.663 caracteres no total

01 O que faz

O que a Skill shader-dev Faz no Claude Code e Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Uma única skill GLSL reunindo 36 técnicas de shader compatíveis com ShaderToy para efeitos visuais em tempo real: geometria SDF, ray marching e iluminação, simulação de fluidos, partículas e física, fenômenos naturais (oceano, terreno, atmosfera, volumétrico), geração procedural, pós-processamento, áudio e depuração WebGL2.

Uma tabela de roteamento mapeia cada solicitação a arquivos de técnica em techniques/ contendo princípios centrais, etapas de implementação e templates de código completos, com matemática mais detalhada em reference/. Em seguida, aplica regras de adaptação WebGL2 ao produzir páginas HTML autônomas — gl_FragCoord.xy em vez de fragCoord, um wrapper void main() para mainImage, const no lugar de macros de chamada de função — dentro de um orçamento de desempenho fixo, com receitas rápidas e trocas de depuração visual.

O que ele produz

  • GLSL compatível com ShaderToy para uma de 36 técnicas de efeito, usável como base de um visual em tempo real.
  • Uma página HTML autônoma cujo canvas preenche a viewport, redimensiona-se com a janela, fica sobre um fundo preto sem barras de rolagem e expõe os uniforms compatíveis com ShaderToy iTime, iResolution, iMouse e iFrame.
  • Efeitos multipasso construídos sobre framebuffers WebGL2 com buffers ping-pong para estado no estilo Buffer A/B.
  • Uma cadeia de pós-processamento finalizada, como tone mapping ACES combinado com 2x SSAA e vinheta para cenas fotorrealistas.
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Direcionar a Solicitação a uma Técnica

    O agente compara a frase do usuário com a tabela de roteamento de técnicas para escolher uma técnica principal mais outras combináveis, em vez de ler todos os 36 arquivos.

  2. 02
    Ler o Arquivo de Técnica

    Cada arquivo em techniques/ é autocontido, fornecendo princípios, etapas de implementação ordenadas e um template de código completo para o efeito.

  3. 03
    Escalar para Reference/ para Matemática

    Quando derivações ou padrões avançados são necessários, o agente segue o link no final do arquivo de técnica até o guia correspondente em reference/.

  4. 04
    Portar Saída do ShaderToy para WebGL2

    Para entregáveis HTML autônomos, as regras de adaptação para WebGL2 são aplicadas sobre o código no estilo ShaderToy antes que a página seja escrita.

  5. 05
    Montar Receitas em um Pipeline

    Receitas rápidas encadeiam módulos — geometria, renderização, iluminação, atmosfera, pós-processamento — para formar um pipeline completo em vez de um único efeito.

  6. 06
    Depurar Substituindo a Saída

    A saída é temporariamente substituída por normais, contagens de passos, profundidade ou bandas de SDF para identificar uma falha antes de restaurar a cor real.

02 Encontre o ideal para você

Quando usar a skill shader-dev

Use a skill shader-dev no Claude Code ou Codex quando o trabalho for de imagem desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

  • Modelagem de objetos e cenas 3D puramente a partir de matemática, em que campos de distância com sinal geram superfícies implícitas em vez de malhas carregadas.
  • Efeitos fluidos, de fumaça e tinta que exigem um solver real com advecção, difusão e projeção de pressão em buffers ping-pong.
  • Cenas de céu e atmosfera que precisam de espalhamento Rayleigh/Mie, raios de Deus ou uma aproximação de espalhamento sub-superficial.
  • Áudio procedural incorporado ao próprio shader, de osciladores e envelopes a filtros até síntese FM.
  • Trabalho 2D estilizado construído sobre remapeamento polar, dobra caleidoscópica e sistemas de coordenadas em espiral.

Conheça os Limites

  • Não indicado para orçamentos de GPU irrestritos: o ambiente de destino pode ser renderização por software sem interface gráfica, então as contagens de iteração devem permanecer baixas.
  • Macros não são uma forma segura de definir limites de loop — em algumas versões do ES, espera-se constantes em tempo de execução nos loops.
  • Os helpers de terreno recebem apenas coordenadas XZ, então uma posição vec3 completa deve passar por swizzle antes de ser passada.

O Que Fornecer

  • Um pedido de efeito em linguagem simplesA skill é invocada como /shader-dev <request>, com o texto do pedido chegando em $ARGUMENTS; formulá-lo em termos de efeito permite que a tabela de roteamento faça a correspondência.
  • A categoria do efeito, no vocabulário da tabelaA tabela de roteamento é indexada por intenções como efeitos de fluido/fumaça/tinta, mapeando cada uma a uma técnica primária e às técnicas com que ela deve ser combinada.

03 Dentro da skill

Regras que a Skill shader-dev Dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

  1. Emitir Cabeçalhos de Shader WebGL2

    Todo shader gerado começa com #version 300 es, o fragment shader adiciona precision highp float; e declara out vec4 fragColor, com varying convertido para in/out.

  2. Use gl_FragCoord.xy, Nunca fragCoord

    O fragCoord do ShaderToy não existe no WebGL2, então os cálculos de coordenadas devem usar gl_FragCoord.xy, ou o shader não compilará.

  3. Envolver mainImage em um Main() Real

    Templates ShaderToy mantêm void mainImage(out vec4 fragColor, in vec2 fragCoord) e um void main() padrão o chama com as coordenadas reais do fragmento.

  4. Declare as Funções Chamadas Antes das Chamadoras

    GLSL não tem declarações antecipadas, então uma função como getSunDirection() deve ser definida antes de getAtmosphere() que a chama, ou o código deve ser reordenado.

  5. Nunca Coloque Chamadas de Função em #define

    Uma macro como #define SUN_DIR normalize(vec3(...)) é inválida; substitua-a por uma const contendo um valor normalizado pré-calculado.

  6. Evite Palavras Reservadas do GLSL como Nomes

    Identificadores incluindo patch, cast, sample, filter, input, output, common, partition e active são reservados e não devem ser usados para variáveis.

  7. Declare o Estado JS no Topo

    Na página HTML, as variáveis let/const devem ficar no topo do bloco de script, antes de qualquer função que as referencie, caso contrário a Temporal Dead Zone lança um erro e o canvas permanece branco.

  8. Mantenha-se Dentro do Orçamento de Performance

    O loop principal de ray marching é limitado a 128 passos, os loops internos de amostragem de volume e iluminação a 32, e o FBM a 6 oitavas, pois a implantação pode usar renderização headless por software limitada.

04 Coloque em prática

Instalar shader-dev no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione shader-dev ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

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

Formato genérico do CLI skills para skills/shader-dev/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Trabalho com Imagem

Adapte este prompt com seu próprio conteúdo e restrições, depois execute no Claude Code ou Codex.

Example prompt
create a raymarched SDF scene with soft shadows

Fonte: exemplo do SKILL.md (na íntegra).

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

  • Verifique se cada chamada corresponde à sua definição, incluindo número e tipos de parâmetros — um float fbm(vec3 p) não pode receber um vec2 uv.
  • Aplique correspondência estrita de tipos: escalares precisam de construtores explícitos, e um vec2 não pode ser lido com .z.
  • Reescreva qualquer ternário que selecione entre valores de struct como if/else, o que a ESSL não permite.
  • Conte as iterações de loops aninhados por pixel em relação ao limite de 1000 iterações, que congela o navegador quando excedido.
  • Visualize as normais como col = nor * 0.5 + 0.5 e procure por bandas, o que indica que o epsilon está grande demais.
  • Se o local de um uniform retornar null, o compilador removeu o uniform por otimização — use-o de uma forma que não possa ser eliminada.

No OpenDesign shader-dev vem incluído: Plugins → Skills, selecione-o na barra superior.

Baixar OpenDesignLer o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author
MiniMax
Repository
github.com/MiniMax-AI/skills Branch main
Arquivo da skill
skills/shader-dev/SKILL.md Checksum do conteúdo registrado na verificação; commit 60aaae5
License
MIT De LICENSE; SKILL.md diz "MIT".
Estrelas do repositório
13.547 Snapshot do GitHub capturado em 2026-09-14 para todo o repositório MiniMax-AI/skills, que contém 6 skills neste catálogo. Não é uma avaliação ou contagem de uso para shader-dev.
Verificado pelo OpenDesign
2026-09-14 Arquivo fonte, caminho, texto de licença e contagem de estrelas foram verificados. Incluído no OpenDesign main (verificado em 2026-08-28); uma execução real não foi registrada nesta página.

Dentro do SKILL.md

  1. InvocaçãoExecuta como /shader-dev <request>, com o pedido passado por $ARGUMENTS.
  2. Estrutura da SkillLayout do SKILL.md, guias por técnica em techniques/, e arquivos reference/ mais detalhados.
  3. Como UsarQuatro etapas: rotear, ler os arquivos de técnica, seguir os links de referência, aplicar as regras do WebGL2.
  4. Tabela de Roteamento de TécnicasMapeia cada intenção do usuário para uma técnica principal, além de técnicas a combinar.
  5. Índice de TécnicasAs 36 técnicas agrupadas por categoria, cada uma com uma descrição de uma linha.
  6. Regras de Adaptação para WebGL2Conversões de ShaderToy para WebGL2: versão, fragCoord, wrapper main, macros, armadilhas comuns.
  7. Configuração de Página HTMLRequisitos de página independente: completa
A Descrição da Própria Skill
"Técnicas abrangentes de shader GLSL para criar efeitos visuais impressionantes — ray marching, modelagem SDF, simulação de fluidos, sistemas de partículas, geração procedural, iluminação, pós-processamento e muito mais."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 16.663 caracteres. Leia o arquivo completo no GitHub.

Shader Dev

Execute shader-dev em uma Tarefa de Trabalho com Imagem Real.

A skill shader-dev vem incluída no OpenDesign. Baixe o app, escolha a skill em Plugins → Skills, cole o prompt acima e leia o plano antes do resultado.

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