flutter-animations
Skill106 starsChanged 7 months agoMITView on GitHub
Add, fix, refactor, debug, test, or explain Flutter animations and motion effects. Use when working with implicit animations such as AnimatedContainer, AnimatedOpacity, AnimatedSwitcher, and TweenAnimationBuilder; explicit animations using AnimationController, Tween, CurvedAnimation, AnimatedWidget, AnimatedBuilder, and built-in transitions; Hero/shared-element route transitions; staggered or sequenced animations; physics-based motion, gestures, springs, flings, scroll physics, curves, performance, accessibility, reduced motion, and animation lifecycle bugs.
1 other project uses a version of this.
Adopted by
Most recently taken up by
- kumaran-is/claude-code-onboardingtheir own version, first seen May 25, 2026
Other versions1 project uses a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 1
- kumaran-is/claude-code-onboarding★ 35same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository10 other files it gives its agents.
- agents-md-generatorSkill
- dart-driftSkill
- flutter-adaptive-uiSkill
- flutter-architectureSkill
- flutter-driftSkill
- flutter-duit-bduiSkill
- flutter-internationalizationSkill
- flutter-navigationSkill
- flutter-networkingSkill
- flutter-testingSkill
The file
Show its rules and text
We split this skill into the rules it gives an agent
18 rules. About 0 are common, 11 are distinctive, and 7 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈11
Distinctive · estimate
This author's own choices. Worth a look.
7
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 39
Use implicit animations for simple state-driven property changes.
- Distinctive: line 40
Use explicit animations for lifecycle control, repeated/reversible motion, gestures, multiple coordinated properties, or custom transitions.
- Distinctive: line 42
Use Hero for shared elements across route transitions.
- Distinctive: line 43
Use staggered animation when multiple elements need sequenced or overlapping timing.
- Distinctive: line 45
Use physics when motion depends on velocity, springs, dragging, flings, or scroll-like behavior.
- Very specific: line 51
Prefer production animation patterns: AnimatedBuilder, AnimatedWidget, built-in transitions, child caching, stable keys, and small rebuild …
- Very specific: line 53
Use setState() in animation listeners only for minimal examples or when no narrower rebuild path is practical.
- Distinctive: line 76
Read only the resources needed for the current task:
- Distinctive: line 93
Do not invent missing routes, asset paths, theme tokens, gesture behavior, or state-management APIs.
- Very specific: line 95
Do not add an AnimationController when an implicit widget gives the same behavior with less lifecycle risk.
- Distinctive: line 97
Do not leave controllers, listeners, timers, or status callbacks undisposed.
- Very specific: line 98
Do not use global debug settings such as timeDilation in production code.
- Distinctive: line 100
Do not copy reference snippets blindly.
- Distinctive: line 102
Do not make accessibility optional for user-facing motion.
- Very specific: line 107
Run dart format or the project's formatter on edited Dart files when edits are made.
- Very specific: line 109
Run flutter analyze for the project, package, or specific touched Dart file.
- Distinctive: line 110
Run focused tests when animation changes affect navigation, gestures, stateful lifecycle, or user-visible regressions.
- Very specific: line 115
When updating templates, verify each template as lib/main.dart in a minimal Flutter project with flutter analyze lib/main.dart.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
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
- 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.
- 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.
- 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.
- 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.
- Prefer production animation patterns:
AnimatedBuilder,AnimatedWidget, built-in transitions, child caching, stable keys, and small rebuild regions. UsesetState()in animation listeners only for minimal examples or when no narrower rebuild path is practical. - Respect accessibility and user settings. Check
MediaQuery.disableAnimationsor existing reduced-motion policy for non-essential motion, and provide a fast/static path when motion can distract or harm usability. - 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 Intervals, or per-item animation only when lifecycle truly differs |
| Spring/fling/drag or platform scroll feel | fling, animateWith, SpringSimulation, gesture velocity, or platform-specific ScrollPhysics |
| Motion feels wrong but code works | Tune duration, curve, interval, easing, or reduced-motion behavior before adding complexity |
Resource Routing
Read only the resources needed for the current task:
| Task | Read/use | Purpose |
| Simple state-driven animation or AnimatedSwitcher/TweenAnimationBuilder choice | references/implicit.md; optionally assets/templates/implicit_animation.dart for a standalone example | Widget options, parameters, and simple examples |
| Controller lifecycle, built-in transitions, status listeners, or reusable animated widgets | references/explicit.md; optionally assets/templates/explicit_animation.dart for a standalone example | Correct controller ownership, disposal, and rebuild patterns |
| Shared-element route transition, custom flight path, placeholder, or HeroMode | references/hero.md; optionally assets/templates/hero_transition.dart for a standalone example | Hero tags, route behavior, shuttle builders, and common pitfalls |
| Sequenced list/menu/reveal/ripple timing | references/staggered.md; optionally assets/templates/staggered_animation.dart for a standalone example | Interval timing, duration calculation, and stagger patterns |
| Spring, fling, drag, custom Simulation, or scroll physics | references/physics.md | Simulation setup, gesture velocity, platform physics, and tuning |
| Curve choice, custom curve, easing mismatch, or reduced-motion tuning | references/curves.md | Curve selection, custom curves, and accessibility notes |
Templates are complete demo files, not drop-in production modules. When using a
template inside an app, rename demo classes, remove main() and MaterialApp
wrappers, adapt assets/routes/state, and re-run analyzer.
Constraints
- Do not invent missing routes, asset paths, theme tokens, gesture behavior, or state-management APIs. Inspect them or ask the user if they are absent.
- Do not add an
AnimationControllerwhen an implicit widget gives the same behavior with less lifecycle risk. - Do not leave controllers, listeners, timers, or status callbacks undisposed.
- Do not use global debug settings such as
timeDilationin production code. Mention them only as a local debugging aid. - Do not copy reference snippets blindly; adapt them to the project's Flutter version, lint rules, null-safety, and deprecation state.
- Do not make accessibility optional for user-facing motion. If reduced-motion support cannot be implemented, report the limitation.
Validation
- Run
dart formator the project's formatter on edited Dart files when edits are made. - Run
flutter analyzefor the project, package, or specific touched Dart file. - Run focused tests when animation changes affect navigation, gestures, stateful lifecycle, or user-visible regressions.
- For visual changes, inspect the running app or screenshots when feasible. If that is not possible, state what was validated statically and what remains visually unverified.
- When updating templates, verify each template as
lib/main.dartin a minimal Flutter project withflutter analyze lib/main.dart.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

