Synaptic
Skills
Marketplace
Skill Graph
Criar Skill
MCP Server
Plataforma
Enterprise
🇧🇷
PT
v0.1.0-beta
Voltar ao Marketplace
Content
Médio
Animation Designer Skill
por
daffy0208
·
daffy0208
· v1.0.0 · atualizado em 2026-04-10
83
Score
Expert in web animations, transitions, and motion design using Framer Motion and CSS
web-animation
framer-motion
ui-design
css-animation
motion-design
frontend-animation
0
Stars
0
Forks
0
Usos
Cursor
Claude Code
Claude Desktop
Codex
Copilot
Windsurf
Zed
Fork
Documento do Skill
📋 Workflow
✅ Best Practices
🎯 Triggers & Fases
SKILL.md
animation-designer/workflow
1
Identify Animation Goal:
— Determine the specific animation effect needed (e.g., fade-in, hover effect, page transition).
2
Choose Animation Technique:
— Select Framer Motion or CSS based on complexity and performance requirements.
3
Define Initial State:
— Set the starting point for the animated element.
4
Define Animation Target:
— Specify the final state of the animated element.
5
Configure Transition:
— Set the duration, easing, and other transition properties.
6
Implement Code:
— Write the code using Framer Motion or CSS to create the animation.
7
Test and Refine:
— Test the animation in different browsers and devices, and adjust parameters for optimal performance and aesthetics.
Telemetria de Agentes
Execuções
0
total
Taxa de Sucesso
0%
últimos 30d
Latência Média
0.0s
p50
Alucinação
0.0%
detecção
Tokens Entrada
0
avg 0/exec
Tokens Saída
0
avg 0/exec
Uso por Plataforma
Skills Relacionados
Depende de
Tailwind CSS
100%
Hebbian Synapse
Composite
1.000
w = 0.3·α + 0.5·β + 0.2·γ
80
Similar a
Implement Design
60%
Hebbian Synapse
Composite
0.600
w = 0.3·α + 0.5·β + 0.2·γ
79
Similar a
App Store Screenshots Generator
60%
Hebbian Synapse
Composite
0.600
w = 0.3·α + 0.5·β + 0.2·γ
78
Similar a
Marp Slide Creator
60%
Hebbian Synapse
Composite
0.600
w = 0.3·α + 0.5·β + 0.2·γ
77
Árvore do Skill
Animation Designer Skill
animation-designer
Fases Cognitivas
6
1.
SENSE
2.
CONTEXTUALIZE
3.
HYPOTHESIZE
4.
EVALUATE
5.
ACT
6.
REFLECT
Triggers
8
create a fade-in animation
animate a button hover effect
implement a page transition
add a scroll-triggered animation
design a modal animation
create a loading spinner
animate a success checkmark
add a parallax effect
Avaliar este Skill
Score Breakdown
⭐
Avaliação Humana
0%
🤖
Sucesso de Agentes
0%
🕐
Atualidade
100%
🔗
Saúde de Dependências
100%
🕸️
Centralidade no Grafo
0%
🛡️
Segurança
50%
CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança
Instalação
$
synaptic mcp download animation-designer
$
synaptic skills detail animation-designer
$
synaptic skills live animation-designer
Dependências
framer-motion
tailwindcss
Links
GitHub Repository
SynapticSkills