animation-choreography

Implements Flutter UI animations with timing curves, choreography sequences, and performance rules.

Updated Mar 9, 2026
One-click install
npx skills add https://github.com/yunior123/origna_gta_firebase --skill animation-choreography-yunior123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-choreography
Source: https://github.com/yunior123/origna_gta_firebase/tree/main/.claude/skills/animation-choreography
Command: npx skills add https://github.com/yunior123/origna_gta_firebase --skill animation-choreography-yunior123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter apps often ship with jarring default transitions, instant list appearances, and generic loading spinners that make interfaces feel unpolished. This Skill provides concrete animation patterns, timing tables, and choreography timelines so every motion communicates meaning to the user. ## Core Features & Use Cases - Widget Selection Guide: Maps animation purposes (feedback, transition, entrance, exit, emphasis, loading) to specific durations, easing curves, and ready-made widgets like FadeSlideIn, StaggeredList, and ShimmerLoading. - Choreography Recipes: Provides millisecond-by-millisecond timelines for common flows such as screen load sequences, add-to-cart micro-interactions, pull-to-refresh, and swipe-to-delete. - Performance & Anti-Pattern Rules: Enforces AnimatedBuilder usage, controller disposal, RepaintBoundary wrapping, and bans CircularProgressIndicator loading states and unanimated MaterialPageRoute navigation. - Use Case: When building a product detail screen, apply the screen load sequence recipe so shimmer placeholders transition into staggered card entrances with a bouncing FAB, instead of rendering everything instantly. ## Quick Start Add entrance and tap animations to my product list screen using staggered cards and a shimmer loading state.

Frequently Asked Questions about animation-choreography

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add staggered list animations in Flutter?▼

Use StaggeredList to animate list items with a 50ms delay per item, capped at 8 items. Each child fades and slides in sequentially, replacing instant list appearance with a choreographed entrance.

What duration and curve should I use for Flutter animations?▼

Match duration to purpose: 100-150ms with easeOutCubic for feedback, 300ms with easeInOutCubic for transitions, 200-400ms for entrances, and 600ms with elasticOut for emphasis. Avoid durations over 600ms since they feel sluggish.

How do I replace CircularProgressIndicator with a better loading state?▼

Use ShimmerLoading with explicit width, height, and border radius to show skeleton placeholders matching your layout. Transition to real content with AnimatedSwitcher over 300ms once data arrives.

Why does my Flutter animation cause frame drops or stutter?▼

Frame drops usually come from calling setState in animation callbacks, using Curves.bounceOut, or animating on every scroll pixel. Use AnimatedBuilder, wrap complex widgets in RepaintBoundary, and throttle scroll-driven animations with NotificationListener.

How do I animate page transitions in Flutter navigation?▼

Replace MaterialPageRoute with SlidePageRoute or the context.pushAnimated extension, specifying a SlideDirection. This applies a slide-plus-fade transition instead of the default platform push.