social-media — Claude Code skill: animation for social apps
A skill for animation in social apps, messengers and community features: it suggests timings and interaction behaviour.
npx skills add dylantarre/animation-principles --skill social-media -a claude-codeWhat social-media does
The skill maps Disney's 12 animation principles onto social interfaces: likes, reactions, message sending, stories, swipe actions, pull to refresh. Each principle is tied to a concrete element — a heart button squishes on tap and bounces back, the like count updates after the icon moves.
There is a timing table inside. Like and react run at 200ms with spring, pull to refresh at 300ms with ease-out, story transitions at 250ms with ease-in-out, modal open at 300ms with ease-out, send message at 150ms with ease-out. Treat those as a starting point rather than a fixed standard.
The skill installs into Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. In Claude the file lands at ~/.claude/skills/social-media/SKILL.md; in Cursor it goes to .cursor/skills/social-media/SKILL.md. If your design system already defines its own timings, the numbers here will disagree with them — worth comparing both sets before you let an agent touch the code.
What it helps with
- pick a timing for a like or reaction animation
- describe message-send animation in a chat UI
- smooth out story-to-story transitions
- set up pull-to-refresh behaviour
- build micro-interactions for onboarding
Example prompts for the agent
- suggest a like animation using the social-media principles
- what timing should I use for pull to refresh?
- animate the send button in a chat app
How to install social-media
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill social-media -a claude-code2Manually: put the files in place
~/.claude/skills/social-media/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/social-media/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill social-media -a codex2Manually: put the files in place
.agents/skills/social-media/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill social-media -a cursor2Manually: put the files in place
.cursor/skills/social-media/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles social-media2Manually: put the files in place
.github/skills/social-media/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill social-media -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/08-by-industry/social-mediaManually: put the files in place
.devin/skills/social-media/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill social-media -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 social-media
How do I install social-media in Claude?
Run npx skills add dylantarre/animation-principles --skill social-media -a claude-code. The skill file then appears at ~/.claude/skills/social-media/SKILL.md.
What does social-media do?
It helps design animations for social apps and messengers: likes, reactions, stories, swipes, message sending. Inside are the 12 animation principles and a timing table with easing values.
Which platforms does the skill support?
Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Each platform has its own install command and file path.
Source text
SKILL.md · MIT
--- name: social-media description: Use when designing animations for social platforms, messaging apps, content sharing, or community features --- # Social Media Animation Principles Apply Disney's 12 principles to create engaging, expressive experiences that encourage interaction and emotional connection. ## The 12 Principles Applied ### 1. Squash & Stretch - **Like Buttons**: Heart squishes on tap, then bounces back - **Reaction Emojis**: Playful stretch during selection - **Send Button**: Compress before message flies away ### 2. Anticipation - **Post Button**: Brief wind-up before publishing - **Stories**: Tap-and-hold with radial progress - **Swipe Actions**: Preview hints at what's coming ### 3. Staging - **Content First**: User content is always the star - **Reactions Bar**: Clear but not overshadowing - **Notifications**: Prominent but dismissible ### 4. Straight Ahead & Pose to Pose - **Feed Scroll**: Endless smooth flow (straight ahead) - **Posting Flow**: Step-by-step creation (pose to pose) - **Story Sequences**: Frame-by-frame progression ### 5. Follow Through & Overlapping Action - **Like Animation**: Icon bounces, count updates after - **Comment Thread**: Avatar appears, then text - **Share Menu**: Options cascade in sequence ### 6. Slow In & Slow Out - **Pull to Refresh**: Smooth deceleration - **Card Transitions**: Ease-in-out for polished feel - **Modal Sheets**: Comfortable 300ms timing ### 7. Arc - **Reactions Float**: Emojis arc upward from button - **Story Gestures**: Swipe follows natural curve - **Content Sharing**: Posts arc to share destination ### 8. Secondary Action - **Double-Tap Like**: Heart bursts while fading - **Typing Indicator**: Dots bounce while thinking - **Upload Progress**: Shimmer while processing ### 9. Timing - **Interactions**: Snappy 100-200ms for engagement - **Transitions**: Swift 250-300ms to maintain flow - **Celebrations**: 500-800ms for emotional moments ### 10. Exaggeration - **Reactions**: Amplify emotional expression - **Milestones**: Celebrate follower counts, likes - **Live Features**: Dynamic, attention-grabbing ### 11. Solid Drawing - **Avatar Consistency**: Uniform sizing and styling - **Icon Language**: Cohesive visual vocabulary - **Grid Layouts**: Proper alignment and spacing ### 12. Appeal - **Personality Forward**: Platform character shines through - **Dopamine Design**: Rewarding micro-interactions - **Shareability**: Animations worth recording ## Industry Timing Standards | Action | Duration | Easing | |--------|----------|--------| | Like/React | 200ms | spring | | Pull to Refresh | 300ms | ease-out | | Story Transition | 250ms | ease-in-out | | Modal Open | 300ms | ease-out | | Send Message | 150ms | ease-out | ## Key Principle Social media thrives on emotional expression. Animations should amplify connection, make interactions feel rewarding, and encourage continued engagement without feeling manipulative.
© dylantarre · MIT · dylantarre/animation-principles
