ReddRadar
Agent skill
animation-micro-interaction-pack
Provides reusable interaction patterns and motion presets that make UI feel polished. Includes hover effects, transitions, entrance animations, gesture feedback, and reduced-motion support. Use when adding "animations", "transitions", "micro-interactions", or "motion design".
Install this agent skill to your Project
npx add-skill https://github.com/patricio0312rev/skills/tree/main/frontend/animation-micro-interaction-pack
SKILL.md
Animation & Micro-interaction Pack
Create polished, performant animations and micro-interactions.
Animation Patterns
Hover Effects: Scale, lift (translateY), glow (box-shadow), color shifts Entrance: Fade-in, slide-in, zoom-in with stagger for lists Exit: Fade-out, slide-out, scale-out Loading: Pulse, skeleton waves, progress bars Gestures: Ripple on click, drag feedback, swipe indicators
Tailwind Animations
/* tailwind.config.js */
animation: {
'fade-in': 'fadeIn 0.5s ease-out',
'slide-up': 'slideUp 0.3s ease-out',
'scale-in': 'scaleIn 0.2s ease-out',
}
Framer Motion Examples
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
/>
Best Practices
Use 200-300ms for micro-interactions, respect prefers-reduced-motion, animate transform/opacity for performance, add easing functions, stagger list items, provide hover/active states.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
patricio0312rev/skills
rate-limiting-abuse-protection
Implements rate limiting and abuse prevention with per-route policies, IP/user-based limits, sliding windows, safe error responses, and observability. Use when adding "rate limiting", "API protection", "abuse prevention", or "DDoS protection".
patricio0312rev/skills
rbac-permissions-builder
Implements role-based access control with permission matrix, route guards, policy functions, and UI permission hints. Provides middleware/guards, helper utilities, test suggestions, and permission checking patterns. Use when building "RBAC", "permissions", "access control", or "authorization".
patricio0312rev/skills
websocket-realtime-builder
Implements real-time features using WebSockets with Socket.io, rooms, authentication, and reconnection handling. Use when users request "real-time updates", "WebSocket", "Socket.io", "live chat", or "push notifications".
patricio0312rev/skills
webhook-receiver-hardener
Secures webhook receivers with signature verification, retry handling, deduplication, idempotency keys, and error responses. Provides verification code, dedupe storage strategy, runbook for incidents. Use when implementing "webhooks", "webhook security", "event receivers", or "third-party integrations".
patricio0312rev/skills
auth-module-builder
Implements secure authentication patterns including login/registration, session management, JWT tokens, password hashing, cookie settings, and CSRF protection. Provides auth routes, middleware, security configurations, and threat model documentation. Use when building "authentication", "login system", "JWT auth", or "session management".
patricio0312rev/skills
rest-to-graphql-migrator
Migrates REST APIs to GraphQL incrementally with schema stitching, REST datasources, and gradual endpoint migration. Use when users request "migrate to GraphQL", "REST to GraphQL", "GraphQL wrapper", or "API modernization".
Didn't find tool you were looking for?