fintech-banking — Claude Code skill: what it does, how to install
Guides animation design for banking apps, payment systems, and financial dashboards. Helps agents craft motion that emphasizes security and precision.
npx skills add dylantarre/animation-principles --skill fintech-banking -a claude-codeWhat fintech-banking does
This skill adapts Disney's twelve animation principles for banking and payment software. Playful stretching feels wrong around real money. Money requires restraint. The guide sets exact rules for card flips and balance counters.
Clear timing benchmarks anchor each visual interaction. Button feedback takes 150ms with ease-out, while balance counters update in 250ms. Security verifications stay between 400ms and 500ms. Deliberate pacing gives users confidence.
Screen loading follows strict staging. The account balance appears first, followed by payment cards and recent activity. Flashy transitions are avoided because playful motion damages trust when managing personal funds.
What it helps with
- Set consistent timing and easing curves for financial UIs
- Structure staggered loading sequences for banking dashboards
- Animate payment confirmations without playful bounce
- Tune subtle motion for balance counters and data charts
Example prompts for the agent
- Apply fintech-banking principles to animate a credit card flip when revealing CVV
- Stagger the loading sequence for an account dashboard showing balance, cards, and transactions
- Set timing and easing for a payment confirmation checkmark and updated balance
How to install fintech-banking
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill fintech-banking -a claude-code2Manually: put the files in place
~/.claude/skills/fintech-banking/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/fintech-banking/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill fintech-banking -a codex2Manually: put the files in place
.agents/skills/fintech-banking/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill fintech-banking -a cursor2Manually: put the files in place
.cursor/skills/fintech-banking/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles fintech-banking2Manually: put the files in place
.github/skills/fintech-banking/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill fintech-banking -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/08-by-industry/fintech-bankingManually: put the files in place
.devin/skills/fintech-banking/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill fintech-banking -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 fintech-banking
How do I install fintech-banking in Claude Code?
Run npx skills add dylantarre/animation-principles --skill fintech-banking -a claude-code in your terminal. The configuration is stored at ~/.claude/skills/fintech-banking/SKILL.md.
What is the fintech-banking skill?
It is an animation guidelines skill for AI coding assistants working on banking apps, wallets, and dashboards. It instructs models to use restrained, deliberate transitions that build user trust.
What timing standards does fintech-banking use?
It specifies 150ms for button taps, 250ms for balance updates, 300ms for transfer steps, and 350ms for modal dialogs. Security checks use 400ms to 500ms to reinforce verification.
Source text
SKILL.md · MIT
--- name: fintech-banking description: Use when designing animations for banking apps, payment systems, investment platforms, or financial dashboards --- # Fintech & Banking Animation Principles Apply Disney's 12 principles to create trustworthy, secure-feeling experiences that handle money with appropriate gravitas. ## The 12 Principles Applied ### 1. Squash & Stretch - **Restrained Use**: Money is serious, avoid playful squash - **Number Counters**: Subtle stretch as values update - **Card Flip**: Slight flex when revealing card details ### 2. Anticipation - **Transaction Submit**: Brief pause before processing - **Balance Updates**: Moment of preparation before reveal - **Security Checks**: Visual preparation for verification steps ### 3. Staging - **Balance First**: Account balance is hero element - **Transaction Flow**: Clear focus on current step - **Security Badges**: Prominent but not distracting ### 4. Straight Ahead & Pose to Pose - **Money Transfers**: Clear step-by-step (pose to pose) - **Live Prices**: Continuous smooth updates (straight ahead) - **Transaction History**: Sequential reveal on scroll ### 5. Follow Through & Overlapping Action - **Payment Success**: Checkmark lands, then amount confirms - **Dashboard Load**: Balance first, then cards, then transactions - **Charts**: Axis appears, then data animates in ### 6. Slow In & Slow Out - **All Financial Actions**: Smooth, deliberate easing - **Card Animations**: Premium feel with ease-in-out - **Modal Transitions**: Confident 300-400ms movements ### 7. Arc - **Money Flow**: Visualize transfers with curved paths - **Spending Charts**: Smooth arcs in pie/donut charts - **Card Selection**: Arc motion between cards ### 8. Secondary Action - **Transfer Success**: Subtle checkmark while balance updates - **Bill Paid**: Confetti-lite while confirmation appears - **Investment Gain**: Green glow during number update ### 9. Timing - **Standard Actions**: 250-350ms for confident feel - **Security Verification**: Deliberate 400-500ms - **Quick Feedback**: 150ms for input validation ### 10. Exaggeration - **Very Minimal**: Financial data requires accuracy - **Success Moments**: Slight emphasis on positive outcomes - **Fraud Alerts**: Appropriate urgency, not alarm ### 11. Solid Drawing - **Number Legibility**: Clear typography at all sizes - **Card Realism**: Proper perspective and shadows - **Chart Accuracy**: Data visualization must be precise ### 12. Appeal - **Premium Feel**: Smooth, Apple Pay-like refinement - **Trust Through Restraint**: Less is more - **Professional Personality**: Confident, not playful ## Industry Timing Standards | Action | Duration | Easing | |--------|----------|--------| | Button Feedback | 150ms | ease-out | | Card Flip | 400ms | ease-in-out | | Transfer Step | 300ms | ease-in-out | | Balance Update | 250ms | ease-out | | Modal Open | 350ms | ease-out | ## Key Principle Every animation should reinforce trust and security. Users are entrusting you with their money - motion should feel deliberate, accurate, and premium.
© dylantarre · MIT · dylantarre/animation-principles
