$ loading_
Build advanced motion, gestures, and animation sequences in React and Next.js.
The material indicates this is an open-source, prompt-only React/Next.js animation skill with no required secrets and no declared remote endpoints. Based on the available facts, overall risk is low, with the main consideration being supply-chain verification of its prerequisite dependency/library.
The material explicitly states that no keys or environment variables are required. It does not request API tokens, account credentials, or other sensitive authentication data, so credential exposure and abuse risk is low.
No remote endpoints are declared, and the system flags it as prompt-only. Based on the material, it mainly provides frontend animation guidance, with no indication of sending user data to third-party services.
As a skill marked prompt-only, the material consists of animation patterns and API usage guidance, with no indication of local code execution, process spawning, or requests for system-level execution privileges.
The material does not describe reading, writing, or uploading local files, databases, clipboard contents, or other user data resources. Its scope appears limited to generating/guiding frontend animation code and patterns.
The source is an open-source GitHub repository with very high community adoption (about 210k stars), which are strong risk-reducing signals. Although the license is unspecified, maintenance status is unknown, and it depends on a prerequisite motion-foundations setup that should be verified before use, no concrete red flags are evident from the provided material.
Copy the install command and let the AI configure it · recommended for beginners
Please install the "motion-advanced" skill from askskill: 1. Download https://raw.githubusercontent.com/affaan-m/ECC/main/skills/motion-advanced/SKILL.md 2. Save it as ~/.claude/skills/motion-advanced/SKILL.md 3. Reload skills and tell me it's ready
Using motion-advanced, create a drag-to-reorder card list in React that supports mouse and touch input, placeholder animations, spring-back effects, and accessible keyboard interaction. Provide component code, state management, and styling suggestions.
A ready-to-integrate drag-reorder list example with animation logic, interaction handling, and implementation notes.
Use motion-advanced to design text entrance animations for a Next.js homepage hero: staggered character reveal for the headline, fade-up subtitle, delayed buttons, while considering performance and reduced motion. Output complete component code and parameter explanations.
A hero animation component with character stagger effects, timing orchestration, and accessibility optimizations.
Use motion-advanced to build an SVG icon path-drawing animation that starts when scrolled into view, then fills with color after completion, and wrap it as a reusable component. Show why you chose useAnimate or another suitable API.
A reusable SVG path-drawing animation component with trigger logic and API selection rationale.
Complex, interactive, and physics-based animation patterns.
Requires motion-foundations to be set up first.
Use these when motion-patterns is not enough.
useScrollReveal, magnetic button, cursor follower)useAnimateThis skill produces:
Reorder.Group listsuseScrollReveal, useHoverScale, useNavigationDirection, useInViewOnceuseAnimate with interrupt-safe async/awaituseSpring, springs.*) always feels more natural than duration-based for direct manipulation.useMotionValue + useTransform computes derived values without triggering re-renders.useAnimate sequences are imperative and interrupt-safe — calling animate() mid-flight cancels the previous animation automatically.useMotionValue, useSpring) are SSR-safe and do not cause hydration errors.drag prop works on both but feel and threshold differ.document.visibilityState === "hidden". Background tabs must not consume GPU/CPU.offset + velocity checks.useAnimate scope ref must be attached to a mounted DOM element. Calling animate() before mount throws silently.useMotionValue(0) inside a component body is correct; new MotionValue(0) in a render is not.motion-foundations. No inline numbers.window.addEventListener needs a matching removeEventListener in the useEffect return.| Scenario | API |
|---|---|
| Drag with physics on release | drag + dragTransition: springs.release |
| Ordered drag-to-reorder list | Reorder.Group + Reorder.Item |
| Dismiss on drag offset | drag="y" + onDragEnd offset check |
| Swipe left/right | drag="x" + onDragEnd offset check |
| Long press | useLongPress hook |
| Value smoothed over time | useSpring |
| Value derived from another | useTransform |
| Multi-step sequence | useAnimate with async/await |
| One-shot imperative animation | animate() from motion |
| Text entering word by word | Stagger on inline-block spans |
| SVG drawing on | pathLength 0 → 1 |
| SVG morph | d attribute tween (equal commands) |
| Circular progress | strokeDashoffset tween |
useSpring vs a spring transitionuseSpring | transition: springs.* | |
|---|---|---|
| Use for | Cursor follower, pointer-tracked values | Discrete state changes |
| Updates | Continuous, on every frame | Triggered by state change |
| Interrupt | Smooth — physics picks up from velocity | Restarts from current value |
…
Plan demand forecasts, safety stock, and replenishment for multi-location retail inventory.
Record polished web app UI demo videos for walkthroughs, tutorials, and showcases.
Create iOS liquid glass interfaces with dynamic visuals and interactive morphing.
Unify multi-channel notifications for routing, deduplication, escalation, and inbox consolidation.
Audit, plan, and implement SEO improvements for better search visibility.
Refine retrieved context iteratively to improve subagent understanding and output quality.
Build reusable UI animations and transitions for React and Next.js products.
Build polished React and Next.js animations with reusable production-ready patterns.
Build a motion foundation for React/Next.js with safe, accessible performance rules.
Turn scroll motion ideas into validated specs and deterministic GSAP/CSS output.
Turn Claude into a GSAP expert for production-ready animation creation.
Optimize React and Next.js performance during coding, review, and refactoring.