animate
starsforks
How to install animate?
heyhank-app/heyhank/animate
$npx -y skills add heyhank-app/heyhank --skill animateReview a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
SKILL.md
| 1 | Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. |
| 2 | |
| 3 | ## MANDATORY PREPARATION |
| 4 | |
| 5 | ### Context Gathering (Do This First) |
| 6 | |
| 7 | You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone (playful vs serious, energetic vs calm), and performance constraints. |
| 8 | |
| 9 | Attempt to gather these from the current thread or codebase. |
| 10 | |
| 11 | 1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right. |
| 12 | 2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context. |
| 13 | |
| 14 | Do NOT proceed until you have answers. Guessing leads to inappropriate or excessive animation. |
| 15 | |
| 16 | ### Use frontend-design skill |
| 17 | |
| 18 | Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts. |
| 19 | |
| 20 | --- |
| 21 | |
| 22 | ## Assess Animation Opportunities |
| 23 | |
| 24 | Analyze where motion would improve the experience: |
| 25 | |
| 26 | 1. **Identify static areas**: |
| 27 | - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) |
| 28 | - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) |
| 29 | - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious |
| 30 | - **Lack of delight**: Functional but joyless interactions |
| 31 | - **Missed guidance**: Opportunities to direct attention or explain behavior |
| 32 | |
| 33 | 2. **Understand the context**: |
| 34 | - What's the personality? (Playful vs serious, energetic vs calm) |
| 35 | - What's the performance budget? (Mobile-first? Complex page?) |
| 36 | - Who's the audience? (Motion-sensitive users? Power users who want speed?) |
| 37 | - What matters most? (One hero animation vs many micro-interactions?) |
| 38 | |
| 39 | If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify. |
| 40 | |
| 41 | **CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. |
| 42 | |
| 43 | ## Plan Animation Strategy |
| 44 | |
| 45 | Create a purposeful animation plan: |
| 46 | |
| 47 | - **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) |
| 48 | - **Feedback layer**: Which interactions need acknowledgment? |
| 49 | - **Transition layer**: Which state changes need smoothing? |
| 50 | - **Delight layer**: Where can we surprise and delight? |
| 51 | |
| 52 | **IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. |
| 53 | |
| 54 | ## Implement Animations |
| 55 | |
| 56 | Add motion systematically across these categories: |
| 57 | |
| 58 | ### Entrance Animations |
| 59 | - **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations |
| 60 | - **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) |
| 61 | - **Content reveals**: Scroll-triggered animations using intersection observer |
| 62 | - **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management |
| 63 | |
| 64 | ### Micro-interactions |
| 65 | - **Button feedback**: |
| 66 | - Hover: Subtle scale (1.02-1.05), color shift, shadow increase |
| 67 | - Click: Quick scale down then up (0.95 → 1), ripple effect |
| 68 | - Loading: Spinner or pulse state |
| 69 | - **Form interactions**: |
| 70 | - Input focus: Border color transition, slight scale or glow |
| 71 | - Validation: Shake on error, check mark on success, smooth color transitions |
| 72 | - **Toggle switches**: Smooth slide + color transition (200-300ms) |
| 73 | - **Checkboxes/radio**: Check mark animation, ripple effect |
| 74 | - **Like/favorite**: Scale + rotation, particle effects, color transition |
| 75 | |
| 76 | ### State Transitions |
| 77 | - **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) |
| 78 | - **Expand/collapse**: Height transition with overflow handling, icon rotation |
| 79 | - **Loading states**: Skeleton screen fades, spinner animations, progress bars |
| 80 | - **Success/error**: Color transitions, icon animations, gentle scale pulse |
| 81 | - **Enable/disable**: Opacity transitions, cursor changes |
| 82 | |
| 83 | ### Navigation & Flow |
| 84 | - **Page transitions**: Crossfade between routes, shared element transitions |
| 85 | - **Tab switching**: Slide indicator, content fade/slide |
| 86 | - **Carousel/slider**: Smooth transforms, snap points, momentum |
| 87 | - **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators |
| 88 | |
| 89 | ### Feedback & Guidance |
| 90 | - **Hover hints**: Tooltip fade-ins, cursor changes, element highlights |
| 91 | - **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning |
| 92 | - **Copy/paste**: Brief highlight flash on paste, "c |
People who liked this also viewed
6 picksType
- lark-openapi-explorer飞书/Lark 原生 OpenAPI 探索：从官方文档库中挖掘未经 CLI 封装的原生 OpenAPI 接口。当用户的需求无法被现有 lark-* skill 或 lark-cli 已注册命令满足，需要查找并调用原生飞书 OpenAPI 时使用。SkillsJul 2026
- lark-skill-maker创建 lark-cli 的自定义 Skill。当用户需要把飞书 API 操作封装成可复用的 Skill（包装原子 API 或编排多步流程）时使用。SkillsJul 2026
- azure-cost-optimizationOfficial agent plugin providing skills and MCP server configurations for Azure scenarios.SkillsJul 2026
- vercel-react-native-skillsVercel's official collection of agent skillsSkillsJul 2026
- mcp-builderGuide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate externaSkillsJul 2026
- gws-sharedgws CLI: Shared patterns for authentication, global flags, and output formatting.SkillsJul 2026
