travel-hospitality — Claude Code skill: what it does, how to install
Guides AI coding agents on animation rules and timing standards for travel booking platforms and hospitality apps.
npx skills add dylantarre/animation-principles --skill travel-hospitality -a claude-codeWhat travel-hospitality does
This skill instructs your coding assistant to apply Disney's twelve animation principles to travel interfaces. It maps concepts like squash, anticipation, and arcs directly to UI patterns: map pin drops, booking step transitions, curved flight routes, and staggered search result cards.
It includes a reference table for durations and easings. Image transitions run at 400ms with ease-in-out, map movements take 500ms with ease-out, search results take 250ms, and final booking confirmations take 600ms with a custom bounce.
The repository provides design logic rather than ready-made CSS packages, so the agent writes the specific animation code to fit whatever frontend framework your project uses.
What it helps with
- Define timing and easing curves for travel search results and map pins
- Animate multi-step booking flows and celebratory confirmation states
- Create curved trajectories for flight route visualizations
- Tune transition speeds for resort galleries and destination modal windows
Example prompts for the agent
- Create a React booking confirmation component using travel-hospitality timing rules
- Generate CSS keyframes for map pin drop and bounce based on this skill
- Tune our hotel gallery carousel transitions according to the hospitality standard
How to install travel-hospitality
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill travel-hospitality -a claude-code2Manually: put the files in place
~/.claude/skills/travel-hospitality/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/travel-hospitality/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill travel-hospitality -a codex2Manually: put the files in place
.agents/skills/travel-hospitality/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill travel-hospitality -a cursor2Manually: put the files in place
.cursor/skills/travel-hospitality/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles travel-hospitality2Manually: put the files in place
.github/skills/travel-hospitality/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill travel-hospitality -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/08-by-industry/travel-hospitalityManually: put the files in place
.devin/skills/travel-hospitality/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill travel-hospitality -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 travel-hospitality
How do I install travel-hospitality in Claude Code?
Run npx skills add dylantarre/animation-principles --skill travel-hospitality -a claude-code. It installs the instruction file to ~/.claude/skills/travel-hospitality/SKILL.md.
What does the travel-hospitality skill do?
It provides animation rules grounded in Disney's twelve principles alongside concrete timing metrics for vacation planning and reservation UI.
What durations are specified for common interface actions?
Search results use 250ms with ease-out, booking steps take 300ms, photo transitions take 400ms with ease-in-out, map movements take 500ms, and confirmation screens use 600ms with a custom bounce.
Source text
SKILL.md · MIT
--- name: travel-hospitality description: Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences --- # Travel & Hospitality Animation Principles Apply Disney's 12 principles to create aspirational, exciting experiences that inspire wanderlust and build booking confidence. ## The 12 Principles Applied ### 1. Squash & Stretch - **Booking Buttons**: Satisfying press with light squash - **Map Pins**: Bounce when dropped on location - **Airplane Icons**: Subtle stretch during flight animation ### 2. Anticipation - **Search Button**: Build-up before results reveal - **Booking Confirmation**: Dramatic pause before success - **Destination Reveal**: Moment of suspense ### 3. Staging - **Destination Imagery**: Full-bleed hero photos - **Price Display**: Clear but secondary to experience - **Booking Flow**: Current step clearly focused ### 4. Straight Ahead & Pose to Pose - **Map Exploration**: Smooth pan and zoom (straight ahead) - **Booking Process**: Clear step-by-step (pose to pose) - **Itinerary Builder**: Sequential activity planning ### 5. Follow Through & Overlapping Action - **Search Results**: Cards cascade in with stagger - **Image Galleries**: Photos settle with follow-through - **Map Markers**: Icon lands, then info popup appears ### 6. Slow In & Slow Out - **Dreamy Transitions**: Smooth, relaxed pacing - **Image Carousels**: Elegant slide transitions - **Modal Opens**: Comfortable 350-400ms ### 7. Arc - **Flight Paths**: Curved lines on maps - **Photo Swipes**: Natural arc gestures - **Destination Transitions**: Arc between locations ### 8. Secondary Action - **Booking Success**: Plane takes off, confetti falls - **Price Updates**: Sparkle when deals appear - **Loading States**: Location-themed animations ### 9. Timing - **Aspirational Moments**: Slower 400-500ms for dreamy feel - **Booking Actions**: Confident 250-350ms - **Search Feedback**: Quick 150ms ### 10. Exaggeration - **Celebration Moments**: Booking confirmed deserves fanfare - **Dream Destinations**: Amplify the aspiration - **Deals**: Highlight savings dramatically ### 11. Solid Drawing - **Photography First**: Stunning destination imagery - **Map Accuracy**: Correct geographical representation - **Icon Consistency**: Unified travel iconography ### 12. Appeal - **Inspirational**: Motion should spark wanderlust - **Premium Service Feel**: Luxury brand associations - **Cultural Sensitivity**: Respectful representation ## Industry Timing Standards | Action | Duration | Easing | |--------|----------|--------| | Image Transition | 400ms | ease-in-out | | Map Animation | 500ms | ease-out | | Booking Step | 300ms | ease-in-out | | Search Results | 250ms | ease-out | | Confirmation | 600ms | custom-bounce | ## Key Principle Travel is about dreams and experiences. Animation should transport users mentally before they travel physically. Create moments of aspiration while maintaining booking confidence.
© dylantarre · MIT · dylantarre/animation-principles
