1. Habit
  2. Skills
  3. Flutter Animations skill
madteacher · 15K installs

Flutter Animations skill
Runs by itself, pull request touches animations.

Clean Flutter motion, analyzer approved.

Install the Flutter Animations skill and make it a habit: follow https://gethabit.dev/skills/madteacher/flutter-animations.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

15K installs110 starsMIT licenceSource on GitHub ↗

Flutter Animations

by madteacher · 15K installs

The skill

The flutter animations skill helps Flutter developers add, fix, refactor and debug motion: implicit and explicit animations, Hero transitions, staggered timing, physics, curves and reduced-motion support.

Only when you ask.

The habit

Clean Flutter motion, analyzer approved.

↻ Runs by itselfpull request touches animations

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

One run, step by step.
Then it stops.

Stop ruleStops after one pull request and at most two fix retries.

  1. 01

    Read the request

    Decide if the change adds, fixes, refactors, debugs or explains an animation.

  2. 02

    Inspect the context

    Look at the widget tree, state, navigation, theme, tests and existing animation code first.

  3. 03

    Pick the model

    Choose implicit, explicit, Hero, staggered or physics motion, whichever is smallest for the behavior.

  4. 04

    Implement in style

    Keep controllers in the owning state object, dispose them and keep rebuild regions small.

  5. 05

    Respect reduced motion

    Check MediaQuery.disableAnimations and give a static path for motion that is not essential.

  6. 06

    Validate

    Run dart format, flutter analyze and focused tests on the touched code.

  7. 07

    Log the gaps

    Write down what was checked statically and what still needs a visual look.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Flutter Animations skill helps.

Use it when

  • ✓ You add or fix a Flutter animation
  • ✓ An animation leaks or janks
  • ✓ You need Hero or staggered motion

Skip it when

  • – The app is not built with Flutter
  • – The change has no motion at all

Questions

Flutter Animations skill, answered.

Does the loop add an AnimationController everywhere?

No. It uses an implicit widget when that gives the same behavior with less lifecycle risk.

What if the motion cannot be seen in a run?

The loop says what it validated statically and records the rest in its run log.

How do I install the Flutter Animations skill?

Copy the prompt at the top into your agent. It installs the skill from MADTeacher/mad-agents-skills and sets up the habit. Or run npx skills add MADTeacher/mad-agents-skills --skill flutter-animations.

Is the Flutter Animations skill free?

Yes. It is published under MIT. Habit is free too.

Flutter Animations. Now as a habit.

Install the Flutter Animations skill and make it a habit: follow https://gethabit.dev/skills/madteacher/flutter-animations.md

  • Free
  • No account
  • Undo in one line

All madteacher skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by madteacher, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.