Skip to main content Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/guilhermemarketing/esc-skills --skill interaction-designO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Gera 10 conceitos criativos de performance para Meta Ads (Facebook/Instagram) com Hook → Hold → Offer, 40+ Creative Types, mapeamento de emoção e funil e diversidade anti-clone. Toda headline visível é clara e autoexplicativa em até 1,7 segundo: nomeia o assunto e a dor, benefício ou resultado, sem depender de legenda ou interpretação. Cada conceito inclui estratégia direct response, copy com limites, visual funcional, variações A/B, prompt de imagem e adaptações por placement, com Feed 4:5 (1080x1350px) como formato padrão. Orientado por design system; quando não fornecido, extrai automaticamente das referências do cliente. Use para anúncios de conversão, geração de leads ou vendas no Instagram/Facebook, criativos para feed, stories e reels, campanhas Meta Ads e peças direct response.
Gera landing pages premium completas para geração de leads (SQL) em 2 fases: (1) Wireframe-Tabela — seleciona o melhor framework de copywriting (AIDA, P.A.S.T.O.R., Q.U.E.S.T., BAB, PAS, FAB, 4P's, SCQA, SLAP, ACCA, etc.) e estrutura a LP em tabela com seções, headlines, copy e notas para designer; (2) Landing Page Premium — transforma a tabela em HTML premium com design minimalista, liquid glass glassmorphism, skeuomorphism, micro-animations, ritmo visual por contraste seccional (visual pacing, cognitive chunking, sectional contrast), scroll-triggered effects e design system baseado no briefing do cliente. Use para criar landing page premium, LP de alta conversão, página de vendas glassmorphism, LP para Google Ads ou Meta Ads, página de captura sofisticada, ou pedidos como "cria uma LP premium", "landing page moderna/profissional", "ritmo visual" e "contraste seccional".
Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
name interaction-design description Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences. version 1.0.0 updated 2026-03-17
Interaction Design
Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions that enhance usability and delight users.
When to Use This Skill
Adding microinteractions to enhance user feedback
Implementing smooth page and component transitions
Designing loading states and skeleton screens
Creating gesture-based interactions
Building notification and toast systems
Implementing drag-and-drop interfaces
Adding scroll-triggered animations
Designing hover and focus states
Core Principles
1. Purposeful Motion
Motion should communicate, not decorate:
Feedback : Confirm user actions occurredOrientation : Show where elements come from/go toFocus : Direct attention to important changesContinuity : Maintain context during transitions
2. Timing Guidelines
100-150ms Micro-feedback (hovers, clicks) 200-300ms Small transitions (toggles, dropdowns) 300-500ms Medium transitions (modals, page changes) 500ms+ Complex choreographed animations
3. Easing Functions
--ease-out : cubic-bezier (0.16 , 1 , 0.3 , 1 );
--ease-in : cubic-bezier (0.55 , 0 , 1 , 0.45 );
--ease-in-out : cubic-bezier (0.65 , 0 , 0.35 , 1 );
--spring : cubic-bezier (0.34 , 1.56 , 0.64 , 1 );
Quick Start: Button Microinteraction import { motion } from "framer-motion" ;
export function InteractiveButton ({ children, onClick } ) {
return (
<motion.button
onClick ={onClick}
whileHover ={{ scale: 1.02 }}
whileTap ={{ scale: 0.98 }}
transition ={{ type: "spring ", stiffness: 400 , damping: 17 }}
className ="px-4 py-2 bg-blue-600 text-white rounded-lg"
>
{children}
</motion.button >
Interaction Patterns
1. Loading States Skeleton Screens : Preserve layout while loading
function CardSkeleton (return (
<div className ="animate-pulse" >
<div className ="h-48 bg-gray-200 rounded-lg" />
<div className ="mt-4 h-4 bg-gray-200 rounded w-3/4" />
<div className ="mt-2 h-4 bg-gray-200 rounded w-1/2" />
</div > Progress Indicators : Show determinate progress
function ProgressBar ({ progress }: { progress: number } ) {
return (
<div className ="h-2 bg-gray-200 rounded-full overflow-hidden" >
<motion.div
className ="h-full bg-blue-600"
initial ={{ width: 0 }}
animate ={{ width: `${progress }%` }}
transition ={{ ease: "easeOut " }}
/>
</div >
2. State Transitions Toggle with smooth transition :
function Toggle ({ checked, onChange } ) {
return (
<button
role ="switch"
aria-checked ={checked}
onClick ={() => onChange(!checked)}
className={`
relative w-12 h-6 rounded-full transition-colors duration-200
${checked ? "bg-blue-600" : "bg-gray-300"}
`}
>
<motion.span
className ="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow"
animate ={{ x: checked ? 24 : 0 }}
transition ={{ type: "spring ", stiffness: 500 , damping: 30 }}
/>
</button >
3. Page Transitions Framer Motion layout animations :
import { AnimatePresence , motion } from "framer-motion" ;
function PageTransition ({ children, key } ) {
return (
<AnimatePresence mode ="wait" >
<motion.div
key ={key}
initial ={{ opacity: 0 , y: 20 }}
animate ={{ opacity: 1 , y: 0 }}
exit ={{ opacity: 0 , y: -20 }}
transition ={{ duration: 0.3 }}
>
{children}
</motion.div >
</AnimatePresence >
4. Feedback Patterns function RippleButton ({ children, onClick } ) {
const [ripples, setRipples] = useState ([]);
const handleClick = (e ) => {
const rect = e.currentTarget .getBoundingClientRect ();
const ripple = {
x : e.clientX - rect.left ,
y : e.clientY - rect.top ,
id : Date .now (),
};
setRipples ((prev ) => [...prev, ripple]);
setTimeout (() => {
setRipples ((prev ) => prev.filter ((r ) => r.id !== ripple.id ));
}, 600 );
onClick?.(e);
};
return (
<button onClick ={handleClick} className ="relative overflow-hidden" >
{children}
{ripples.map((ripple) => (
<span
key ={ripple.id}
className ="absolute bg-white/30 rounded-full animate-ripple"
style ={{ left: ripple.x , top: ripple.y }}
/>
))}
</button >
5. Gesture Interactions function SwipeCard ({ children, onDismiss } ) {
return (
<motion.div
drag ="x"
dragConstraints ={{ left: 0 , right: 0 }}
onDragEnd ={(_, info ) => {
if (Math.abs(info.offset.x) > 100) {
onDismiss();
}
}}
className="cursor-grab active:cursor-grabbing"
>
{children}
</motion.div >
CSS Animation Patterns
Keyframe Animations @keyframes fadeIn {
from {
opacity : 0 ;
transform : translateY (10px );
}
to {
opacity : 1 ;
transform : translateY (0 );
}
}
@keyframes pulse {
0% ,
100% {
opacity : 1 ;
}
50% {
opacity : 0.5 ;
}
}
@keyframes spin {
to {
transform : rotate (360deg );
}
}
.animate-fadeIn {
animation : fadeIn 0.3s ease-out;
}
.animate-pulse {
animation : pulse 2s ease-in-out infinite;
}
.animate-spin {
animation : spin 1s linear infinite;
}
CSS Transitions .card {
transition :
transform 0.2s ease-out,
box-shadow 0.2s ease-out;
}
.card :hover {
transform : translateY (-4px );
box-shadow : 0 12px 24px rgba (0 , 0 , 0 , 0.1 );
}
Accessibility Considerations
@media (prefers-reduced-motion : reduce) {
*,
*::before ,
*::after {
animation-duration : 0.01ms !important ;
animation-iteration-count : 1 !important ;
transition-duration : 0.01ms !important ;
}
}
function AnimatedComponent (const prefersReducedMotion = window .matchMedia (
"(prefers-reduced-motion: reduce)" ,
).matches ;
return (
<motion.div
animate ={{ opacity: 1 }}
transition ={{ duration: prefersReducedMotion ? 0 : 0.3 }}
/>
Best Practices
Performance First : Use transform and opacity for smooth 60fpsReduce Motion Support : Always respect prefers-reduced-motionConsistent Timing : Use a timing scale across the appNatural Physics : Prefer spring animations over linearInterruptible : Allow users to cancel long animationsProgressive Enhancement : Work without JS animationsTest on Devices : Performance varies significantly
Common Issues
Janky Animations : Avoid animating width, height, top, leftOver-animation : Too much motion causes fatigueBlocking Interactions : Never prevent user input during animationsMemory Leaks : Clean up animation listeners on unmountFlash of Content : Use will-change sparingly for optimization
Resources 