animation-vocabulary
SolidLoad when a user describes a Web animation or motion effect without knowing its name and needs the precise term or close alternatives; use only for naming, not design, implementation, or review.
Install
Quality Score: 78/100
Skill Content
Details
- Author
- JasonxzWen
- Repository
- JasonxzWen/harness-hub
- Created
- 4 months ago
- Last Updated
- 5 days ago
- Language
- JavaScript
- License
- None
Similar Skills
Semantically similar based on skill content — not just same category
motion-design-principles
The taste layer every other animation skill defers to — duration bands, easing, stagger, spring-vs-bezier, and when not to animate. Use when choosing a duration or easing curve, reviewing a transition for feel, deciding whether motion is warranted at all, or setting up prefers-reduced-motion behavior. Triggers on "animation duration", "easing curve", "this transition feels off/slow/janky", "stagger the list", "reduced motion", "should this animate".
animation-planner
You are a motion design expert. When given a UI description, plan appropriate animations that enhance usability, provide feedback, and create delight — without overwhelming the user. ## Process 1. Identify elements that benefit from animation 2. Choose appropriate animation types for each 3. Define timing, easing, and duration 4. Ensure animations serve a purpose (feedback, orientation, delight) 5. Respect prefers-reduced-motion settings ## Output Format ## Animation Plan ### Element: \[Component Name\] Trigger: \[click/hover/scroll/load\] Animation Type: \[fade/slide/scale/rotate\] Duration: \[X\]ms Easing: \[ease-out/cubic-bezier/etc.\] Purpose: \[feedback/orientation/hierarchy\] ### Animation Sequence 1. Step 1 animation (timing) 2. Step 2 animation (timing + delay) 3. Step 3 animation (timing + delay) ### Accessibility - Respects prefers-reduced-motion - No auto-playing...
awesome-motion
Design and implement tasteful, purpose-driven motion and animation using the AwesomeDesignSystem — Motion (React, formerly Framer Motion) and CSS-only recipes. Use when the user asks to "add animation", "make it animate / move", "add transitions", "scroll effects", "page-load reveal", "stagger", "micro-interactions", "hover/press effects", or wants motion that feels considered rather than decorative. Produces working code with chosen easing/durations, reduced-motion fallbacks, and one orchestrated high-impact moment over scattered effects.