{"id":"9bda1bce-56ac-4792-b368-7ad9b3b3761f","shortId":"4SDF4T","kind":"skill","title":"makepad-shaders","tagline":"CRITICAL: Use for Makepad shader system. Triggers on:\nmakepad shader, makepad draw_bg, Sdf2d, makepad pixel,\nmakepad glsl, makepad sdf, draw_quad, makepad gpu,\nmakepad 着色器, makepad shader 语法, makepad 绘制","description":"# Makepad Shaders Skill\n\n> **Version:** makepad-widgets (dev branch) | **Last Updated:** 2026-01-19\n>\n> Check for updates: https://crates.io/crates/makepad-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- `./references/shader-basics.md` - Shader language fundamentals\n- `./references/sdf2d-reference.md` - Complete Sdf2d API reference\n\n## Advanced Patterns\n\nFor production-ready shader patterns, see the `_base/` 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: `./community/`\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: \"本地文档不完整，建议运行 `/sync-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<View> {\n    show_bg: true\n    draw_bg: {\n        // Shader uniforms\n        color: #FF0000\n\n        // 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<View> {\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<View> {\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;  // Horizontal gradient\n            return mix(self.color, self.color_2, t);\n        }\n    }\n}\n```\n\n### 4. Circle Shape\n\n```rust\n<View> {\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/Stroke | `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.","tags":["makepad","shaders","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-makepad-shaders","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/makepad-shaders","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34726 github stars · SKILL.md body (5,721 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-23T12:51:12.861Z","embedding":null,"createdAt":"2026-04-18T21:40:28.032Z","updatedAt":"2026-04-23T12:51:12.861Z","lastSeenAt":"2026-04-23T12:51:12.861Z","tsv":"'-01':47 '-1':490 '-19':48 '/community':233 '/crates/makepad-widgets':54 '/references/sdf2d-reference.md':142 '/references/shader-basics.md':138 '/sync-crate-skills':265 '0':489 '0.5':425 '0000ff':382 '0066cc':409 '01':161 '02':167 '03':173 '04':180 '05':187 '09':193 '1':243,292,581,628 '1.0':336,349,350,431,676 '10':199 '11':206 '12':212 '13':219 '14':225 '2':252,315,381,397,591,640 '2.0':353,356 '2026':46 '2d':473,670 '3':279,369,599,652 '333333':327 '4':399,606,663 '5':614,673 '666666':330 '8.0':333 'ab':548 'access':456,619 'aco':561 'advanc':147,184 'advic':128 'alway':582 'anim':198,230 'answer':74,239,270,289,626 'api':123,145 'appear':116 'asin':560 'ask':716 'atan':562 'avail':682 'background':371,589 'base':101,157,271 'basic':293 'bg':16,107,298,301,322,325,374,377,404,407,448,585,648 'boolean':527 'border':319,328,331,334 'boundari':724 'box':511 'branch':43 'built':81,276,479,541,623,678 'built-in':80,275,478,540,622,677 'categori':506,545 'ceil':551 'center':422 'center.x':429,433 'center.y':430,434 'chang':661 'check':49,237 'checkbox':228 'circl':400,509 'clamp':555 'clarif':718 'claud':241 'clear':691 'close':518 'code':66,69,95,580,639 'color':210,304,326,329,364,378,380,408 'communiti':231 'compil':636 'complet':143,236 'compon':442 'contain':446 'content':286 'context':598 'contribut':232 'cos':558 'crates.io':53 'crates.io/crates/makepad-widgets':52 'creat':596 'criteria':727 'critic':4 'cross':571 'custom':96,294,306,645 'debug':92 'declar':610 'describ':695 'descript':160,443,484 'detail':136 'dev':42 'directori':158 'disabl':221,223 'disabled-st':220 'distanc':475,569 'document':129,137,235 'dot':570 'draw':15,24,97,106,183,186,300,324,376,406,444,447,449,451,647,649 'edit':658 'effect':110,202,205,209,535 'empti':260 'enabl':588 'environ':707 'environment-specif':706 'es':675 'etc':651 'everi':641 'exist':283 'exp':573,575 'expert':58,712 'explain':76 'fail':256 'ff0000':305,379 'field':476 'file':134,248,254,258,282 'fill':521,522 'fill/stroke':520 'floor':550 'fn':309,337,383,410,459,465,604 'follow':70 'forc':267 'fract':552 'fragment':462 'function':83,172,464,470,507,543,546,613,680 'fundament':141,166 'generat':67 'generic':126 'gloop':539 'glow':215,218,536,537 'glsl':21,127,544,674 'gpu':27,113,638 'gpu-rend':112 'gradient':109,208,211,370,392 'gradient-effect':207 'help':62 'helper':477 'hexagon':512 'horizont':391 'hover':201,203 'hover-effect':200 'icon':452 'import':234 'in':624 'incorpor':284 'indic':192 'inform':261 'input':721 'instant':662 'interp':563 'intersect':529 'involv':105 'keep':360,523,526,538 'key':290 'knowledg':278 'languag':78,140 'last':44 'length':568 'let':341,387,414,421,426 'like':634 'limit':683 'line':516 'list':250 'live':656 'live-reload':655 'load':195,197 'loading-spinn':194 'local':133 'log':576 'makepad':2,7,12,14,18,20,22,26,28,30,33,35,40,60,93,119,266,629 'makepad-shad':1 'makepad-widget':39 'match':692 'math':170,547 'mathemat':171 'max':554 'min':428,553 'miss':729 'mix':394,564 'move':514 'must':242,608 'need':88 'normal':487,572 'option':471 'output':701 'path':513,519 'pattern':72,121,148,154,159,274,291 'permiss':722 'pixel':19,307,310,338,384,411,460,497,605 'pos':499 'posit':488,502 'pow':574 'prefix':617 'primari':667 'primit':179 'product':151 'production-readi':150 'progress':189,191 'progress-track':188 'properti':455 'quad':25 'question':75,240,627 'quick':504 'radius':332,358,427,435 'rather':124 'read':244,255 'readi':152 'rect':510 'rectangl':317 'refer':130,146,247,281,505 'relev':246 'reload':657 'render':114,672 'requir':720 'return':313,367,393,438,600 'review':713 'rgba':602 'rotat':533 'round':316 'rust':296,320,372,402,633 'rust-lik':632 'safeti':723 'scale':534 'scope':694 'sdf':23,100,175,177,182,185,342,415,597 'sdf-base':99 'sdf-draw':181 'sdf-shape':174 'sdf.box':348 'sdf.circle':432 'sdf.fill':359,436 'sdf.result':368,439 'sdf.stroke':362 'sdf2d':17,79,108,144,343,416,472,503,593,664 'see':155,660 'self':311,339,385,412,461,467,616 'self.border':357,363,365 'self.color':314,361,395,396,437 'self.pos':345,389,418,485 'self.rect':346,351,354,419,423,491,498 'shader':3,8,13,31,36,61,68,77,94,120,139,153,163,165,169,295,302,308,440,445,458,463,469,590,612,630,646,653 'shader-math':168 'shader-structur':162 'shadow':214,216 'shadow-glow':213 'shape':176,178,401,508,671 'show':297,321,373,403,584 'sign':474,549 'sin':557 'size':335,347,366,420,424,492,495 'size.x':352 'size.y':355 'skill':37,686 'skill-makepad-shaders' 'skill.md':273 'smoothstep':566 'source-sickn33' 'specif':708 'spinner':196 'sqrt':577 'state':222 'step':565 'still':269 'stop':714 'stroke':524,525 'structur':164,441 'substitut':704 'subtract':530 'success':726 'syntax':635 'system':9 'tan':559 'task':104,690 'test':710 'text':450,650 'toggl':227,229 'toggle-checkbox':226 'tool':668 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'track':190 'transform':531 'translat':532 'treat':699 'trig':556 'trigger':10 'true':299,323,375,405,586 'type':454,483 'uniform':303,453,607,620 'union':528 'updat':45,51 'use':5,86,583,592,615,631,684 'user':63,262 'valid':709 'variabl':481,482 'vec2':486,493,500 'vec4':312,340,386,413,601 'vector':567 'version':38 'vertex':466,468 'viewport':344,417,594 'visual':102,204,224 'want':118 'widget':41,115,494,501,642 'write':65,90,579 'x':390 '建议运行':264 '更新文档':268 '本地文档不完整':263 '着色器':29 '绘制':34 '语法':32","prices":[{"id":"be5c4d4a-1a25-406f-952d-fff72d6b693a","listingId":"9bda1bce-56ac-4792-b368-7ad9b3b3761f","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:40:28.032Z"}],"sources":[{"listingId":"9bda1bce-56ac-4792-b368-7ad9b3b3761f","source":"github","sourceId":"sickn33/antigravity-awesome-skills/makepad-shaders","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/makepad-shaders","isPrimary":false,"firstSeenAt":"2026-04-18T21:40:28.032Z","lastSeenAt":"2026-04-23T12:51:12.861Z"}],"details":{"listingId":"9bda1bce-56ac-4792-b368-7ad9b3b3761f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"makepad-shaders","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34726,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-23T06:41:03Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"bcbf448650ccfe5694f96a2f729aef57eb352a73","skill_md_path":"skills/makepad-shaders/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/makepad-shaders"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"makepad-shaders","description":"CRITICAL: Use for Makepad shader system. Triggers on:\nmakepad shader, makepad draw_bg, Sdf2d, makepad pixel,\nmakepad glsl, makepad sdf, draw_quad, makepad gpu,\nmakepad 着色器, makepad shader 语法, makepad 绘制"},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/makepad-shaders"},"updatedAt":"2026-04-23T12:51:12.861Z"}}