Communitygithub.com

kylezantos/principios-de-movimento-e-design

Especialista em movimento e design de interação baseado nas técnicas de Emil Kowalski, Jakub Krehel e Jhey Tompkins. Dois modos: construir componentes interativos com movimento proposital ou auditar animações existentes para detectar padrões de movimento "AI-slop" (a auditoria gera um relatório HTML personalizado com demonstrações em loop). Use ao criar, adicionar, animar ou revisar movimentos de UI: transições, estados de hover, microinterações, animações de entrada/saída ou qualquer trabalho de design de movimento em React, Framer Motion, CSS ou HTML. Oferece perspectivas individuais de cada designer com ponderação sensível ao contexto.

O que é principios-de-movimento-e-design?

Este skill capacita agentes de IA a atuarem como especialistas em design de movimento e interação, combinando as filosofias e técnicas dos designers renomados Emil Kowalski, Jakub Krehel e Jhey Tompkins. Ele opera em dois modos principais: um modo de **construção**, onde o agente pode criar componentes interativos do zero com animações propositais e refinadas, e um modo de **auditoria**, onde ele analisa animações existentes em busca de padrões ruins e genéricos (apelidados de 'AI-slop'), gerando um relatório HTML estilizado com loops de demonstração. É extremamente útil para desenvolvedores que trabalham com React, Framer Motion, CSS ou HTML e precisam garantir que o movimento em suas interfaces seja intencional, suave e alinhado a princípios de design de interação de alta qualidade. O skill fornece sugestões ponderadas de acordo com o contexto, adaptando a influência de cada designer com base no tipo de movimento ou componente sendo trabalhado.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kylezantos/design-motion-principles/tree/main/skills/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 principios-de-movimento-e-design faz?

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

Habilidades Relacionadas

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community