design-motion-principlesdi Kyle Zantos

Design Motion Principles Skill.

Una skill per Claude Code e Codex dedicata a motion e video: motion d'interazione intenzionale, o revisione di animazioni esistenti, secondo Kowalski, Krehel e Tompkins.

Motion e video

Scarica OpenDesign Guida all'uso

kylezantos/design-motion-principles · skills/design-motion-principles/SKILL.mdSKILL.md

--- name: design-motion-principles description: Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit … --- ## STEP 0: Detect Mode (DO THIS FIRST) ## The Three Designers ## Context-to-Perspective Mapping ## Core Principles (Both Modes) ## Reference Index ## Workflow Index

Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 6.794 caratteri in totale

01 Cosa fa

Cosa fa la skill design-motion-principles in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Una skill di interaction e motion design per agenti di codice, che opera in due modalità. Create realizza componenti interattivi con motion mirato; Audit analizza il motion esistente e riporta i risultati per ciascun designer, incluse le pattern AI-slop, in un report HTML brandizzato con demo in loop.

Organizza i propri consigli attorno a tre punti di vista — Emil Kowalski su misura e velocità, Jakub Krehel sulla rifinitura in produzione, Jhey Tompkins sulla sperimentazione ludica — pesati in base al tipo di progetto piuttosto che applicati in modo universale. La copertura riguarda il motion di UI web e app: HTML/CSS, React, Framer Motion, transizioni iOS/Android e animazioni dei design system. Il controllo sulla frequenza, le durate dipendenti dal contesto e la gestione obbligatoria di prefers-reduced-motion valgono in entrambe le modalità.

Che cosa produce

Componenti interattivi realizzati con motion mirato in modalità Create.
Un report di revisione per singolo designer in modalità Audit.
Un report HTML brandizzato contenente demo in loop dei risultati.
Un template di report di audit renderizzato come HTML di default, con una modalità terminale disponibile come flag.

Vedi l'esempio di prompt ↗

Come funziona

01
Rilevare la Modalità dalla Richiesta
Una formulazione orientata alla build seleziona Create; audit, review, evaluate, feedback o 'is this motion good' seleziona Audit.
02
Leggere il File di Workflow Corrispondente
Il rilevamento della modalità è il passaggio 0 e condiziona tutto il resto — il file di workflow per quella modalità viene seguito come scritto.
03
Pesare i Tre Designer in Base al Contesto
Emil, Jakub e Jhey sono trattati come prospettive dipendenti dal contesto, non come regole universali.
04
Applicare le Indicazioni su Frequenza e Durata
Prima viene definita la frequenza con cui l'interazione si attiva, poi gli obiettivi di durata tratti dalla lente pertinente.
05
Emettere l'Artefatto per la Modalità
Create restituisce componenti; Audit restituisce un report per designer le cui rilevazioni ottengono ciascuna una demo card costruita da un modello di contenitore visivo.

02 Trova la tua applicazione

Quando usare lo skill design-motion-principles

Usa lo skill design-motion-principles in Claude Code o Codex quando il lavoro riguarda motion e video di questo tipo. Ambito e limiti qui sotto sono presi dal file dello skill stesso.

Buona applicazione

Strumenti di produttività come Linear o Raycast, dove le regole di sobrietà e velocità di Emil guidano il processo e Jhey viene usato solo per l'onboarding.
App per bambini e prodotti educativi, dove la cura del dettaglio e il piacere superano le regole di velocità della produttività, con Emil riservato alle interazioni di gioco ad alta frequenza.
Portfolio creativi, guidati da Jakub per la rifinitura e da Jhey per l'invenzione, con Emil limitato alle interazioni ad alta frequenza.
App mobili, dove Jakub guida, Emil supporta e Jhey fornisce elementi di piacere.

Conosci i limiti

Lavoro di motion fuori dall'UI web e app — motori di gioco, Lottie, Rive o video — dove il framework di frequenza si applica comunque, ma le tecniche specifiche dei designer potrebbero non tradursi.
Valutare le durate in base a un numero universale; segnalare o limitare le durate senza verificare la ponderazione del contesto è esplicitamente escluso.
Le interazioni avviate da tastiera sono escluse dall'animazione a prescindere dal tipo di progetto.

Cosa fornire

Il tipo di progettoDetermina la ponderazione primaria, secondaria e selettiva, quindi una dashboard SaaS punta prima a Emil piuttosto che a Jakub.
Quanto spesso viene attivata l'interazioneIl filtro di frequenza viene applicato prima che venga aggiunto o approvato qualsiasi elemento, quindi la risposta cambia ciò che è persino idoneo ad animarsi.
Il motion stesso e il suo stackTransizioni, stati hover, micro-interazioni e animazioni di ingresso/uscita, in React, Framer Motion, CSS o HTML.

03 Dentro la skill

Regole che la Skill design-motion-principles Fornisce a Claude Code e Codex

6 istruzioni concrete, valori predefiniti e limiti che SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Lasciare che la Frequenza di Attivazione Decida se Animare
Le interazioni frequenti, che si verificano centinaia di volte al giorno, non ricevono animazione o ottengono una transizione istantanea; quelle rare possono essere espressive.
Gestire prefers-reduced-motion, Sempre
Il requisito è indicato come applicabile a qualsiasi cosa generata in modalità Create o revisionata in modalità Audit, senza eccezioni.
Chiedere Quando la Richiesta è Ambigua
Una richiesta vaga come 'guarda questa animazione del modale' non viene indovinata — all'utente viene chiesto di scegliere Create o Audit.
Riponderare i Designer per Tipo di Progetto
La tabella di mappatura modifica le lenti primaria, secondaria e selettiva; una landing page ha Jakub come primario, Jhey come secondario, Emil solo per form e navigazione.
Usa la visibilità come test di qualità
Un'animazione che merita un complimento a ogni singola interazione viene considerata troppo appariscente per la produzione.
Carica i riferimenti richiesti dalla modalità
La modalità Create carica sempre il Motion Cookbook (ricette per enter/exit, easing, spring, clip-path, @property, FLIP, scroll-driven); la modalità Audit carica i propri file sempre attivi.

04 Mettila al lavoro

Installa design-motion-principles in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi design-motion-principles a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/kylezantos/design-motion-principles --skill design-motion-principles

Forma generica del CLI skills per skills/design-motion-principles/SKILL.md; il repository potrebbe documentare un proprio percorso.

Dai alla Skill un Primo Compito di Motion e Video

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Audit the [command palette] open and close transition in our [React] app before it ships, and flag anything that reads as AI-slop motion. People use it hundreds of times a day, so tell me what should not animate at all and what should sit under 300ms. Then build the corrected version with Framer Motion and make sure it respects prefers-reduced-motion.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Verifica che il peso dell'animazione corrisponda alla reale frequenza con cui l'interazione si attiva, non a quanto risulta bella.
Misura il lavoro di rifinitura in produzione rispetto alla fascia Jakub di 200-500ms piuttosto che a una singola durata globale.
In modalità Audit, segui la checklist di audit sistematica invece di valutare l'animazione a occhio.
Verifica i risultati con il gate di qualità anti-checklist che elenca le categorie di animazione AI-slop e gli anti-pattern.
Per le animazioni complesse, controlla l'ottimizzazione GPU, l'uso di will-change e il layout thrash.

In OpenDesign importa design-motion-principles dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Kyle Zantos
Repository: github.com/kylezantos/design-motion-principles Branch main
File della skill: skills/design-motion-principles/SKILL.md Checksum del contenuto registrato alla verifica; commit 4a9ca87
License: MIT Da LICENSE.
Stelle del repository: 1.048 Snapshot GitHub acquisita il 2026-09-14 per l'intero repository kylezantos/design-motion-principles. Non è un punteggio o conteggio di utilizzo per design-motion-principles.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

STEP 0: Rileva la modalità (FALLO PRIMA DI TUTTO)Mappa la formulazione della richiesta su Create o Audit e chiede quando è ambigua.
I tre designerChi sono Emil, Jakub e Jhey, la domanda a cui ciascuno risponde e la dichiarazione di omaggio.
Mappatura contesto-prospettivaSette tipi di progetto mappati su una ponderazione primaria, secondaria e selettiva dei designer.
Principi fondamentali (entrambe le modalità)Il gate di frequenza, le linee guida sulla durata, la regola d'oro e l'accessibilità non opzionale.
Indice dei riferimentiOgni file di riferimento abbinato alle condizioni in cui va caricato.
Indice dei workflowI due file di workflow: costruire componenti, oppure revisionare l'animazione e produrre un report.

Descrizione della skill

"Esperto di motion e interaction design basato sulle tecniche di Emil Kowalski, Jakub Krehel e Jhey Tompkins. Due modalità — costruisci componenti interattivi con motion intenzionale, oppure revisiona animazioni esistenti per individuare pattern di motion prodotti da AI (l'audit emette un report HTML brandizzato con demo in loop). Usa quando crei, aggiungi, animi o revisioni il motion UI: transizioni, stati hover, micro-interazioni, animazioni enter/exit, o qualsiasi lavoro di motion design in React, Framer Motion, CSS o HTML. Fornisce prospettive per-designer con ponderazione consapevole del contesto."

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 6.794 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla skill design-motion-principles

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Serve React, oppure funziona anche con puro CSS e HTML?

Entrambi rientrano nell'ambito. La skill copre l'animazione di UI web e app su HTML/CSS, React, Framer Motion o Motion, transizioni iOS/Android e animazioni dei design system.

Come decide se costruire qualcosa o revisionarlo?

Legge la richiesta cercando segnali di Create o Audit e, quando sono ambigui, chiede. Se AskUserQuestion non è disponibile, ricorre a una domanda in testo semplice che propone le due modalità.

Un'app per bambini riceverà la stessa animazione rapida e contenuta di una dashboard?

No. La ponderazione dipende dal contesto, quindi un'app per bambini privilegia Jakub e Jhey per la rifinitura e il piacere visivo, piuttosto che le regole di velocità di Emil orientate alla produttività: in questo contesto il piacere visivo è considerato l'obiettivo.

I tre designer sono gli autori di questo skill?

No. Le lenti distillano i loro corsi, articoli, talk e progetti open source pubblicati pubblicamente, e il framework di pesatura è l'interpretazione propria dello skill, nominata in loro omaggio.

Design Motion Principles

Esegui design-motion-principles su un task reale di motion e video.

Scarica OpenDesign, importa design-motion-principles dal suo link SKILL.md, incolla il prompt sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/kylezantos/design-motion-principles --skill design-motion-principles