healthcare-medical — Claude Code skill: animation rules for medical UI
Sets animation rules for medical apps, patient portals and telehealth: calm transitions instead of abrupt ones.
npx skills add dylantarre/animation-principles --skill healthcare-medical -a claude-codeWhat healthcare-medical does
The skill maps Disney's 12 animation principles onto healthcare interfaces. Each principle comes with a note on where to use it and where to hold back. Squash and stretch stays minimal on health data, but gentle expand and contract works for guided breathing, and a heart rate animation should follow the real rhythm.
A timing table covers the common cases: page transitions at 400-500ms with ease-in-out, modals at 350ms with ease-out, alerts at 200ms, data refresh at 300ms, success feedback at 400ms. Critical alerts get center stage and a clear hierarchy. Sensitive information stays blurred or hidden until the user focuses on it.
The skill is about interface behavior, not clinical logic. On a live vitals dashboard you still decide what counts as critical — the guidance is to animate less when in doubt, and it will not tell you which metric matters more. Installing needs Node.js, since the command runs through npx.
Everything is written as prose. There are no ready-made components or CSS in the skill, so your agent applies the decisions while building a screen you asked for.
What it helps with
- pick a transition duration for a vitals screen
- reveal test results without a jarring jump
- animate a pulse that matches the real heartbeat
- hide sensitive data until a card gets focus
- choose a loading animation that does not raise anxiety
Example prompts for the agent
- build the appointment booking screen, take the confirmation animation from the healthcare-medical skill
- make dashboard metric cards with the transitions from healthcare-medical
- animate the test result reveal so it feels calm — use healthcare-medical
How to install healthcare-medical
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill healthcare-medical -a claude-code2Manually: put the files in place
~/.claude/skills/healthcare-medical/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/healthcare-medical/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill healthcare-medical -a codex2Manually: put the files in place
.agents/skills/healthcare-medical/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill healthcare-medical -a cursor2Manually: put the files in place
.cursor/skills/healthcare-medical/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles healthcare-medical2Manually: put the files in place
.github/skills/healthcare-medical/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill healthcare-medical -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/08-by-industry/healthcare-medicalManually: put the files in place
.devin/skills/healthcare-medical/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill healthcare-medical -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 healthcare-medical
How do I install healthcare-medical in Claude?
Run npx skills add dylantarre/animation-principles --skill healthcare-medical -a claude-code. The skill lands at ~/.claude/skills/healthcare-medical/SKILL.md.
What does healthcare-medical do?
It applies the 12 Disney animation principles to medical interfaces: sets timings, softens transitions and flags where animation should be avoided.
Which platforms can use this skill?
Besides Claude there are install commands for Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode — only the -a flag changes.
Source text
SKILL.md · MIT
--- name: healthcare-medical description: Use when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces --- # Healthcare & Medical Animation Principles Apply Disney's 12 principles to create calming, trustworthy experiences that prioritize clarity and reduce anxiety. ## The 12 Principles Applied ### 1. Squash & Stretch - **Minimal Use**: Avoid playful squash on health data - **Breathing Exercises**: Gentle expand/contract for guided breathing - **Heart Rate**: Subtle pulse matching actual rhythm ### 2. Anticipation - **Appointment Booking**: Brief preparation before confirmation - **Test Results**: Thoughtful pause before revealing sensitive data - **Medication Reminders**: Gentle fade-in, never jarring ### 3. Staging - **Critical Alerts**: Center stage with clear hierarchy - **Vital Signs**: Most important metrics prominently displayed - **Privacy First**: Blur or hide sensitive info until focused ### 4. Straight Ahead & Pose to Pose - **Health Journeys**: Step-by-step progress (pose to pose) - **Real-time Monitoring**: Continuous data streams (straight ahead) - **Onboarding**: Clear sequential steps ### 5. Follow Through & Overlapping Action - **Dashboard Load**: Cards appear in logical health order - **Prescription Updates**: Medicine icon settles before details - **Chart Animations**: Data points connect sequentially ### 6. Slow In & Slow Out - **All Transitions**: Gentle easing, never abrupt - **Modal Reveals**: Soft fade-in for sensitive information - **Navigation**: Smooth 400-500ms transitions ### 7. Arc - **Progress Indicators**: Circular arcs for completion - **Body Diagrams**: Smooth paths between body regions - **Timeline Navigation**: Curved paths through health history ### 8. Secondary Action - **Confirmation Checkmarks**: Gentle pulse after booking - **Loading States**: Calming animations during data fetch - **Success States**: Subtle color transitions ### 9. Timing - **Slower Overall**: 400-600ms for calm, measured feel - **Critical Alerts**: Faster 200ms to ensure attention - **Data Entry**: Responsive 150ms feedback ### 10. Exaggeration - **Avoid in Most Cases**: Medical context requires restraint - **Emergency Only**: Reserved for urgent alerts - **Celebrations**: Subtle for health milestones ### 11. Solid Drawing - **Anatomical Accuracy**: Correct body representations - **Chart Clarity**: Legible graphs at all sizes - **Accessibility**: High contrast, readable animations ### 12. Appeal - **Calm Professionalism**: Trust through restraint - **Warm Colors**: Soft blues, greens for comfort - **Human Touch**: Gentle transitions feel caring ## Industry Timing Standards | Action | Duration | Easing | |--------|----------|--------| | Page Transition | 400-500ms | ease-in-out | | Modal Open | 350ms | ease-out | | Alert Appearance | 200ms | ease-out | | Data Refresh | 300ms | ease-in-out | | Success Feedback | 400ms | ease-out | ## Key Principle Animations must never cause anxiety or confusion. Prioritize clarity, accessibility, and a calming presence. When in doubt, animate less.
© dylantarre · MIT · dylantarre/animation-principles
