playbooks

home / skills / harborgrid-justin / lexiflow-premium / concurrent-safe-animation

concurrent-safe-animation skill

/frontend/.github-skills/concurrent-safe-animation

This skill helps implement concurrency-safe animations that resist re-entrancy and interrupted updates, ensuring glitch-free rendering and stable layouts.

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill concurrent-safe-animation

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
859 B
---
name: concurrent-safe-animation
description: Implement animation systems resilient to concurrent rendering and interrupted updates.
---

# Concurrent-Safe Animation (React 18)

## Summary

Implement animation systems resilient to concurrent rendering and interrupted updates.

## Key Capabilities

- Prevent animation glitches caused by re-entrancy.
- Coordinate animation timelines with render commits.
- Maintain stable layout measurements under transitions.

## PhD-Level Challenges

- Prove animation continuity under interrupted renders.
- Model animation schedules as concurrent state machines.
- Evaluate trade-offs between animation fidelity and throughput.

## Acceptance Criteria

- Demonstrate glitch-free animations under rapid updates.
- Provide tests for interrupted animation scenarios.
- Document synchronization strategy with rendering.

Overview

This skill implements animation systems that remain correct and smooth when rendering is concurrent or updates are interrupted. It focuses on preventing re-entrancy glitches, keeping timeline coordination with render commits, and stabilizing layout measurements during transitions. The result is predictable, testable animations in environments like React 18 or any concurrent renderer.

How this skill works

The skill instruments animation timelines to observe render commit boundaries and to defer or resume animation steps when renders are interrupted. It uses stable measurement snapshots and idempotent update scheduling to avoid layout thrash and re-entrancy bugs. It also provides test harnesses to simulate rapid state changes and verify continuity across interrupted renders.

When to use it

  • High-interaction UIs where state updates can preempt running animations
  • Applications using concurrent rendering (React 18+, concurrent frameworks)
  • Complex transitions that depend on accurate layout measurements
  • Cases where animation glitches would harm usability or legal/premium UX expectations

Best practices

  • Take layout snapshots before starting a transition and reuse them until commit to avoid measurement drift
  • Schedule animation steps relative to render commit points, not just requestAnimationFrame
  • Make animation state updates idempotent so interrupted runs can safely restart
  • Provide deterministic tests that simulate interrupted renders and rapid state flips
  • Limit animation fidelity when throughput is critical; prefer visually stable transitions over perfect frame-by-frame fidelity

Example use cases

  • Animating list reordering while items are added or removed in rapid succession
  • Coordinating complex modal open/close sequences that may be interrupted by navigation
  • Smooth property transitions for dashboard widgets under frequent live updates
  • Ensuring banner or toast animations never leave the UI in a partially-applied state after hot reload or state rollback

FAQ

How does this handle interrupted renders?

Animations use commit-aware scheduling and idempotent state so a partially-applied step is rolled forward or back safely on the next commit.

Will this harm animation smoothness?

It prioritizes visual stability; in some cases you may reduce per-frame fidelity to guarantee no visual glitches under preemption.