Communitygithub.com

su kirman1901/motion

Movimiento intencionado de UI por familia/patrón: valores predeterminados de shell (fade, drawer, press) más vocabulario de marketing (reveal, scroll, text, carousel, hero...). Crea animaciones CSS/Motion/GSAP manualmente a partir de patrones con nombre. Úsalo para solicitudes de animación, landings, marquesinas, paralaje, revelado de texto y valores ligeros en shells /ui — no solo para ajustes de token.

¿Qué es motion?

Esta habilidad guía la creación de movimiento intencionado en la interfaz de usuario, distinguiendo entre micro-interacciones de producto y efectos expresivos de marketing. En lugar de depender de bibliotecas externas o instalaciones de registro, promueve la creación manual de animaciones CSS, Motion o GSAP a partir de patrones con nombre definidos en un catálogo de 12 familias y 144 patrones. Es útil para desarrolladores que trabajan en shells de producto (paneles, ajustes) o páginas de marketing (landings, marquesinas, paralaje), ya que ofrece valores predeterminados ligeros como fade-up, drawer-slide y press-scale, y establece reglas estrictas de presupuesto de movimiento (máximo 2-3 animaciones por viewport) con accesibilidad integrada mediante `prefers-reduced-motion`. La habilidad se basa en un flujo de trabajo en 7 pasos que incluye la elección de carril, familia, patrones, implementación del contrato, presupuesto, accesibilidad y reporte de convenciones, asegurando que el movimiento comunique jerarquía y retroalimentación sin decorar ni saturar la interfaz. Ideal para agentes de IA que generan motion design en proyectos front-end, la habilidad referencia archivos como `references/motion-families.md` y `references/motion.md` para vocabulario detallado y recetas.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/sukirman1901/frontend-expert/tree/HEAD/skills/motion
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 motion?

Resumen

Motion aclara jerarquía y retroalimentación — no decora. Elige familias/patrones por nombre, luego crea manualmente (CSS / Motion / GSAP). No recurras a instalaciones de registro por defecto.

Catálogo completo: references/motion-families.md (12 familias · 144 patrones).

Cuándo usarlo

  • Micro-interacciones (hover, focus, press)
  • Transiciones de entrada/salida o diseño (cambios de sección, drawers, modales)
  • Patrones con nombre como scroll, texto, carrusel, héroe u otros
  • Por defecto (ligero): shell de aplicación / panel / secciones múltiples en /ui — fade de sección + deslizamiento de drawer + desplazamiento suave (a menos que el usuario lo prohíba)

Cuándo omitirlo

  • Ajustes estáticos de token/color únicamente
  • El usuario pidió cero animación / “tanpa animasi”
  • Inspeccionar / explicar movimiento existente → motion-inspection

Los usuarios con movimiento reducido aún necesitan cambios de estado y fallbacks instantáneos/de opacidad utilizables; omite efectos espaciales/decorativos, no el contrato de interacción.

Carriles

CarrilPropósitoValores predeterminados
Producto / shellChrome de aplicación, ajustes, panelesfade-up / page-crossfade, drawer-slide, press-scale, lift-hover
Marketing / expresivoLanding, campañasElige 1–2 familias + 1–2 patrones del catálogo — presupuesto 2–3 movimientos / viewport

Propósito de familias (rápido)

FamiliaParaNo para
Micro InteracciónToggle, toast, like, progressHero / scroll story
Hover e InteracciónLift, press, magnetic, tiltPage enter
Basado en ScrollSticky, horizontal, scroll-zoomButton-only micro
Revelado y BarrridoEnter fades, split, mask, drawerBucles infinitos como único movimiento
Texto en MovimientoWord reveal, typewriter, marquee typeFormularios / ajustes densos
Carrusel y Flujo ContinuoMarquee, filmstrip, snapPáginas centradas en un solo CTA
Movimiento de CuadrículaBento, flip grid, reflowChrome de un botón
Foco y AtenciónCenter stage, dim siblingsRuido en toda la página
Apilar y DispersarDeck, fan, swipe deckTablas de administración
Movimiento de Sección HéroeParalaje / dispositivo flotante / auroraShell de aplicación (máximo 1 firma)
Morf y TransformarShared element, FAB morphCada navegación
3D y PerspectivaOrbit, coverflowUI de producto predeterminada

Flujo de trabajo

  1. Carril — shell de producto vs marketing
  2. Familia — emparejar propósito (máximo 2 familias)
  3. Patrones — nombra 1–2 de motion-families.md; lee definición + sugerencia de creación manual
  4. Contrato + implementación — registra identidad de trigger/estado, propiedades, interrupción, alternativas de entrada y punto final de movimiento reducido (motion.md). Prefiere transform/opacity; usa tamaño/diseño medido limitado cuando se requiera revelación o morph.
  5. Presupuesto — ≤2–3 movimientos intencionales por viewport
  6. Accesibilidad — prefers-reduced-motion: reduce (fallbacks de opacidad/instantáneos); nunca significado solo por movimiento
  7. Reporte — Convenciones: Motion: light shell | families: Hover+Reveal | patterns: lift-hover, fade-up; distingue verificaciones de fuente/estado de la reproducción objetivo real y mediciones de rendimiento.

Valores predeterminados de shell (producto)

  • Entrada de sección: fade-up ~250–300ms
  • Drawer móvil: drawer-slide + fundido de fondo
  • Controles: press-scale (0.96)
  • scroll-behavior: smooth (deshabilitado bajo movimiento reducido)

El desplazamiento suave no es permiso para desplazar automáticamente datos entrantes. Las recetas de estado de producto en references/motion.md rigen actualizaciones de gráficos, revelación y seguimiento de flujo; un lector que se desplace hacia arriba mantiene el control.

Reglas estrictas

  • Creación manual a partir de nombres de patrón — la instalación de registro no es el valor predeterminado
  • No apilar Hero + 3D + Texto + Foco + Carrusel en un mismo viewport
  • Marketing: máximo un patrón de firma Hero

Lista de verificación

  • Carril elegido (producto vs marketing)
  • Propósito de familia coincide con la solicitud (≤2 familias)
  • Patrones con nombre listados (≤2–3 movimientos en viewport)
  • Creado manualmente a partir de definición (no registro como respuesta)
  • prefers-reduced-motion manejado
  • Reversión rápida, movimiento anidado, cancelación por foco/teclado y gesto verificado donde sea relevante; los datos/estado finales se mantienen veraces
  • Sin thrashing de diseño / spam decorativo
  • Línea de Convenciones Motion completada

Profundidad

  • Vocabulario: references/motion-families.md
  • Recetas: references/motion.md
  • Superposición de micro craft: polish
  • Shell de demostración: sandbox local test/ (opcional; no se envía)

Individual skills in this repo

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

sukirman1901/polish

Polish micro-details that make UI feel better — optical alignment, tabular nums, text-wrap, interruptible transitions, press feedback, hit areas, no transition:all. Use when building/reviewing UI polish, "feels off", "rapihin detail", hover/press feedback, or after anti-slop-design. Structural layout, radius language, and WCAG conformance belong to other owners.

Skills relacionados

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