Back to Skills

concurrent-safe-animation

majiayu000
Updated Yesterday
58
9
58
View on GitHub
Othergeneral

About

This skill helps developers implement React 18 animation systems that remain glitch-free during concurrent rendering and interrupted updates. It provides patterns to prevent visual artifacts by coordinating animation timelines with render commits and maintaining stable layout measurements. Use it when building robust UI components that must handle rapid state changes while preserving smooth visual transitions.

Quick Install

Claude Code

Recommended
Plugin CommandRecommended
/plugin add https://github.com/majiayu000/claude-skill-registry
Git CloneAlternative
git clone https://github.com/majiayu000/claude-skill-registry.git ~/.claude/skills/concurrent-safe-animation

Copy and paste this command in Claude Code to install this skill

Documentation

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.

GitHub Repository

majiayu000/claude-skill-registry
Path: skills/concurrent-safe-animation

Related Skills

algorithmic-art

Meta

This Claude Skill creates original algorithmic art using p5.js with seeded randomness and interactive parameters. It generates .md files for algorithmic philosophies, plus .html and .js files for interactive generative art implementations. Use it when developers need to create flow fields, particle systems, or other computational art while avoiding copyright issues.

View skill

subagent-driven-development

Development

This skill executes implementation plans by dispatching a fresh subagent for each independent task, with code review between tasks. It enables fast iteration while maintaining quality gates through this review process. Use it when working on mostly independent tasks within the same session to ensure continuous progress with built-in quality checks.

View skill

executing-plans

Design

Use the executing-plans skill when you have a complete implementation plan to execute in controlled batches with review checkpoints. It loads and critically reviews the plan, then executes tasks in small batches (default 3 tasks) while reporting progress between each batch for architect review. This ensures systematic implementation with built-in quality control checkpoints.

View skill

cost-optimization

Other

This Claude Skill helps developers optimize cloud costs through resource rightsizing, tagging strategies, and spending analysis. It provides a framework for reducing cloud expenses and implementing cost governance across AWS, Azure, and GCP. Use it when you need to analyze infrastructure costs, right-size resources, or meet budget constraints.

View skill