[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-9a478c05-07c0-450f-bf7c-4d8ec57919b7":3,"$fXFtwccWptuKjRMsos_vmMdbercdNHQlZcwwES7Vta6I":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},"9a478c05-07c0-450f-bf7c-4d8ec57919b7","animejs-animation","高级JavaScript动画库技能，用于创建复杂、高性能的网页动画。","cat_design_graphic","mod_design","sickn33,design","--- \nname: animejs-animation\ndescription: Advanced JavaScript animation library skill for creating complex, high-performance web animations.\nrisk: safe\nsource: community\ndate_added: \"2026-03-07\"\n---\n\n# Anime.js Animation Skill\n\n[Anime.js](https:\u002F\u002Fanimejs.com\u002F) is a lightweight but extremely powerful JavaScript animation engine. It excels at complex timelines, staggering, and precise control over DOM, CSS, and SVGs.\n\n## Context\n\nThis skill is used for creating high-fidelity, jaw-dropping web animations that go far beyond simple CSS transitions. It's the tool of choice for awards-caliber interactive sites.\n\n## When to Use\nTrigger this skill when:\n\n- Creating complex, multi-stage landing page orchestrations.\n- Implementing staggered animations for revealing grids, text, or data visualizations.\n- Animating SVG paths (morphing shapes, drawing dynamic lines).\n- Building highly interactive, kinetic UI elements that respond fluidly to user input.\n\n## Execution Workflow\n\n1. **Identify Targets**: Select the DOM elements or SVGs to be animated.\n2. **Define Properties & Easing**: Specify values to animate. **Crucially**, utilize advanced easing functions (e.g., custom `cubicBezier`, `spring`, or `elastic`) instead of basic `linear` or `ease-in-out` to make the motion feel expensive and natural.\n3. **Orchestrate Timelines**: Use `anime.timeline()` to sequence complex choreography. Master the use of timeline offsets (relative `'-=200'` vs absolute) to create seamless overlapping motion.\n4. **Implement**:\n   ```javascript\n   const tl = anime.timeline({\n     easing: \"spring(1, 80, 10, 0)\",\n     duration: 1000,\n   });\n   tl.add({\n     targets: \".hero-text\",\n     translateY: [50, 0],\n     opacity: [0, 1],\n     delay: anime.stagger(100),\n   }).add(\n     { targets: \".hero-image\", scale: [0.9, 1], opacity: [0, 1] },\n     \"-=800\",\n   );\n   ```\n\n## Strict Rules\n\n- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI\u002FUX. DO NOT build common, boring transitions. Every animation should feel bespoke, fluid, and heavily polished.\n- **Staggering**: Leverage `anime.stagger()` extensively to add organic rhythm to multiple elements.\n- **Performance**: Monitor main thread usage; use `will-change: transform, opacity` where appropriate for GPU acceleration.\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,109,1040,"2026-05-16 13:03:02",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"设计创意","design","mdi-palette-outline","UI 设计、生成艺术、品牌视觉等创意 Skill",3,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"视觉创意","graphic","mdi-brush","海报、Logo、插画等视觉创作",2,48,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"78b55d54-4769-47ac-bdbc-3c5d82c75fb0","1.0.0","animejs-animation.zip",1536,"uploads\u002Fskills\u002F9a478c05-07c0-450f-bf7c-4d8ec57919b7\u002Fanimejs-animation.zip","372de95c58f2fd29fbdc65cbd6f31ceca5176fcd2299c5340a633ae6c5b8d5ae","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":2634}]",{"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]