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.

Vedi sorgente

Come usare

  1. Copia il comando e controlla il pacchetto prima di installarlo nel tuo ambiente agente.
  2. Controlla strumenti, credenziali e ambienti richiesti nel documento originale.
  3. Descrivi input e risultato desiderato; confronta l’output con le fonti.
npx skills add https://github.com/frankxai/awesome-motion-design-agent-skills --skill web-motion-auditor

Prima di iniziare

  • L’installazione non include abbonamenti, quote API o accesso ai file.
  • Stelle e installazioni indicano attività, non un test indipendente di qualità o sicurezza.
Documento Skill originale

Contenuto dal repository con titoli, esempi, codice, tabelle, link e immagini preservati.

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.

Correlati per attività

dallo stesso repository

Altri Skills

Tutti gli Skills
frankxai
Community

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.

installazioni
1
GitHub Stars
76
Aggiornato
14 ott
frankxai
Community

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.

installazioni
1
GitHub Stars
76
Aggiornato
14 ott
frankxai
Community

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.

installazioni
1
GitHub Stars
76
Aggiornato
14 ott
frankxai
Community

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.

installazioni
1
GitHub Stars
76
Aggiornato
14 ott