fitness-wellness — Claude Code skill: animation for fitness apps
A skill that sets timing and easing for animations in fitness apps, workout trackers and meditation screens. Useful when motion has to motivate, not just move.
npx skills add dylantarre/animation-principles --skill fitness-wellness -a claude-codeWhat fitness-wellness does
The skill walks through Disney's 12 animation principles and maps each one onto a fitness or wellness interface. Squash & stretch goes on the workout button, anticipation drives the countdown before a session starts, follow through lets the calorie counter settle after the number lands. A timing table covers the usual actions: button press, ring completion, workout transition, meditation fade, achievement pop — each with a duration and an easing curve.
The core rule is that motion energy should match activity intensity. A workout wants punchy, fast movement; meditation wants slow animation synced to breathing. So the agent won't reuse one easing for both modes. Everything lives in a single SKILL.md markdown file — no scripts, no external dependencies.
Six platforms are supported, but each needs its own install command; the Claude one won't work in Cursor, and GitHub Copilot goes through gh skill install instead. If your project already has an animation design system, these fixed durations will argue with it, because the skill hands you values rather than asking for yours.
What it helps with
- pick a duration and easing for the workout start button
- make the activity ring finish with a satisfying close
- use different motion for workout mode and meditation mode
- animate a calorie counter and a streak without jarring jumps
- reveal a personal record in a way people remember
Example prompts for the agent
- Add the activity ring completion animation using the fitness-wellness skill
- What timing should the exercise transition use? Check fitness-wellness
- Apply the fitness-wellness principles to the meditation screen fade
How to install fitness-wellness
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill fitness-wellness -a claude-code2Manually: put the files in place
~/.claude/skills/fitness-wellness/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/fitness-wellness/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill fitness-wellness -a codex2Manually: put the files in place
.agents/skills/fitness-wellness/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill fitness-wellness -a cursor2Manually: put the files in place
.cursor/skills/fitness-wellness/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles fitness-wellness2Manually: put the files in place
.github/skills/fitness-wellness/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill fitness-wellness -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/08-by-industry/fitness-wellnessManually: put the files in place
.devin/skills/fitness-wellness/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill fitness-wellness -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about fitness-wellness
How do I install fitness-wellness in Claude?
Run npx skills add dylantarre/animation-principles --skill fitness-wellness -a claude-code. The skill file lands at ~/.claude/skills/fitness-wellness/SKILL.md.
What does fitness-wellness do?
It maps the 12 animation principles onto fitness and wellness UI elements and provides a timing table with easing for common actions.
How is it different from a general animation principles library?
It is scoped to fitness: it separates energetic workout motion from calm meditation motion, and covers achievement and record animations.
Source text
SKILL.md · MIT
--- name: fitness-wellness description: Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences --- # Fitness & Wellness Animation Principles Apply Disney's 12 principles to create motivating, energizing experiences that celebrate achievement and support healthy habits. ## The 12 Principles Applied ### 1. Squash & Stretch - **Workout Buttons**: Energetic squash on tap - **Progress Rings**: Pulse with achievement - **Activity Icons**: Bounce with completion ### 2. Anticipation - **Workout Start**: Countdown builds energy - **Timer Begin**: Ready-set-go sequence - **Goal Completion**: Suspenseful approach ### 3. Staging - **Current Exercise**: Full focus on active movement - **Stats Display**: Supporting role during workout - **Rest Periods**: Recovery metrics highlighted ### 4. Straight Ahead & Pose to Pose - **Live Workouts**: Continuous timer flow (straight ahead) - **Exercise Sequence**: Move-by-move progression (pose to pose) - **Meditation Guides**: Defined breathing phases ### 5. Follow Through & Overlapping Action - **Workout Complete**: Badge lands, then stats appear - **Calorie Counter**: Numbers settle with follow-through - **Activity Rings**: Animate sequentially with overlap ### 6. Slow In & Slow Out - **High Energy Moments**: Quick, punchy timing - **Recovery/Meditation**: Slow, calming easing - **Transitions**: Match current activity intensity ### 7. Arc - **Progress Circles**: Smooth arc completion - **Running Routes**: Curved path visualization - **Gesture Controls**: Natural arced movements ### 8. Secondary Action - **Goal Hit**: Fireworks while achievement saves - **Personal Record**: Crown appears with celebration - **Streak Maintained**: Fire burns while counter updates ### 9. Timing - **Intense Moments**: Fast 100-150ms for energy - **Mindfulness**: Slow 500-700ms for calm - **Standard UI**: Moderate 200-300ms ### 10. Exaggeration - **Celebrate Big**: Fitness thrives on motivation - **Personal Records**: Dramatic achievement reveals - **Streak Milestones**: Memorable celebrations ### 11. Solid Drawing - **Body Mechanics**: Accurate movement demonstrations - **Data Visualization**: Clear, readable metrics - **Exercise Illustrations**: Proper form representation ### 12. Appeal - **Motivational Energy**: Uplifting, encouraging motion - **Dual Modes**: Intensity for workouts, calm for wellness - **Achievement Focus**: Every win feels significant ## Industry Timing Standards | Action | Duration | Easing | |--------|----------|--------| | Button Press | 150ms | ease-out | | Ring Complete | 600ms | spring | | Workout Transition | 250ms | ease-in-out | | Meditation Fade | 500ms | ease-in-out | | Achievement Pop | 800ms | custom-bounce | ## Key Principle Match animation energy to activity intensity. Workouts demand energetic, motivating motion while meditation requires calm, breathing-synced animations. Always celebrate progress.
© dylantarre · MIT · dylantarre/animation-principles
