{"id":"6ba2428c-c7b8-4af9-89a9-90b3c0cfc375","shortId":"5F9cXT","kind":"skill","title":"makepad-animation","tagline":"CRITICAL: Use for Makepad animation system. Triggers on:\nmakepad animation, makepad animator, makepad hover, makepad state,\nmakepad transition, \"from: { all: Forward\", makepad pressed,\nmakepad 动画, makepad 状态, makepad 过渡, makepad 悬停效果","description":"# Makepad Animation 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 animations. Help users by:\n- **Writing code**: Generate animation code following the patterns below\n- **Answering questions**: Explain states, transitions, timelines\n\n## When to Use\n- You need to build or debug animations, transitions, hover states, or animator timelines in Makepad.\n- The task involves `animator`, state changes, easing, keyframes, or visual interaction feedback.\n- You want Makepad-specific animation patterns instead of generic Rust UI guidance.\n\n## Documentation\n\nRefer to the local files for detailed documentation:\n- `./references/animation-system.md` - Complete animation reference\n\n## Advanced Patterns\n\nFor production-ready animation patterns, see the `_base/` directory:\n\n| Pattern | Description |\n|---------|-------------|\n| 06-animator-basics | Animator fundamentals |\n| 07-easing-functions | Easing and timing |\n| 08-keyframe-animation | Complex keyframes |\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 Hover Animation\n\n```rust\n<Button> {\n    text: \"Hover Me\"\n\n    animator: {\n        hover = {\n            default: off\n\n            off = {\n                from: { all: Forward { duration: 0.15 } }\n                apply: {\n                    draw_bg: { color: #333333 }\n                }\n            }\n\n            on = {\n                from: { all: Forward { duration: 0.15 } }\n                apply: {\n                    draw_bg: { color: #555555 }\n                }\n            }\n        }\n    }\n}\n```\n\n### 2. Multi-State Animation\n\n```rust\n<View> {\n    animator: {\n        hover = {\n            default: off\n            off = {\n                from: { all: Forward { duration: 0.2 } }\n                apply: { draw_bg: { color: #222222 } }\n            }\n            on = {\n                from: { all: Forward { duration: 0.2 } }\n                apply: { draw_bg: { color: #444444 } }\n            }\n        }\n\n        pressed = {\n            default: off\n            off = {\n                from: { all: Forward { duration: 0.1 } }\n                apply: { draw_bg: { scale: 1.0 } }\n            }\n            on = {\n                from: { all: Forward { duration: 0.1 } }\n                apply: { draw_bg: { scale: 0.95 } }\n            }\n        }\n    }\n}\n```\n\n### 3. Focus State Animation\n\n```rust\n<TextInput> {\n    animator: {\n        focus = {\n            default: off\n\n            off = {\n                from: { all: Forward { duration: 0.2 } }\n                apply: {\n                    draw_bg: {\n                        border_color: #444444\n                        border_size: 1.0\n                    }\n                }\n            }\n\n            on = {\n                from: { all: Forward { duration: 0.2 } }\n                apply: {\n                    draw_bg: {\n                        border_color: #0066CC\n                        border_size: 2.0\n                    }\n                }\n            }\n        }\n    }\n}\n```\n\n### 4. Disabled State\n\n```rust\n<Button> {\n    animator: {\n        disabled = {\n            default: off\n\n            off = {\n                from: { all: Snap }\n                apply: {\n                    draw_bg: { color: #0066CC }\n                    draw_text: { color: #FFFFFF }\n                }\n            }\n\n            on = {\n                from: { all: Snap }\n                apply: {\n                    draw_bg: { color: #333333 }\n                    draw_text: { color: #666666 }\n                }\n            }\n        }\n    }\n}\n```\n\n## Animator Structure\n\n| Property | Description |\n|----------|-------------|\n| `animator` | Root animation container |\n| `{state} =` | State definition (hover, pressed, focus, disabled) |\n| `default:` | Initial state value |\n| `{value} =` | State value definition (on, off, custom) |\n| `from:` | Transition timeline |\n| `apply:` | Properties to animate |\n\n## Timeline Types (Play Enum)\n\n| Type | Description |\n|------|-------------|\n| `Forward { duration: f64 }` | Linear forward animation |\n| `Snap` | Instant change, no transition |\n| `Reverse { duration: f64, end: f64 }` | Reverse animation |\n| `Loop { duration: f64, end: f64 }` | Looping animation |\n| `BounceLoop { duration: f64, end: f64 }` | Bounce loop animation |\n\n## Easing Functions (Ease Enum)\n\n```rust\n// Basic\nLinear\n\n// Quadratic\nInQuad, OutQuad, InOutQuad\n\n// Cubic\nInCubic, OutCubic, InOutCubic\n\n// Quartic\nInQuart, OutQuart, InOutQuart\n\n// Quintic\nInQuint, OutQuint, InOutQuint\n\n// Sinusoidal\nInSine, OutSine, InOutSine\n\n// Exponential\nInExp, OutExp, InOutExp\n\n// Circular\nInCirc, OutCirc, InOutCirc\n\n// Elastic\nInElastic, OutElastic, InOutElastic\n\n// Back\nInBack, OutBack, InOutBack\n\n// Bounce\nInBounce, OutBounce, InOutBounce\n\n// Custom\nExpDecay { d1: f64, d2: f64 }\nBezier { cp0: f64, cp1: f64, cp2: f64, cp3: f64 }\nPow { begin: f64, end: f64 }\n```\n\n### Using Easing\n\n```rust\nfrom: {\n    all: Ease { duration: 0.3, ease: InOutQuad }\n}\n```\n\n## Common States\n\n| State | Values | Trigger |\n|-------|--------|---------|\n| `hover` | on, off | Mouse enter/leave |\n| `pressed` / `down` | on, off | Mouse press/release |\n| `focus` | on, off | Focus gain/lose |\n| `disabled` | on, off | Widget enabled/disabled |\n| `selected` | on, off | Selection change |\n\n## Animatable Properties\n\nMost `draw_*` shader uniforms can be animated:\n- Colors: `color`, `border_color`, `shadow_color`\n- Sizes: `border_size`, `border_radius`, `shadow_radius`\n- Transforms: `scale`, `rotation`, `offset`\n- Opacity: `opacity`\n\n## When Writing Code\n\n1. Always set `default:` for initial state\n2. Use `Forward` for smooth transitions\n3. Use `Snap` for instant state changes (like disabled)\n4. Keep durations short (0.1-0.3s) for responsive feel\n5. Animate shader uniforms in `draw_bg`, `draw_text`, etc.\n\n## Rust API (AnimatorImpl Trait)\n\n```rust\npub trait AnimatorImpl {\n    // Animate to state\n    fn animator_play(&mut self, cx: &mut Cx, state: &[LiveId; 2]);\n\n    // Cut to state (no animation)\n    fn animator_cut(&mut self, cx: &mut Cx, state: &[LiveId; 2]);\n\n    // Check current state\n    fn animator_in_state(&self, cx: &Cx, state: &[LiveId; 2]) -> bool;\n}\n\n// Usage example\nfn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {\n    match event.hits(cx, self.area()) {\n        Hit::FingerHoverIn(_) => {\n            self.animator_play(cx, id!(hover.on));\n        }\n        Hit::FingerHoverOut(_) => {\n            self.animator_play(cx, id!(hover.off));\n        }\n        Hit::FingerDown(_) => {\n            self.animator_play(cx, id!(pressed.on));\n        }\n        Hit::FingerUp(_) => {\n            self.animator_play(cx, id!(pressed.off));\n        }\n        _ => {}\n    }\n}\n```\n\n## When Answering Questions\n\n1. States are independent - multiple can be active simultaneously\n2. Animation applies properties when state reaches that value\n3. `from` defines HOW to animate, `apply` defines WHAT to animate\n4. Makepad tweens between old and new values automatically\n5. Use `id!(state.value)` macro to reference animation states in Rust\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","animation","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-makepad-animation","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-animation","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 (7,833 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.267Z","embedding":null,"createdAt":"2026-04-18T21:40:21.190Z","updatedAt":"2026-04-23T12:51:12.267Z","lastSeenAt":"2026-04-23T12:51:12.267Z","tsv":"'-0.3':629 '-01':47 '-19':48 '/crates/makepad-widgets':54 '/references/animation-system.md':132 '/sync-crate-skills':200 '0.1':301,312,628 '0.15':244,255 '0.2':276,287,332,347 '0.3':537 '0.95':317 '0066cc':353,373 '06':150 '07':156 '08':163 '1':178,227,602,746 '1.0':306,341 '2':187,261,609,665,681,694,755 '2.0':356 '2026':46 '222222':281 '3':214,318,615,764 '333333':249,386 '4':357,624,775 '444444':292,338 '5':634,784 '555555':260 '666666':390 'activ':753 'advanc':136 'alway':603 'anim':3,8,13,15,36,61,68,89,94,101,115,134,142,152,154,166,230,235,265,267,321,323,361,391,395,397,423,435,447,454,462,579,635,652,656,670,672,686,756,769,774,791 'animat':571 'animator-bas':151 'animatorimpl':646,651 'answer':74,174,205,224,744 'api':645 'appli':245,256,277,288,302,313,333,348,369,382,420,757,770 'ask':828 'automat':783 'back':502 'base':146,206 'basic':153,228,468 'begin':526 'bezier':516 'bg':247,258,279,290,304,315,335,350,371,384,640 'bool':695 'border':336,339,351,354,582,587,589 'bounc':460,506 'bounceloop':455 'boundari':836 'branch':43 'build':86 'built':211 'built-in':210 'chang':103,438,570,621 'check':49,172,682 'circular':494 'clarif':830 'claud':176 'clear':803 'code':66,69,601 'color':248,259,280,291,337,352,372,376,385,389,580,581,583,585 'common':540 'complet':133,171 'complex':167 'contain':398 'content':221 'cp0':517 'cp1':519 'cp2':521 'cp3':523 'crates.io':53 'crates.io/crates/makepad-widgets':52 'criteria':839 'critic':4 'cubic':474 'current':683 'custom':416,510 'cut':666,673 'cx':660,662,676,678,690,691,703,705,713,719,726,733,740 'd1':512 'd2':514 'debug':88 'default':237,269,294,325,363,406,605 'defin':766,771 'definit':401,413 'describ':807 'descript':149,394,429 'detail':130 'dev':42 'directori':147 'disabl':358,362,405,561,623 'document':123,131,170 'draw':246,257,278,289,303,314,334,349,370,374,383,387,574,639,641 'durat':243,254,275,286,300,311,331,346,431,442,449,456,536,626 'eas':104,158,160,463,465,531,535,538 'easing-funct':157 'elast':498 'empti':195 'enabled/disabled':565 'end':444,451,458,528 'enter/leave':549 'enum':427,466 'environ':819 'environment-specif':818 'etc':643 'event':700,706,707 'event.hits':712 'exampl':697 'exist':218 'expdecay':511 'expert':58,824 'explain':76 'exponenti':490 'f64':432,443,445,450,452,457,459,513,515,518,520,522,524,527,529 'fail':191 'feedback':109 'feel':633 'ffffff':377 'file':128,183,189,193,217 'fingerdown':730 'fingerhoverin':716 'fingerhoverout':723 'fingerup':737 'fn':655,671,685,698 'focus':319,324,404,556,559 'follow':70 'forc':202 'forward':24,242,253,274,285,299,310,330,345,430,434,611 'function':159,464 'fundament':155 'gain/lose':560 'generat':67 'generic':119 'guidanc':122 'handl':699 'help':62 'hit':715,722,729,736 'hover':17,91,229,233,236,268,402,545 'hover.off':728 'hover.on':721 'id':720,727,734,741,786 'import':169 'inback':503 'inbounc':507 'incirc':495 'incorpor':219 'incub':475 'independ':749 'inelast':499 'inexp':491 'inform':196 'initi':407,607 'inoutback':505 'inoutbounc':509 'inoutcirc':497 'inoutcub':477 'inoutelast':501 'inoutexp':493 'inoutquad':473,539 'inoutquart':481 'inoutquint':485 'inoutsin':489 'input':833 'inquad':471 'inquart':479 'inquint':483 'insin':487 'instant':437,619 'instead':117 'interact':108 'involv':100 'keep':625 'key':225 'keyfram':105,165,168 'keyframe-anim':164 'knowledg':213 'last':44 'like':622 'limit':795 'linear':433,469 'list':185 'liveid':664,680,693 'local':127 'loop':448,453,461 'macro':788 'makepad':2,7,12,14,16,18,20,25,27,29,31,33,35,40,60,97,113,201,776 'makepad-anim':1 'makepad-specif':112 'makepad-widget':39 'match':711,804 'miss':841 'mous':548,554 'multi':263 'multi-st':262 'multipl':750 'must':177 'mut':658,661,674,677,701,704,709 'need':84 'new':781 'offset':596 'old':779 'opac':597,598 'outback':504 'outbounc':508 'outcirc':496 'outcub':476 'outelast':500 'outexp':492 'output':813 'outquad':472 'outquart':480 'outquint':484 'outsin':488 'pattern':72,116,137,143,148,209,226 'permiss':834 'play':426,657,718,725,732,739 'pow':525 'press':26,293,403,550 'press/release':555 'pressed.off':742 'pressed.on':735 'product':140 'production-readi':139 'properti':393,421,572,758 'pub':649 'quadrat':470 'quartic':478 'question':75,175,745 'quintic':482 'radius':590,592 'reach':761 'read':179,190 'readi':141 'refer':124,135,182,216,790 'relev':181 'requir':832 'respons':632 'revers':441,446 'review':825 'root':396 'rotat':595 'rust':120,231,266,322,360,467,532,644,648,794 'safeti':835 'scale':305,316,594 'scope':708,710,806 'see':144 'select':566,569 'self':659,675,689,702 'self.animator':717,724,731,738 'self.area':714 'set':604 'shader':575,636 'shadow':584,591 'short':627 'simultan':754 'sinusoid':486 'size':340,355,586,588 'skill':37,798 'skill-makepad-animation' 'skill.md':208 'smooth':613 'snap':368,381,436,617 'source-sickn33' 'specif':114,820 'state':19,77,92,102,264,320,359,399,400,408,411,541,542,608,620,654,663,668,679,684,688,692,747,760,792 'state.value':787 'still':204 'stop':826 'structur':392 'substitut':816 'success':838 'system':9 'task':99,802 'test':822 'text':232,375,388,642 'time':162 'timelin':79,95,419,424 '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' 'trait':647,650 'transform':593 'transit':21,78,90,418,440,614 'treat':811 'trigger':10,544 'tween':777 'type':425,428 'ui':121 'uniform':576,637 'updat':45,51 'usag':696 'use':5,82,530,610,616,785,796 'user':63,197 'valid':821 'valu':409,410,412,543,763,782 'version':38 'visual':107 'want':111 'widget':41,564 'write':65,600 '动画':28 '建议运行':199 '悬停效果':34 '更新文档':203 '本地文档不完整':198 '状态':30 '过渡':32","prices":[{"id":"7e389e6b-631b-4d2b-9227-c55d4bf68b1b","listingId":"6ba2428c-c7b8-4af9-89a9-90b3c0cfc375","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:21.190Z"}],"sources":[{"listingId":"6ba2428c-c7b8-4af9-89a9-90b3c0cfc375","source":"github","sourceId":"sickn33/antigravity-awesome-skills/makepad-animation","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/makepad-animation","isPrimary":false,"firstSeenAt":"2026-04-18T21:40:21.190Z","lastSeenAt":"2026-04-23T12:51:12.267Z"}],"details":{"listingId":"6ba2428c-c7b8-4af9-89a9-90b3c0cfc375","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"makepad-animation","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":"0475b3a337c218a84fbbd8d021a80a91313e633a","skill_md_path":"skills/makepad-animation/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/makepad-animation"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"makepad-animation","description":"CRITICAL: Use for Makepad animation system. Triggers on:\nmakepad animation, makepad animator, makepad hover, makepad state,\nmakepad transition, \"from: { all: Forward\", makepad pressed,\nmakepad 动画, makepad 状态, makepad 过渡, makepad 悬停效果"},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/makepad-animation"},"updatedAt":"2026-04-23T12:51:12.267Z"}}