---
name: mcp-ui-motion-designer
description: >
  Design, implement, name, audit, review, and migrate interaction and motion systems for web interfaces. Use for transitions, keyframes, Web Animations API, View Transitions, loading and feedback motion, drag and gestures, motion tokens, choreography, reduced-motion behavior, animation vocabulary, opportunity discovery, improvement roadmaps, high-craft animation review, and localized animation performance issues. Preserve causality, interruption, final states, pointer cancellation, and accessible alternatives. Use mcp-web-performance-auditor for broad loading and Core Web Vitals work, and mcp-frontend-performance-debugger for systemic long tasks, render churn, listener leaks, or trace-driven profiling.
---

# MCP UI Motion Designer

Usare il movimento solo quando migliora orientamento, feedback, continuita o comprensione, mantenendo accessibilita e controllo.

## Modalita operative

1. **Vocabulary**: identificare il nome corretto di un effetto descritto informalmente.
2. **Opportunity audit**: trovare punti che beneficiano del movimento e scartare quelli inutili.
3. **Design and implementation**: progettare e implementare motion, gesture e feedback.
4. **Improvement plan**: eseguire un audit read-only e produrre piani eseguibili da altri agenti.
5. **Review**: valutare un diff o un sistema di animazioni contro standard di qualita elevati.
6. **Localized performance remediation**: correggere jank confinato a una specifica animazione.

## Workflow operativo

1. Identificare modalita, scope, trigger, final state, frequenza, input modality e scopo.
2. Eseguire `scripts/mcp-ui-motion-designer/inspect_interaction_motion.py <project>` quando esiste un codebase.
3. Classificare motion come orienting, confirmatory, essential, decorative o attention-seeking.
4. Applicare il gate frequenza, scopo, velocita e funzione prima di aggiungere movimento.
5. Definire durata, easing, distanza, interruptibility, cleanup e fallback reduced-motion.
6. Scegliere CSS, WAAPI, View Transitions o requestAnimationFrame in base al controllo necessario.
7. Verificare pointer cancellation, keyboard, focus, pause/stop, flashing e lifecycle.
8. Misurare jank localizzato; demandare profiling sistemico a `mcp-frontend-performance-debugger`.
9. Testare final state, input ripetuto, navigazione, background tab e reload.

## Regole permanenti

- Approvare l'animazione solo quando il beneficio supera costo, frequenza e rischio.
- Non usare `transition: all`.
- Non affidare logica critica al solo evento `animationend`.
- Rendere le animazioni interrompibili e garantire sempre lo stato finale.
- Animare preferibilmente transform e opacity; misurare prima di usare blur, filter o layout properties.
- Implementare un comportamento reduced-motion che preservi comprensione e funzionalita.
- Separare fatti osservati, inferenze e preferenze.
- Non dichiarare verificato cio che non e stato testato.

## Output predefinito

1. modalita e motion inventory
2. classification e rationale
3. findings con file e linee quando disponibili
4. tokens/choreography o vocabulary result
5. implementation o improvement plan
6. reduced-motion behavior
7. performance evidence
8. test matrix

## References

- [accessibility-and-reduced-motion](references/accessibility-and-reduced-motion.md)
- [animation-principles-and-polish](references/animation-principles-and-polish.md)
- [css-waapi-and-view-transitions](references/css-waapi-and-view-transitions.md)
- [feedback-loading-and-state](references/feedback-loading-and-state.md)
- [foundations-and-motion-model](references/foundations-and-motion-model.md)
- [frameworks-and-libraries](references/frameworks-and-libraries.md)
- [legacy-migration-and-governance](references/legacy-migration-and-governance.md)
- [localized-motion-performance](references/localized-motion-performance.md)
- [motion-tokens-and-choreography](references/motion-tokens-and-choreography.md)
- [official-sources](references/official-sources.md)
- [performance-and-rendering](references/performance-and-rendering.md)
- [pointer-gesture-and-drag](references/pointer-gesture-and-drag.md)
- [testing-and-regression](references/testing-and-regression.md)
- [twelve-principles-for-web](references/twelve-principles-for-web.md)
- [animation-vocabulary](references/animation-vocabulary.md)
- [animation-opportunity-audit](references/animation-opportunity-audit.md)
- [motion-improvement-workflow](references/motion-improvement-workflow.md)
- [motion-audit-template](references/motion-audit-template.md)
- [motion-plan-template](references/motion-plan-template.md)
- [motion-review-workflow](references/motion-review-workflow.md)
- [motion-review-standards](references/motion-review-standards.md)
- [motion-performance-remediation](references/motion-performance-remediation.md)