Does Makepad use standard GLSL syntax?

Makepad uses a custom Rust-like shader syntax that is compiled to GPU code. It supports most GLSL ES 1.0 functions but uses a 'self.' prefix to access uniforms and built-in variables.

Can this skill help with UI animations?

Yes, it provides specific patterns for time-based animations, including loading spinners, progress bars, and transition effects like hover states and toggles.

How do I trigger a custom background shader in Makepad?

To enable a custom shader, you must set 'show_bg: true' in your widget definition and then define the shader logic within the 'draw_bg' block, typically inside an 'fn pixel(self) -> vec4' function.

What is Sdf2d in the Makepad ecosystem?

Sdf2d is Makepad's 2D signed distance field library used to draw complex, resolution-independent shapes like circles, boxes, and paths with high-quality antialiasing directly on the GPU.

Makepad Shaders

Name: Makepad Shaders
Author: ZhangHanDong

byZhangHanDong

•

699

•

Design Tools

Generates high-performance GPU shaders and sophisticated 2D vector shapes using Makepad’s Sdf2d and Rust-based shader language.

This skill empowers developers to build complex, hardware-accelerated UI components within the Makepad ecosystem by providing expert guidance on its unique shader syntax and Sdf2d drawing system. It offers pre-built implementation patterns for rounded rectangles, gradients, shadows, and interactive animations while ensuring code adheres to Makepad's specific GPU architecture. Whether you are creating custom widgets or optimizing visual effects, this skill streamlines the development of responsive, high-fidelity interfaces by automating boilerplate and offering deep technical insights into the Makepad framework.

Key Features

01Expert generation of Sdf2d shapes, paths, and boolean operations

02Implementation of interactive UI states like hover, toggle, and loading

03699 GitHub stars

04Production-ready patterns for gradients, shadows, and glow effects

05Automated guidance for draw_bg and draw_quad shader structures

06Validation of Rust-like shader syntax and built-in GLSL functions

Use Cases

01Creating hardware-accelerated animations for mobile and desktop Rust apps

02Translating design requirements into efficient GPU-based pixel shaders

03Designing custom UI widgets with complex geometry and anti-aliased borders

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add zhanghandong/makepad-skills makepad-shaders

For use in Claude.ai and ChatGPT

Download Skill