Communitygithub.com

kylezantos/design-motion-principles

Experto en diseño de movimiento e interacción basado en las técnicas de Emil Kowalski, Jakub Krehel y Jhey Tompkins. Dos modos: construir componentes interactivos con movimiento intencionado o auditar animaciones existentes para detectar patrones de movimiento de baja calidad (la auditoría genera un informe HTML personalizado con demos en bucle).

¿Qué es design-motion-principles?

Este skill te convierte en un experto en diseño de movimiento para interfaces de usuario, combinando las perspectivas de tres diseñadores reconocidos: Emil Kowalski, Jakub Krehel y Jhey Tompkins. Funciona en dos modos principales: el modo de construcción te permite crear componentes interactivos con movimiento intencionado y refinado, mientras que el modo de auditoría analiza animaciones existentes para detectar patrones de 'AI-slop' (movimientos genéricos, imprecisos o carentes de propósito) y genera un informe HTML con marca personalizada que incluye demos en bucle de cada problema identificado. Es ideal para desarrolladores que trabajan con React, Framer Motion, CSS o HTML, ya sea para crear nuevas transiciones, estados hover, micro-interacciones o animaciones de entrada/salida, así como para revisar y mejorar la calidad del movimiento en proyectos existentes. El skill pondera automáticamente las contribuciones de cada diseñador según el contexto, ofreciendo recomendaciones matizadas y fundamentadas.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kylezantos/design-motion-principles/tree/main/skills/design-motion-principles
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

¿Qué hace design-motion-principles?

Experto en diseño de movimiento e interacción basado en las técnicas de Emil Kowalski, Jakub Krehel y Jhey Tompkins. Dos modos — construir componentes interactivos con movimiento intencionado, o auditar animaciones existentes para detectar patrones de movimiento de baja calidad (la auditoría emite un informe HTML con marca personalizada y demos en bucle). Úsalo al crear, añadir, animar o revisar movimiento en UI: transiciones, estados hover, micro-interacciones, animaciones de entrada/salida, o cualquier trabajo de diseño de movimiento en React, Framer Motion, CSS o HTML. Proporciona perspectivas por diseñador con ponderación consciente del contexto.

Skills relacionados

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