Communitygithub.com

kylezantos/design-motion-principles

Uma habilidade do Claude Code para auditorias de motion design, treinada em Emil Kowalski, Jakub Krehel e Jhey Tompkins. Feedback contextual e por designer para suas animações.

O que é design-motion-principles?

Esta habilidade do Claude Code é especializada em auditorias de motion design, fornecendo feedback contextual sobre animações baseado nos estilos de designers renomados como Emil Kowalski, Jakub Krehel e Jhey Tompkins. Em vez de dar apenas sugestões genéricas, ela analisa animações sob a perspectiva de diferentes designers, ajudando desenvolvedores e designers a identificar problemas e melhorar a qualidade visual de suas interfaces. Útil para quem quer refinar micro-interações, transições e animações em projetos web ou mobile, a habilidade suporta a análise de trechos de código CSS, JavaScript ou até descrições textuais de animações, oferecendo críticas específicas e recomendações práticas alinhadas com as filosofias de cada designer. Isso torna o processo de revisão mais rico e adaptado a diferentes abordagens estéticas.

Funciona com✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add kylezantos/design-motion-principles
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

O que design-motion-principles faz?

Uma habilidade do Claude Code para auditorias de motion design, treinada em Emil Kowalski, Jakub Krehel e Jhey Tompkins. Feedback contextual e por designer para suas animações.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

kylezantos/design-motion-principles

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 animations, or any motion design work in React, Framer Motion, CSS, or HTML. Provides per-designer perspectives with context-aware weighting.

Habilidades Relacionadas

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community