UI/UX: Design a prefers-reduced-motion review for skeleton, spinner, and transitions

[Baskarayelu]

Description

The app animates in several places — the shimmer in LoadingSkeleton (--credence-motion-skeleton), the Button spinner, and token-based transitions on ThemeToggle — and docs/motion-guidelines.md calls for reduced-motion defaults. But there is no verified guarantee that all of these respect @media (prefers-reduced-motion: reduce). We need a review and spec ensuring every animation degrades gracefully (no shimmer loop, instant or minimal transitions) for users who request reduced motion.

Requirements and context

• UI/UX scope only — motion review and reduced-motion fallbacks.
• Reference docs/motion-guidelines.md, --credence-motion-* tokens in src/index.css, LoadingSkeleton.tsx, and Button.css.
• Confirm/add a global prefers-reduced-motion rule covering shimmer, spinner, and transitions.
• Provide reduced-motion fallback states (static skeleton, static spinner alternative).

Suggested execution

• Branch: uiux/reduced-motion-review.
• Add/verify reduced-motion media queries in src/index.css and component CSS.
• Deliver: motion inventory (animation × reduced-motion fallback) and verification notes.

Test and commit

• Visual QA at 375px and 1280px with reduced motion enabled and disabled.
• npm run build and npm run lint pass.
• a11y checks: no looping/large motion when reduce is requested; content still legible.

Example commit message

fix(uiux): ensure reduced-motion fallbacks for skeleton, spinner, transitions

Guidelines

• Clear documentation of the motion inventory.
• Design consistency with motion-guidelines.md.
• Timeframe: 96 hours