social-media
Use when designing animations for social platforms, messaging apps, content sharing, or community features
- Installs
- 508
- 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 social-media- 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 social-media 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.
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.
FAQ
What does the social-media skill do?
Use when designing animations for social platforms, messaging apps, content sharing, or community features
How do I install social-media?
Run npx skills add https://github.com/dylantarre/animation-principles --skill social-media 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/social-media/ (personal) or .claude/skills/social-media/ (project).
Which AI agents can use social-media?
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 social-media 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 social-media?
It is published by dylantarre in dylantarre/animation-principles. It has 508 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 marketing & seo skills
reddit-automation
flowkit-labs/skills
Find Reddit threads where people are genuinely asking for what you offer, then draft short, genuinely helpful replies — disclosing your affiliation honestly and naming your product only when it truly answers the question. Two moves: discovery — scan the right subreddits for real needs (recommendation asks, expressed pain, competitor mentions) and rank the few threads where you can actually help; drafting — write from real experience, respect each community's self-promo rules, and keep a human in the loop to review and post. This markets on Reddit the honest way: contribute value, disclose who you are, never astroturf. Distilled from the playbook behind doany.ai's Reddit agent. Triggers on "find reddit opportunities", "reddit marketing", "reddit automation", "reply on reddit for my product", "reddit community engagement", "reddit lead gen", or any ask to turn Reddit threads into genuine, disclosed marketing replies.
twitter-automation
101-skills/superpowers
Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet
twitter-automation
magentosh/superpowers
Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet
twitter-automation
qu-skills/superpowers
Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet
product-launch-video
heygen-com/hyperframes
Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes.
twitter-automation
skills-shell/superpowers
Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet