[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-385fab65-dd72-4fd0-a757-b35b3671de62":3,"$fJzOZ2NzlC7ypGYdKqlBzSiMP7DC6A32EFUq0D33azhM":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"385fab65-dd72-4fd0-a757-b35b3671de62","makepad-shaders","|","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: makepad-shaders\ndescription: |\n  CRITICAL: Use for Makepad shader system. Triggers on:\n  makepad shader, makepad draw_bg, Sdf2d, makepad pixel,\n  makepad glsl, makepad sdf, draw_quad, makepad gpu,\n  makepad 着色器, makepad shader 语法, makepad 绘制\nrisk: unknown\nsource: community\n---\n\n# Makepad Shaders Skill\n\n> **Version:** makepad-widgets (dev branch) | **Last Updated:** 2026-01-19\n>\n> Check for updates: https:\u002F\u002Fcrates.io\u002Fcrates\u002Fmakepad-widgets\n\nYou are an expert at Makepad shaders. Help users by:\n- **Writing code**: Generate shader code following the patterns below\n- **Answering questions**: Explain shader language, Sdf2d, built-in functions\n\n## When to Use\n- You need to write or debug Makepad shader code, custom drawing, or SDF-based visuals.\n- The task involves `draw_bg`, `Sdf2d`, gradients, effects, or GPU-rendered widget appearance.\n- You want Makepad shader patterns and APIs rather than generic GLSL advice.\n\n## Documentation\n\nRefer to the local files for detailed documentation:\n- `.\u002Freferences\u002Fshader-basics.md` - Shader language fundamentals\n- `.\u002Freferences\u002Fsdf2d-reference.md` - Complete Sdf2d API reference\n\n## Advanced Patterns\n\nFor production-ready shader patterns, see the `_base\u002F` directory:\n\n| Pattern | Description |\n|---------|-------------|\n| 01-shader-structure | Shader fundamentals |\n| 02-shader-math | Mathematical functions |\n| 03-sdf-shapes | SDF shape primitives |\n| 04-sdf-drawing | Advanced SDF drawing |\n| 05-progress-track | Progress indicators |\n| 09-loading-spinner | Loading animations |\n| 10-hover-effect | Hover visual effects |\n| 11-gradient-effects | Color gradients |\n| 12-shadow-glow | Shadow and glow |\n| 13-disabled-state | Disabled visuals |\n| 14-toggle-checkbox | Toggle animations |\n\nCommunity contributions: `.\u002Fcommunity\u002F`\n\n## IMPORTANT: Documentation Completeness Check\n\n**Before answering questions, Claude MUST:**\n\n1. Read the relevant reference file(s) listed above\n2. If file read fails or file is empty:\n   - Inform user: \"本地文档不完整，建议运行 `\u002Fsync-crate-skills makepad --force` 更新文档\"\n   - Still answer based on SKILL.md patterns + built-in knowledge\n3. If reference file exists, incorporate its content into the answer\n\n## Key Patterns\n\n### 1. Basic Custom Shader\n\n```rust\n\u003CView> {\n    show_bg: true\n    draw_bg: {\n        \u002F\u002F Shader uniforms\n        color: #FF0000\n\n        \u002F\u002F Custom pixel shader\n        fn pixel(self) -> vec4 {\n            return self.color;\n        }\n    }\n}\n```\n\n### 2. Rounded Rectangle with Border\n\n```rust\n\u003CView> {\n    show_bg: true\n    draw_bg: {\n        color: #333333\n        border_color: #666666\n        border_radius: 8.0\n        border_size: 1.0\n\n        fn pixel(self) -> vec4 {\n            let sdf = Sdf2d::viewport(self.pos * self.rect_size);\n            sdf.box(1.0, 1.0,\n                    self.rect_size.x - 2.0,\n                    self.rect_size.y - 2.0,\n                    self.border_radius);\n            sdf.fill_keep(self.color);\n            sdf.stroke(self.border_color, self.border_size);\n            return sdf.result;\n        }\n    }\n}\n```\n\n### 3. Gradient Background\n\n```rust\n\u003CView> {\n    show_bg: true\n    draw_bg: {\n        color: #FF0000\n        color_2: #0000FF\n\n        fn pixel(self) -> vec4 {\n            let t = self.pos.x;  \u002F\u002F Horizontal gradient\n            return mix(self.color, self.color_2, t);\n        }\n    }\n}\n```\n\n### 4. Circle Shape\n\n```rust\n\u003CView> {\n    show_bg: true\n    draw_bg: {\n        color: #0066CC\n\n        fn pixel(self) -> vec4 {\n            let sdf = Sdf2d::viewport(self.pos * self.rect_size);\n            let center = self.rect_size * 0.5;\n            let radius = min(center.x, center.y) - 1.0;\n            sdf.circle(center.x, center.y, radius);\n            sdf.fill(self.color);\n            return sdf.result;\n        }\n    }\n}\n```\n\n## Shader Structure\n\n| Component | Description |\n|-----------|-------------|\n| `draw_*` | Shader container (draw_bg, draw_text, draw_icon) |\n| Uniforms | Typed properties accessible in shader |\n| `fn pixel(self)` | Fragment shader function |\n| `fn vertex(self)` | Vertex shader function (optional) |\n| `Sdf2d` | 2D signed distance field helper |\n\n## Built-in Variables\n\n| Variable | Type | Description |\n|----------|------|-------------|\n| `self.pos` | vec2 | Normalized position (0-1) |\n| `self.rect_size` | vec2 | Widget size in pixels |\n| `self.rect_pos` | vec2 | Widget position |\n\n## Sdf2d Quick Reference\n\n| Category | Functions |\n|----------|-----------|\n| Shapes | `circle`, `rect`, `box`, `hexagon` |\n| Paths | `move_to`, `line_to`, `close_path` |\n| Fill\u002FStroke | `fill`, `fill_keep`, `stroke`, `stroke_keep` |\n| Boolean | `union`, `intersect`, `subtract` |\n| Transform | `translate`, `rotate`, `scale` |\n| Effects | `glow`, `glow_keep`, `gloop` |\n\n## Built-in Functions (GLSL)\n\n| Category | Functions |\n|----------|-----------|\n| Math | `abs`, `sign`, `floor`, `ceil`, `fract`, `min`, `max`, `clamp` |\n| Trig | `sin`, `cos`, `tan`, `asin`, `acos`, `atan` |\n| Interp | `mix`, `step`, `smoothstep` |\n| Vector | `length`, `distance`, `dot`, `cross`, `normalize` |\n| Exp | `pow`, `exp`, `log`, `sqrt` |\n\n## When Writing Code\n\n1. Always use `show_bg: true` to enable background shader\n2. Use `Sdf2d::viewport()` to create SDF context\n3. Return `vec4` (RGBA) from `fn pixel()`\n4. Uniforms must be declared before shader functions\n5. Use `self.` prefix to access uniforms and built-ins\n\n## When Answering Questions\n\n1. Makepad shaders use Rust-like syntax, compiled to GPU code\n2. Every widget can have custom shaders (draw_bg, draw_text, etc.)\n3. Shaders are live-reloaded - edit and see changes instantly\n4. Sdf2d is the primary tool for 2D shape rendering\n5. GLSL ES 1.0 built-in functions are available\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,126,1665,"2026-05-16 13:27:40",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"7c3180f9-f39b-4627-9a4c-ee274a18d371","1.0.0","makepad-shaders.zip",2707,"uploads\u002Fskills\u002F385fab65-dd72-4fd0-a757-b35b3671de62\u002Fmakepad-shaders.zip","1fb4de2c4fd2ae66e5d9b4d9213ae1e4df8a0aff4d0eb9347b6c5be98c5a3f99","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":6057}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]