Skip to content
cccskills
FreePublished on GitHub

zt-motion-debug

Animation instrumentation: production-level frame timing, scroll state and ownership conflicts. Use when implementing, reviewing or testing animation instrumentation for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md2.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Animation instrumentation

When to activate

Use on tasks involving frame timing, scroll state and ownership conflicts. For unrelated backend tasks do not load this skill.

Implementation sequence

  1. Specify timeline: targets, start/end states, duration, easing, repeat, pause, reversal, cleanup.
  2. Import named Anime.js v4 APIs into client-only lifecycle; do not use v3 anime({...}) signatures.
  3. Use transforms and opacity for animation; sequence with timeline rather than disconnected timeouts.
  4. Bind scroll to normalized progress and apply exactly one owner per property.
  5. Implement reduced-motion and cleanup; test reverse scroll, refresh at mid-scroll and resize.

Task-specific requirements

  • Scope: frame timing, scroll state and ownership conflicts. Design the full execution path, not a screenshot placeholder.
  • Identify dependency version and actual supported API signature; avoid inventing APIs.
  • Use original code, or install licensed upstream through its maintained tool if the user wants upstream code.
  • Choose measurable states, error handling, accessibility and performance budgets.

Implementation starter

Implementation notes: Model frame timing, scroll state and ownership conflicts as explicit states, define input/output props and independent cleanup. Read master reference(s) below before writing code.

Evidence / acceptance

  • Prove deterministic playback in forward/reverse scroll; no timer leaks; reduced-motion shows full content.
  • Test common, edge, interrupted, accessibility and responsive states; provide concrete artifacts/evidence.

Deep references

  • ../perfect-ai-master/references/01-animejs-motion.md
  • ../perfect-ai-master/references/06-motion-recipes.md
  • ../perfect-ai-master/references/16-animejs-api-matrix.md

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Build, audit, and refactor premium Persian/English responsive websites and interactive 3D experiences with Anime.js v4, Three.js, motion choreography, color theory, RTL design systems, accessible UI/UX and VibeFarsi registry. Use for website design, animations, motion, landing pages, 3D/WebGL, responsive interfaces, visual quality, or Perfect_AI projects in Codex.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

Accessibility automation: production-level axe audits and manual keyboard checks. Use when implementing, reviewing or testing accessibility automation for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

قواعد پروژه assistant for Codex; apply when building Persian/RTL web products, localizing content or integrating the related Iranian workflow. Local independent adaptation inspired by publicly documented VibeFarsi topics.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

Easing mathematics: production-level cubic bezier, damped spring, velocity continuity. Use when implementing, reviewing or testing easing mathematics for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

Anime.js v4 core animations: production-level target selection, property keyframes, duration, ease, loop, play/pause. Use when implementing, reviewing or testing anime.js v4 core animations for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

Layout changes: production-level FLIP layout, additive composition, measurement. Use when implementing, reviewing or testing layout changes for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

See all skills by Realjustawall

Report a problem with this skill