pinkpixel-dev/animejs-animation
SKILLS/animejs-animation/SKILL.md
Advanced JavaScript animation library skill for creating complex, high-performance web animations.
$ install --global
skillsauthnpx skillsauth add pinkpixel-dev/skills-collection-1 animejs-animationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 4, 2026, 11:16 PM9.6s1 file scanned
SKILL.md
name: animejs-animation description: Advanced JavaScript animation library skill for creating complex, high-performance web animations. risk: safe source: community date_added: "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, orelastic) instead of basiclinearorease-in-outto 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, opacitywhere appropriate for GPU acceleration.
Related Skills
pinkpixel-dev/building-threat-hunt-hypothesis-framework
development
VerifiedTrustedCommunity
Build a systematic threat hunt hypothesis framework that transforms threat intelligence, attack patterns, and environmental data into testable hunting hypotheses.
7SKILL.mdUpdated Jul 15, 2026
pinkpixel-dev/building-threat-feed-aggregation-with-misp
development
VerifiedTrustedCommunity
Deploy MISP (Malware Information Sharing Platform) to aggregate, correlate, and distribute threat intelligence feeds from multiple sources for centralized IOC management and automated SIEM integration.
7SKILL.mdUpdated Jul 15, 2026
pinkpixel-dev/building-threat-actor-profile-from-osint
development
VerifiedTrustedCommunity
Build comprehensive threat actor profiles using open-source intelligence (OSINT) techniques to document adversary motivations, capabilities, infrastructure, and TTPs for proactive defense.
7SKILL.mdUpdated Jul 15, 2026
pinkpixel-dev/building-soc-playbook-for-ransomware
development
VerifiedTrustedCommunity
Builds a structured SOC incident response playbook for ransomware attacks covering detection, containment, eradication, and recovery phases with specific SIEM queries, isolation procedures, and decision trees. Use when SOC teams need formalized response procedures for ransomware incidents aligned to NIST SP 800-61 and MITRE ATT&CK ransomware techniques.
7SKILL.mdUpdated Jul 15, 2026