frankxai/awesome-motion-design-agent-skills

web-motion-auditor

Use when reviewing web animations, UI transitions, scroll effects, hover states, loading states, GIF/video captures, reduced-motion support, animation performance, or motion polish in HTML, React, Next.js, or Vercel apps.

Ver código fuente

Cómo usar

  1. Copia el comando y revisa el paquete antes de instalarlo en tu entorno de agente.
  2. Consulta las herramientas, credenciales y entornos necesarios en el documento original.
  3. Describe las entradas y el resultado deseado; contrasta la salida con las fuentes.
npx skills add https://github.com/frankxai/awesome-motion-design-agent-skills --skill web-motion-auditor

Antes de empezar

  • La instalación no incluye suscripción al modelo, cuota API ni permisos sobre tus archivos.
  • Las estrellas e instalaciones reflejan actividad, no una prueba independiente de calidad o seguridad.
Documento original del Skill

Contenido del repositorio de origen con títulos, ejemplos, código, tablas, enlaces e imágenes preservados.

Web Motion Auditor

Workflow

  1. Run or open the app.
  2. Inspect the animated states: load, hover, focus, click, route transition, scroll, empty/loading/success/error.
  3. Check accessibility:
  • prefers-reduced-motion
  • focus visibility
  • no motion that blocks reading or interaction
  1. Check performance on desktop and mobile widths.
  2. Capture screenshots/video when possible.
  3. Score with the motion quality rubric.
  4. Return concrete fixes with file references.

Common Fixes

  • Shorten transitions.
  • Use transforms/opacity instead of layout-heavy properties.
  • Reduce stagger count.
  • Add reduced-motion branch.
  • Replace decorative motion with state-explaining motion.
  • Move complex narrative motion to Remotion or a controlled hero scene.

Relacionados por tarea

del mismo repositorio

Más Skills

Todos los Skills
frankxai
Comunidad

generative-media-director

Use when planning, prompting, generating, editing, routing, finishing, or QAing AI-created images, GIFs, videos, style frames, image-to-video clips, social ads, cinematic brand assets, motion studies, or multi-provider generative media workflows using Codex imagegen, GPT Image, Sora, Grok Imagine, Veo, Luma, Runway, Higgsfield, Remotion, Playwright, ffmpeg, Figma, Canva, or Vercel.

instalaciones
1
GitHub Stars
76
Actualizado
14 oct
frankxai
Comunidad

motion-director

Use when designing motion concepts, animation systems, choreography, timing, easing, reduced-motion behavior, or deciding which motion stack to use for web UI, video, GIF, Rive, Lottie, GSAP, Motion, Remotion, or Three.js work.

instalaciones
1
GitHub Stars
76
Actualizado
14 oct
frankxai
Comunidad

remotion-video-agent

Use when creating or editing Remotion videos, programmatic explainers, motion graphics, MP4 renders, GIF renders, social cutdowns, or React-authored video templates.

instalaciones
1
GitHub Stars
76
Actualizado
14 oct
frankxai
Comunidad

site-motion-excellence-director

Use when planning, auditing, specifying, implementing, or improving premium website/app motion across FrankX, Arcanea, Starlight, or Vercel/Next.js sites. Use for motion design systems, site choreography, scroll motion, generated media integration, runtime selection, reduced-motion planning, visual QA, and turning rough motion ideas into implementation-ready specs.

instalaciones
1
GitHub Stars
76
Actualizado
14 oct