design-motion-principlespor Kyle Zantos

Design Motion Principles Skill.

Uma skill para Claude Code e Codex voltada para motion e vídeo: motion de interação com propósito, ou uma revisão de animação existente, segundo Kowalski, Krehel e Tompkins.

Motion e Vídeo

Baixar OpenDesign Ver guia de 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 títulos de seção lidos do arquivo original em 14/09/2026 · 6.794 caracteres no total

01 O que faz

O que o skill design-motion-principles faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Um skill de design de interação e movimento para agentes de código, que funciona em dois modos. Create constrói componentes interativos com movimento proposital; Audit revisa movimento existente e reporta descobertas por designer, incluindo padrões de AI-slop, em um relatório HTML com identidade visual e demos em loop.

Organiza seus conselhos em torno de três lentes — Emil Kowalski sobre contenção e velocidade, Jakub Krehel sobre acabamento de produção, Jhey Tompkins sobre experimentação lúdica — ponderadas por tipo de projeto, e não aplicadas universalmente. A cobertura é movimento de UI web e app: HTML/CSS, React, Framer Motion, transições iOS/Android e animações de design system. O limite de frequência, as durações dependentes de contexto e o tratamento obrigatório de prefers-reduced-motion valem em ambos os modos.

O que ele produz

Componentes interativos construídos com movimento proposital no modo Create.
Um relatório de revisão por designer no modo Audit.
Um relatório HTML com identidade visual contendo demos em loop das descobertas.
Um modelo de relatório de auditoria renderizado como HTML por padrão, com um modo terminal disponível como flag.

Veja o exemplo de prompt ↗

Como funciona

01
Detectar o Modo a Partir da Solicitação
Termos ligados a build selecionam Create; audit, review, evaluate, feedback ou 'esse movimento está bom' selecionam Audit.
02
Ler o Arquivo de Workflow Correspondente
A detecção de modo é a etapa 0 e condiciona todo o resto — o arquivo de workflow desse modo é seguido conforme escrito.
03
Ponderar os Três Designers pelo Contexto
Emil, Jakub e Jhey são tratados como perspectivas dependentes de contexto, nunca como regras universais.
04
Aplicar Orientação de Frequência e Duração
A frequência com que a interação é disparada vem primeiro; depois, as metas de duração extraídas da lente relevante.
05
Emitir o Artefato para o Modo
Create retorna componentes; Audit retorna um relatório por designer cujas descobertas recebem, cada uma, um cartão de demonstração construído a partir de um modelo de contêiner visual.

02 Encontre o ideal para você

Quando Usar a Skill design-motion-principles

Use a skill design-motion-principles no Claude Code ou Codex quando o trabalho for motion e vídeo desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Ferramentas de produtividade como Linear ou Raycast, em que a contenção e as regras de velocidade de Emil lideram e Jhey é usado apenas para onboarding.
Apps infantis e produtos educacionais, em que o polimento e o encantamento superam as regras de velocidade de produtividade, com Emil reservado para interações de alta frequência em jogos.
Portfólios criativos, liderados por Jakub para refinamento e Jhey para invenção, com Emil limitado a interações de alta frequência.
Aplicativos móveis, em que Jakub lidera, Emil apoia e Jhey fornece elementos de encantamento.

Conheça os Limites

Trabalho de movimento fora da UI web e de apps — motores de jogos, Lottie, Rive ou vídeo — em que o framework de frequência ainda se aplica, mas as técnicas específicas de cada designer podem não se traduzir.
Julgar durações por um número universal; sinalizar ou limitar durações sem verificar a ponderação do contexto é explicitamente descartado.
Interações iniciadas pelo teclado são excluídas totalmente da animação, seja qual for o tipo de projeto.

O Que Fornecer

O tipo de projetoEle determina a ponderação primária, secundária e seletiva, de modo que um dashboard SaaS aponta primeiro para Emil, e não para Jakub.
Com que frequência a interação é disparadaO filtro de frequência é aplicado antes de qualquer coisa ser adicionada ou aprovada, então a resposta muda o que sequer é elegível para animar.
O próprio movimento e sua stackTransições, estados de hover, micro-interações e animações de entrada/saída, em React, Framer Motion, CSS ou HTML.

03 Dentro da skill

Regras que a Skill design-motion-principles Dá ao Claude Code e ao Codex

6 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Deixar a Frequência de Disparo Decidir se Anima
Interações frequentes, disparadas centenas de vezes por dia, não recebem animação ou recebem uma transição instantânea; as raras podem ser expressivas.
Trate o prefers-reduced-motion, Sempre
O requisito é declarado como abrangendo qualquer coisa gerada no modo Create ou revisada no modo Audit, sem exceções.
Perguntar Quando o Pedido For Ambíguo
Um pedido vago como 'veja esta animação de modal' não é objeto de suposição — pede-se ao usuário que escolha Create ou Audit.
Reponderar os Designers por Tipo de Projeto
A tabela de mapeamento altera as lentes primária, secundária e seletiva; uma landing page tem Jakub como primário, Jhey como secundário e Emil apenas para formulários e navegação.
Use a Visibilidade como Teste de Qualidade
Uma animação que arranca um elogio a cada interação é tratada como excessivamente proeminente para produção.
Carregue as Referências que o Modo Exige
O modo Create sempre carrega o Motion Cookbook (receitas de enter/exit, easing, springs, clip-path, @property, FLIP, scroll-driven); o modo Audit carrega seus próprios arquivos permanentes.

04 Coloque em prática

Instalar design-motion-principles no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar design-motion-principles ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Formulário genérico da CLI skills para skills/design-motion-principles/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Motion e Vídeo

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

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: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Confirme se o peso da animação corresponde à frequência real com que a interação dispara, não a quão boa ela parece.
Meça o trabalho de polimento de produção pela faixa Jakub de 200-500ms, em vez de uma duração global única.
No modo Audit, siga a checklist sistemática de auditoria em vez de avaliar a animação visualmente.
Passe as descobertas pelo gate de qualidade da anti-checklist, que nomeia as categorias e antipadrões de animação típicos de "AI slop".
Para animações complexas, verifique a otimização de GPU, o uso de will-change e o layout thrash.

No OpenDesign, importe design-motion-principles a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Kyle Zantos
Repository: github.com/kylezantos/design-motion-principles Branch main
Arquivo da skill: skills/design-motion-principles/SKILL.md Checksum de conteúdo registrado na verificação; commit 4a9ca87
License: MIT De LICENSE.
Estrelas do repositório: 1.048 Snapshot do GitHub tirado em 2026-09-14 para todo o repositório kylezantos/design-motion-principles. Não é uma classificação ou contagem de uso para design-motion-principles.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

ETAPA 0: Detectar Modo (FAÇA ISSO PRIMEIRO)Mapeia o texto do pedido para Create ou Audit e pergunta quando houver ambiguidade.
Os Três DesignersQuem são Emil, Jakub e Jhey, a pergunta que cada um responde e o aviso de homenagem.
Mapeamento de Contexto para PerspectivaSete tipos de projeto mapeados para ponderação primária, secundária e seletiva de designers.
Princípios Fundamentais (Ambos os Modos)Filtro de frequência, diretrizes de duração, a regra de ouro e acessibilidade não opcional.
Índice de ReferênciasCada arquivo de referência pareado com as condições sob as quais deve ser carregado.
Índice de WorkflowsOs dois arquivos de workflow: construir componentes ou revisar animação e reportar.

A Descrição da Própria Skill

"Especialista em design de movimento e interação baseado nas técnicas de Emil Kowalski, Jakub Krehel e Jhey Tompkins. Dois modos — construir componentes interativos com movimento intencional, ou auditar animações existentes para detectar padrões de movimento artificiais gerados por IA (a auditoria emite um relatório HTML com marca contendo demos em loop). Use ao criar, adicionar, animar ou revisar movimento de UI: transições, estados de hover, micro-interações, animações de entrada/saída, ou qualquer trabalho de design de movimento em React, Framer Motion, CSS ou HTML. Fornece perspectivas por designer com ponderação sensível ao contexto."

Descrição do front-matter de SKILL.md. O arquivo completo tem cerca de 6.794 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill design-motion-principles

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Preciso de React, ou funciona com CSS e HTML puros?

Ambos são compatíveis. A skill cobre animação de UI web e de aplicativos em HTML/CSS, React, Framer Motion ou Motion, transições iOS/Android e animações de design system.

Como ela decide entre construir algo ou revisá-lo?

Ela analisa o pedido buscando sinais de Create ou Audit e, quando estes são ambíguos, pergunta. Se o AskUserQuestion não estiver disponível, ela recorre a uma pergunta em texto simples oferecendo os dois modos.

Um aplicativo infantil terá a mesma animação rápida e contida de um dashboard?

Não. A ponderação depende do contexto, então um aplicativo infantil prioriza Jakub e Jhey em busca de polimento e encanto, em vez das regras de velocidade focadas em produtividade de Emil — o encanto é tratado como o objetivo nesse contexto.

Os três designers são os criadores desta skill?

Não. As lentes destilam os cursos, artigos, palestras e projetos open-source publicados publicamente por eles, e o framework de ponderação é a interpretação própria da skill, nomeada em homenagem a eles.

Design Motion Principles

Execute design-motion-principles em uma Tarefa Real de Motion e Vídeo.

Baixe o OpenDesign, importe design-motion-principles a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills