healthcare-medical
Use when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces
- Installs
- 607
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/dylantarre/animation-principles --skill healthcare-medical- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads healthcare-medical automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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.
FAQ
What does the healthcare-medical skill do?
Use when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces
How do I install healthcare-medical?
Run npx skills add https://github.com/dylantarre/animation-principles --skill healthcare-medical in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/healthcare-medical/ (personal) or .claude/skills/healthcare-medical/ (project).
Which AI agents can use healthcare-medical?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is healthcare-medical safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains healthcare-medical?
It is published by dylantarre in dylantarre/animation-principles. It has 607 recorded installs.
More from dylantarre/animation-principles
video-motion-graphics
dylantarre/animation-principles
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
mobile-touch
dylantarre/animation-principles
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
framer-motion
dylantarre/animation-principles
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
motion-designer
dylantarre/animation-principles
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
micro-interactions
dylantarre/animation-principles
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
web-motion-design
dylantarre/animation-principles
Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
Popular education & science skills
teach
mattpocock/skills
Teach the user a new skill or concept, within this workspace.
scaffold-exercises
mattpocock/skills
Create exercise directory structures with sections, problems, solutions, and explainers that pass linting. Use when user wants to scaffold exercises, create exercise stubs, or set up a new course section.
paper-context-resolver
lllllllama/rigorpilot-skills
Rigor Paper Context helper for README-first deep learning repo reproduction. Use only when the README and repository files leave a narrow reproduction-critical gap and the task is to resolve a specific paper detail such as dataset split, preprocessing, evaluation protocol, checkpoint mapping, or runtime assumption from primary paper sources while recording conflicts. Do not use for general paper summary, repo scanning, environment setup, command execution, title-only paper lookup, or replacing README guidance by default.
caveman-learn
juliusbrussee/caveman
Act on a Caveman learn report - review the ranked token sinks, apply cost-lowering fixes with per-edit consent, and report what those fixes returned. Use when asked to lower an agent's token cost, what caveman has saved, to trim a heavy CLAUDE.md, or to offload re-pasted context into cavemem.
gsap-plugins
greensock/gsap-skills
Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration.
teach-impeccable
pbakaus/impeccable
DEPRECATED: Use /impeccable teach instead. This command has been folded into the impeccable skill.