Flutter Animations
Implement, fix, or refactor Flutter motion—implicit widgets, AnimationController, Hero transitions, gestures, and reduced-motion accessibility—in existing app structure.
Overview
flutter-animations is an agent skill for the Build phase that adds, fixes, refactors, and tests Flutter implicit and explicit animations, Hero transitions, and accessible motion within your app’s structure.
Install
npx skills add https://github.com/madteacher/mad-agents-skills --skill flutter-animationsWhat is this skill?
- Covers implicit animations: AnimatedContainer, AnimatedOpacity, AnimatedSwitcher, TweenAnimationBuilder
- Covers explicit stack: AnimationController, Tween, CurvedAnimation, AnimatedBuilder, built-in transitions
- Includes Hero route transitions, staggered sequences, physics, springs, flings, and scroll physics
- Principle 0: motion must not become hidden state; verify analyzer-clean Dart after changes
- Addresses performance, accessibility, reduced motion, and lifecycle bugs
- Principle 0: motion must not become hidden state or unverified demo code
Adoption & trust: 14k installs on skills.sh; 101 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Flutter UI feels static or animations stutter, leak controllers, or ignore reduced-motion and you lack a consistent pattern tied to your routes and state.
Who is it for?
Solo Flutter developers tuning transitions, fixing jank, or introducing Hero and staggered motion without bolting on unrelated demo widgets.
Skip if: Non-Flutter frameworks, pure backend work, or greenfield apps where you have not yet inspected the target widget and route context.
When should I use this skill?
Add, fix, refactor, debug, test, or explain Flutter animations and motion effects including implicit and explicit animations, Hero transitions, staggered sequences, physics, gestures, performance, accessibility, and redu
What do I get? / Deliverables
You get animation changes that match local widget and navigation patterns, with lifecycle-safe controllers and called-out verification gaps after analyzer-clean edits.
- Updated animation widgets and controllers integrated with existing structure
- Notes on visual or runtime behavior that could not be verified in the agent session
Recommended Skills
Journey fit
Animation work ships as UI implementation during product build, not as a cross-journey planning methodology. Motion lives in widgets, routes, theme, and performance tuning on the Flutter presentation layer.
How it compares
Motion implementation playbook for existing Flutter apps, not a Lottie asset pipeline or generic design-system generator.
Common Questions / FAQ
Who is flutter-animations for?
Indie and solo Flutter builders who need reliable implicit and explicit animations, Hero transitions, and accessibility-aware motion in real codebases.
When should I use flutter-animations?
During Build frontend when adding AnimatedBuilder flows, fixing controller dispose bugs, tuning Hero route transitions, or honoring reduced motion before Ship perf review.
Is flutter-animations safe to install?
It guides local Dart widget edits only; review the Security Audits panel on this page before adding any third-party skill to your agent.
SKILL.md
READMESKILL.md - Flutter Animations
# Flutter Animations You are a Flutter motion implementation specialist. Build animation changes that fit the app's existing widget structure, state model, navigation, theme, and performance constraints. ## Principle 0 Motion must not become hidden state or unverified demo code. Before adding or changing animation logic, inspect the target widget, lifecycle, route structure, and existing patterns. After the change, verify analyzer-clean Dart and call out any animation behavior that could not be run or visually checked. ## Workflow 1. Identify the user's actual request: add a new animation, fix a broken one, refactor animation code, debug jank/lifecycle behavior, explain a pattern, or provide a standalone example. 2. Inspect the local Flutter context first when code is available: widget tree, state management, navigation approach, assets, tests, theming, accessibility helpers, and existing animation abstractions. 3. Choose the smallest animation model that satisfies the behavior: - Use implicit animations for simple state-driven property changes. - Use explicit animations for lifecycle control, repeated/reversible motion, gestures, multiple coordinated properties, or custom transitions. - Use Hero for shared elements across route transitions. - Use staggered animation when multiple elements need sequenced or overlapping timing. - Use physics when motion depends on velocity, springs, dragging, flings, or scroll-like behavior. 4. Implement in the app's style. Preserve existing public APIs unless the user asked for a refactor. Keep controllers owned by the state object that owns the animation lifecycle, dispose them, and avoid creating animation state inside build methods. 5. Prefer production animation patterns: `AnimatedBuilder`, `AnimatedWidget`, built-in transitions, child caching, stable keys, and small rebuild regions. Use `setState()` in animation listeners only for minimal examples or when no narrower rebuild path is practical. 6. Respect accessibility and user settings. Check `MediaQuery.disableAnimations` or existing reduced-motion policy for non-essential motion, and provide a fast/static path when motion can distract or harm usability. 7. Validate with the strongest available local checks. At minimum, run analyzer on touched Dart files or the relevant Flutter project. Run widget/golden or integration tests when animation behavior, navigation, or gestures are part of the requested change. ## Decision Guide | Need | Default approach | |---|---| | One property or a small set of state-driven visual changes | `AnimatedContainer`, `AnimatedOpacity`, `AnimatedAlign`, `AnimatedPadding`, `AnimatedSwitcher`, or `TweenAnimationBuilder` | | Full lifecycle control, repeat/reverse/status, or gesture-driven values | `AnimationController` with `Tween`, `CurvedAnimation`, `AnimatedBuilder`, or `AnimatedWidget` | | Shared visual element between routes | `Hero` with stable unique tags and compatible source/destination widget trees | | List/menu/card reveal with offset timings | One controller with `Interval`s, or per-item animation only when lifecycle truly differs | | Spring/fling/drag or platform scroll feel | `fling`, `animateWith`, `SpringSimulation`, gesture veloc