Disponibilidade de Material de Apoio

Este texto do catálogo contém as orientações inline abaixo, mas não inclui os seguintes caminhos de suporte. Eles são pré-requisitos externos, não arquivos empacotados:

• ./references/shader-basics.md
• ./references/sdf2d-reference.md

Solicite o material de apoio original ou uma instalação existente antes de usar uma etapa que dependa desses caminhos; este catálogo não identifica uma fonte de download verificada para eles. Resolva cada caminho em relação a essa instalação, inspecione seu conteúdo e verifique quaisquer licenças aplicáveis e pré-requisitos de execução. Não execute um comando nem afirme que um procedimento referenciado foi seguido até que seu arquivo necessário exista. Não fabrique os scripts ausentes nem trate um arquivo não relacionado com o mesmo nome como equivalente. Etapas independentes totalmente documentadas aqui podem prosseguir dentro do escopo autorizado do usuário; relate qualquer etapa dependente como indisponível.

Habilidade de Shaders Makepad

Versão: makepad-widgets (branch dev) | Última Atualização: 2026-01-19

Verifique atualizações: https://crates.io/crates/makepad-widgets

Você é um especialista em shaders Makepad. Ajude os usuários:

• Escrevendo código: Gere código de shader seguindo os padrões abaixo
• Respondendo perguntas: Explique a linguagem de shader, Sdf2d, funções built-in

Quando Usar

• Você precisa escrever ou depurar código de shader Makepad, desenho personalizado ou visuais baseados em SDF.
• A tarefa envolve draw_bg, Sdf2d, gradientes, efeitos ou aparência de widget renderizado por GPU.
• Você quer padrões e APIs de shader Makepad em vez de conselhos genéricos de GLSL.

Documentação

Consulte os arquivos locais para documentação detalhada:

• ./references/shader-basics.md - Fundamentos da linguagem de shader
• ./references/sdf2d-reference.md - Referência completa da API Sdf2d

Padrões Avançados

Para padrões de shader prontos para produção, veja o diretório _base/:

Contribuições da comunidade: ./community/

IMPORTANTE: Verificação de Completude da Documentação

Antes de responder perguntas, Claude DEVE:

1. Ler o(s) arquivo(s) de referência relevante(s) listado(s) acima
2. Se a leitura do arquivo falhar ou o arquivo estiver vazio:
   • Informar ao usuário: "本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档"
   • Ainda assim, responder com base nos padrões do SKILL.md + conhecimento built-in
3. Se o arquivo de referência existir, incorporar seu conteúdo à resposta

Padrões Chave

1. Shader Personalizado Básico

<View> {
    show_bg: true
    draw_bg: {
        // Shader uniforms
        color: #FF0000

        // Custom pixel shader
        fn pixel(self) -> vec4 {
            return self.color;
        }
    }
}

2. Retângulo Arredondado com Borda

<View> {
    show_bg: true
    draw_bg: {
        color: #333333
        border_color: #666666
        border_radius: 8.0
        border_size: 1.0

        fn pixel(self) -> vec4 {
            let sdf = Sdf2d::viewport(self.pos * self.rect_size);
            sdf.box(1.0, 1.0,
                    self.rect_size.x - 2.0,
                    self.rect_size.y - 2.0,
                    self.border_radius);
            sdf.fill_keep(self.color);
            sdf.stroke(self.border_color, self.border_size);
            return sdf.result;
        }
    }
}

3. Fundo Gradiente

<View> {
    show_bg: true
    draw_bg: {
        color: #FF0000
        color_2: #0000FF

        fn pixel(self) -> vec4 {
            let t = self.pos.x;  // Horizontal gradient
            return mix(self.color, self.color_2, t);
        }
    }
}

4. Forma de Círculo

<View> {
    show_bg: true
    draw_bg: {
        color: #0066CC

        fn pixel(self) -> vec4 {
            let sdf = Sdf2d::viewport(self.pos * self.rect_size);
            let center = self.rect_size * 0.5;
            let radius = min(center.x, center.y) - 1.0;
            sdf.circle(center.x, center.y, radius);
            sdf.fill(self.color);
            return sdf.result;
        }
    }
}

Estrutura do Shader

…