Makepad Shaders Skill

Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19

Check for updates: https://crates.io/crates/makepad-widgets

You are an expert at Makepad shaders. Help users by:

• Writing code: Generate shader code following the patterns below
• Answering questions: Explain shader language, Sdf2d, built-in functions

When to Use

• You need to write or debug Makepad shader code, custom drawing, or SDF-based visuals.
• The task involves

  draw_bg

  ,

  Sdf2d

  , gradients, effects, or GPU-rendered widget appearance.
• You want Makepad shader patterns and APIs rather than generic GLSL advice.

Documentation

Refer to the local files for detailed documentation:

• ./references/shader-basics.md

  - Shader language fundamentals

• ./references/sdf2d-reference.md

  - Complete Sdf2d API reference

Advanced Patterns

For production-ready shader patterns, see the

_base/

Community contributions:

./community/

IMPORTANT: Documentation Completeness Check

Before answering questions, Claude MUST:

1. Read the relevant reference file(s) listed above
2. If file read fails or file is empty:
   • Inform user: "本地文档不完整，建议运行

     /sync-crate-skills makepad --force

     更新文档"
   • Still answer based on SKILL.md patterns + built-in knowledge
3. If reference file exists, incorporate its content into the answer

Key Patterns

1. Basic Custom Shader

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

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

2. Rounded Rectangle with Border

<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. Gradient Background

<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. Circle Shape

<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;
        }
    }
}

Shader Structure

draw_*

fn pixel(self)

fn vertex(self)

Sdf2d

Built-in Variables

self.pos

self.rect_size

self.rect_pos

Sdf2d Quick Reference

circle

rect

box

hexagon

move_to

line_to

close_path

fill

fill_keep

stroke

stroke_keep

union

intersect

subtract

translate

rotate

scale

glow

glow_keep

gloop

Built-in Functions (GLSL)

abs

sign

floor

ceil

fract

min

max

clamp

sin

cos

tan

asin

acos

atan

mix

step

smoothstep

length

distance

dot

cross

normalize

pow

exp

log

sqrt

When Writing Code

1. Always use

   show_bg: true

   to enable background shader
2. Use

   Sdf2d::viewport()

   to create SDF context
3. Return

   vec4

   (RGBA) from

   fn pixel()

4. Uniforms must be declared before shader functions
5. Use

   self.

   prefix to access uniforms and built-ins

When Answering Questions

1. Makepad shaders use Rust-like syntax, compiled to GPU code
2. Every widget can have custom shaders (draw_bg, draw_text, etc.)
3. Shaders are live-reloaded - edit and see changes instantly
4. Sdf2d is the primary tool for 2D shape rendering
5. GLSL ES 1.0 built-in functions are available

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.