Generate Makepad Shaders and Graphics Code

Makepad Shaders Skill is an expert reference for writing and debugging Makepad shader code, custom drawing, and SDF-based visuals in the Makepad Rust UI framework, using Makepad's own Rust-like shader syntax rather than generic GLSL advice (tracks the makepad-widgets dev branch).

Before answering, it is instructed to read local shader-basics.md and sdf2d-reference.md reference files and incorporate their content, falling back to SKILL.md patterns plus built-in knowledge if a file is missing or empty (surfacing a documentation-sync command to the user in that case). It also points to an eleven-pattern _base/ directory of production-ready shader examples covering shader structure, math, SDF shapes, advanced SDF drawing, progress tracks, loading spinners, hover effects, gradients, shadow/glow, disabled states, and toggle-checkbox animations.

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

Four key patterns are documented with working code: a basic custom shader returning a flat color from fn pixel(), a rounded rectangle with border using Sdf2d::viewport() and box/fill_keep/stroke, a horizontal gradient background mixing two colors by self.pos.x, and a circle shape using Sdf2d::circle() with a computed center and radius. The shader structure table covers five components (draw_* shader containers like draw_bg/draw_text/draw_icon, typed uniforms, the required fn pixel(self) fragment function, the optional fn vertex(self), and the Sdf2d 2D signed-distance-field helper), plus three built-in variables (self.pos normalized position, self.rect_size, self.rect_pos). The Sdf2d quick reference covers six function categories: shapes (circle, rect, box, hexagon), paths (move_to, line_to, close_path), fill/stroke (fill, fill_keep, stroke, stroke_keep), boolean ops (union, intersect, subtract), transforms (translate, rotate, scale), and effects (glow, glow_keep, gloop). A separate table lists available GLSL ES 1.0 built-in functions across math, trig, interpolation, vector, and exponential categories.

Five rules govern writing shader code: always set show_bg: true to enable the background shader, use Sdf2d::viewport() to create the SDF context, return a vec4 (RGBA) from fn pixel(), declare uniforms before shader functions, and use the self. prefix to access uniforms and built-ins. Five conceptual points guide question-answering: Makepad shaders use Rust-like syntax compiled to GPU code, every widget can have custom shaders on any draw_* property, shaders are live-reloaded so edits appear instantly, Sdf2d is the primary tool for 2D shape rendering, and GLSL ES 1.0 built-in functions are available inside shader code.

Use this skill when writing or debugging Makepad shader code, custom drawing, or SDF-based visuals, or when the task involves draw_bg, Sdf2d, gradients, effects, or GPU-rendered widget appearance specifically.

It is scoped to Makepad's shader/rendering layer, not app boilerplate, DSL composition, layout, animation, events, or fonts covered by sibling Makepad skills. It is not a substitute for environment-specific validation, testing, or expert review - if local reference documentation is missing, it flags this explicitly rather than silently guessing beyond its built-in knowledge.

Inputs: a description of the custom visual effect, shape, gradient, or GPU-rendered appearance needed for a Makepad widget.

Outputs: Makepad shader DSL code (draw_bg/draw_text/etc. blocks with a fn pixel() implementation, optionally using Sdf2d for shape rendering).

Part of the Makepad skill family alongside basics, DSL, layout, animation, event/action, font, deployment, and reference skills; references local shader-basics.md and sdf2d-reference.md documentation plus an eleven-pattern production example library, kept in sync via a /sync-crate-skills makepad command.

Makepad developers writing custom widget visuals, GPU-rendered shapes, gradients, or interactive visual effects who need Makepad-specific shader syntax and the Sdf2d API.