mirror of https://github.com/sickn33/antigravity-awesome-skills.git synced 2026-04-25 17:25:12 +02:00

Files

sickn33 fc3c7ae8a2 meta(skills): Add skill audit and safe metadata fixes

Add repo-wide auditing and targeted repair scripts for skill metadata.
Fix truncated descriptions automatically, keep heading normalization
conservative, and remove synthetic boilerplate sections that degrade
editorial quality while regenerating repo indexes and catalogs.

Fixes #365

2026-03-20 09:06:45 +01:00

2.3 KiB

Raw Blame History

name, description, risk, source, date_added

name	description	risk	source	date_added
animejs-animation	Advanced JavaScript animation library skill for creating complex, high-performance web animations.	safe	community	2026-03-07

Anime.js Animation Skill

Anime.js is a lightweight but extremely powerful JavaScript animation engine. It excels at complex timelines, staggering, and precise control over DOM, CSS, and SVGs.

Context

This 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.

When to Use

Trigger this skill when:

Creating complex, multi-stage landing page orchestrations.
Implementing staggered animations for revealing grids, text, or data visualizations.
Animating SVG paths (morphing shapes, drawing dynamic lines).
Building highly interactive, kinetic UI elements that respond fluidly to user input.

Execution Workflow

Identify Targets: Select the DOM elements or SVGs to be animated.
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.
Orchestrate Timelines: Use anime.timeline() to sequence complex choreography. Master the use of timeline offsets (relative '-=200' vs absolute) to create seamless overlapping motion.

Implement:

const tl = anime.timeline({
  easing: "spring(1, 80, 10, 0)",
  duration: 1000,
});
tl.add({
  targets: ".hero-text",
  translateY: [50, 0],
  opacity: [0, 1],
  delay: anime.stagger(100),
}).add(
  { targets: ".hero-image", scale: [0.9, 1], opacity: [0, 1] },
  "-=800",
);

Strict Rules

ABSOLUTE MANDATE: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT build common, boring transitions. Every animation should feel bespoke, fluid, and heavily polished.
Staggering: Leverage anime.stagger() extensively to add organic rhythm to multiple elements.
Performance: Monitor main thread usage; use will-change: transform, opacity where appropriate for GPU acceleration.

2.3 KiB Raw Blame History