makepad-shaders_skill

Overview

This skill helps you write and troubleshoot Makepad shaders for UI widgets, focusing on draw_bg shaders and Sdf2d-based shapes. It generates working shader snippets, explains shader language details and Sdf2d usage, and follows Makepad patterns for production-ready visuals. Use it when you need compact, live-reloadable GPU code for buttons, backgrounds, icons, and effects.

How this skill works

The skill inspects requested shader intents (draw_bg, Sdf2d, gradients, borders, GLSL helpers) and returns Rust-like Makepad shader blocks that compile to GPU code. It references the Sdf2d API and shader patterns to compose shapes, fills, strokes, transforms and effects, and ensures uniforms and fn pixel() return vec4. If local reference files are unavailable, it will note the missing docs and still produce patterns based on internal knowledge.

When to use it

• Create or modify background shaders (draw_bg) for widgets
• Build SDF shapes: circles, rounded rects, hexagons, complex paths
• Add borders, shadows, glows and stroke effects using Sdf2d
• Compose gradients, mix colors, or animate uniforms for transitions
• Debug shader compilation issues or adapt GLSL math to Makepad syntax

Best practices

• Always set show_bg: true to enable background shaders
• Use Sdf2d::viewport(self.pos * self.rect_size) to base shapes on pixel size
• Declare uniforms before fn pixel(self) and access with self.<name>
• Return a vec4 RGBA value from fn pixel(self) and keep precision concise
• Prefer fill_keep/stroke_keep when combining fills and strokes to preserve previous draws

Example use cases

• Rounded card background with border and subtle shadow using Sdf2d box, fill_keep and glow
• Circular avatar mask shader that computes center and radius, then fills
• Horizontal or radial gradients mixing two or more color uniforms via mix()
• Animated loading spinner using Sdf2d paths and rotate transforms in fn pixel()
• Toggle switch visuals with animated border_radius and color interpolation