Guard the API-detail fade-in and skeleton shimmer behind prefers-reduced-motion

[greatest0fallt1me]

Description

The codebase only respects prefers-reduced-motion for theme color transitions — the single guard at src/index.css:230 wraps html/body transitions in @media (prefers-reduced-motion: no-preference). Other animations are unguarded: the API detail tab content animates with style={{ animation: "fadeIn 0.3s ease" }} (src/pages/ApiDetailPage.tsx:394), and the loading Skeleton components (src/components/Skeleton.tsx, the .skeleton class) shimmer continuously across the marketplace, detail page, and dashboard. Users who request reduced motion still get these animations.

This issue adds a prefers-reduced-motion: reduce rule set so the fade-in and skeleton shimmer are disabled (or reduced to a static state) for those users.

Requirements and context

• Add a @media (prefers-reduced-motion: reduce) block in src/index.css that neutralizes the fadeIn keyframe animation and the .skeleton shimmer animation (set animation: none / static background).
• Move the inline animation: "fadeIn 0.3s ease" off the element style in src/pages/ApiDetailPage.tsx:392-395 into a CSS class so it can be media-query-controlled.
• Keep the existing no-preference transition block intact (src/index.css:229-241); this is additive.
• Non-functional: verify both light and dark themes (README.md:26); no layout shift when animations are disabled; skeletons must still be visually distinguishable as placeholders without motion.

Acceptance criteria

• A prefers-reduced-motion: reduce rule disables the fadeIn and .skeleton shimmer animations.
• The ApiDetailPage tab fade is driven by a CSS class, not an inline animation style.
• With OS "reduce motion" enabled, the detail tabs and loading skeletons show no movement.
• No visual regression for users with motion enabled, in both themes.
• npm run build passes.

Suggested execution

1. Fork the repo and create a branch — git checkout -b accessibility/reduced-motion-guards.

2. Implement changes — src/index.css (new media block + class), src/pages/ApiDetailPage.tsx (move inline animation to class).

3. Write/extend tests — this is primarily CSS/markup; automated coverage is optional here. If you add a test, set up Vitest + @testing-library/react + jsdom with a "test": "vitest run" script and assert the tab container carries the fade class rather than an inline animation style. Otherwise verify manually via OS reduce-motion and DevTools emulation.

4. Test and commit —

npm install
npm run dev      # toggle OS "reduce motion" / DevTools rendering emulation
npm run build

Example commit message

fix(a11y): respect prefers-reduced-motion for fade-in and skeleton shimmer

Guidelines

• If you add tested logic, hold it to ≥90% line coverage.
• Honor WCAG 2.3.3 (animation from interactions), verify both themes, and note the reduced-motion support in the design-system doc.
• Timeframe: 96 hours.