Healthcare Medical
- 416 installs
- 68 repo stars
- Updated December 30, 2025
- dylantarre/animation-principles
healthcare-medical is a Claude Code skill that applies cautious, clarity-first motion using Disney's 12 animation principles for developers who build patient portals, clinical dashboards, and medical device UIs.
About
healthcare-medical is a Claude Code skill from dylantarre/animation-principles that adapts Disney's 12 animation principles for medical apps, patient portals, telehealth, and health tracking interfaces. The skill prioritizes calming, trustworthy motion: minimal playful squash on health metrics, gentle expand-contract for guided breathing exercises, subtle heart-rate pulse matching real rhythm, and thoughtful anticipation pauses before revealing sensitive test results. Developers reach for it when designing animations for medical apps where errors, distraction, or flashy effects can harm trust or patient safety. Appointment booking gets brief preparation before confirmation; test results use deliberate pacing to reduce anxiety. Use healthcare-medical when building clinical dashboards, patient-facing portals, or device UIs that need accessible, low-distraction motion grounded in established animation principles.
- Prioritizes calm motion for high-stress clinical contexts
- Uses animation to clarify status without obscuring data
- Aligns with accessibility expectations in regulated settings
- Avoids celebratory or distracting effects near critical alerts
- Supports clear loading and confirmation for medical workflows
Healthcare Medical by the numbers
- 416 all-time installs (skills.sh)
- Ranked #667 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/dylantarre/animation-principles --skill healthcare-medicalAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 416 |
|---|---|
| repo stars | ★ 68 |
| Last updated | December 30, 2025 |
| Repository | dylantarre/animation-principles ↗ |
How do you design safe motion for medical UIs?
Apply cautious, clarity-first motion in patient portals, clinical dashboards, and medical device UIs where errors, distraction, or flashy effects can harm trust or safety.
Who is it for?
Frontend developers building patient portals, telehealth, or clinical dashboards who need trust-preserving, low-distraction motion aligned to medical UX safety.
Skip if: Consumer entertainment apps with playful motion, or projects outside healthcare where bold promotional animation is the primary design goal.
When should I use this skill?
A developer designs motion for medical apps, patient portals, telehealth flows, or health tracking UIs and needs clarity-first, anxiety-reducing animation guidance.
What you get
Healthcare UI motion guidelines, calming interaction patterns, and principle-mapped specs for patient portals and clinical dashboards.
By the numbers
- Applies Disney's 12 animation principles with medical-specific motion constraints
Files
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.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
How does healthcare-medical differ from general animation skills?
healthcare-medical restricts playful motion on health data, uses subtle vitals pulse and breathing animations, and adds pauses before sensitive results. The skill prioritizes trust, clarity, and anxiety reduction in patient-facing medical interfaces.
What interfaces does healthcare-medical target?
healthcare-medical targets medical apps, patient portals, telehealth flows, and health tracking interfaces. It applies Disney's 12 principles with medical-specific constraints to avoid distraction and preserve clinical trust.