React Review Audit

**Score: 93/100** · 1 error · 13 warnings

Copy as prompt

```text
Fix the following React Review diagnostics in my codebase.

## Errors (1)

1. [error] require-reduced-motion — package.json:0
Project uses a motion library but has no prefers-reduced-motion handling — required for accessibility (WCAG 2.3.3)

## Warnings (13)

2. [warning] nextjs-missing-metadata — app/page.tsx:1
Page without metadata or generateMetadata export — hurts SEO

3. [warning] use-lazy-motion — app/page.tsx:15
Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

4. [warning] rerender-state-only-in-handlers — app/page.tsx:34
useState "isLoading" is updated but never read in the component's return — use useRef so updates don't trigger re-renders

5. [warning] design-no-redundant-size-axes — app/page.tsx:135
w-12 h-12 → use the shorthand size-12 (Tailwind v3.4+)

6. [warning] design-no-three-period-ellipsis — app/page.tsx:136
Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or `…`)

7. [warning] design-no-bold-heading — app/page.tsx:150
font-bold on

crushes counter shapes at display sizes — use font-semibold (600) or font-medium (500)

8. [warning] design-no-redundant-size-axes — app/page.tsx:156
w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

9. [warning] design-no-space-on-flex-children — app/page.tsx:179
space-x-3 on a flex/grid parent — use gap-x-3 instead. Per-sibling margins phantom-gap on conditional render and don't mirror in RTL

10. [warning] design-no-redundant-size-axes — app/page.tsx:181
w-10 h-10 → use the shorthand size-10 (Tailwind v3.4+)

11. [warning] nextjs-no-img-element — app/page.tsx:182
Use next/image instead of — provides automatic optimization, lazy loading, and responsive srcset

12. [warning] design-no-redundant-size-axes — app/page.tsx:185
w-6 h-6 → use the shorthand size-6 (Tailwind v3.4+)

13. [warning] design-no-redundant-size-axes — app/page.tsx:206
w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

14. [warning] design-no-redundant-size-axes — app/page.tsx:263
w-12 h-12 → use the shorthand size-12 (Tailwind v3.4+)
```

---

### ❌ Errors (1)

**`require-reduced-motion`**

Project uses a motion library but has no prefers-reduced-motion handling — required for accessibility (WCAG 2.3.3)

> Add `useReducedMotion()` from your animation library, or a `@media (prefers-reduced-motion: reduce)` CSS query

[`package.json:0`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/package.json#L0)

---

### ⚠️ Warnings (13)

**`design-no-redundant-size-axes`**

w-12 h-12 → use the shorthand size-12 (Tailwind v3.4+)

> Collapse `w-N h-N` to `size-N` (Tailwind v3.4+) when both axes match

[`app/page.tsx:135`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/app/page.tsx#L135)
[`app/page.tsx:156`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/app/page.tsx#L156)
[`app/page.tsx:181`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/app/page.tsx#L181)
[`app/page.tsx:185`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/app/page.tsx#L185)
[`app/page.tsx:206`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/app/page.tsx#L206)
[`app/page.tsx:263`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/app/page.tsx#L263)

**`nextjs-missing-metadata`**

Page without metadata or generateMetadata export — hurts SEO

> Add `export const metadata = { title: '...', description: '...' }` or `export async function generateMetadata()`

[`app/page.tsx:1`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/app/page.tsx#L1)

**`use-lazy-motion`**

Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

> Use `import { LazyMotion, m } from "framer-motion"` with `domAnimation` features — saves ~30kb

[`app/page.tsx:15`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/app/page.tsx#L15)

**`rerender-state-only-in-handlers`**

useState "isLoading" is updated but never read in the component's return — use useRef so updates don't trigger re-renders

> Replace useState with useRef when the value is only mutated and never read in render — `ref.current = ...` updates without re-rendering the component

[`app/page.tsx:34`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/app/page.tsx#L34)

**`design-no-three-period-ellipsis`**

Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or `…`)

> Use the typographic ellipsis "…" (or `…`) instead of three periods — pairs with action-with-followup labels ("Rename…", "Loading…")

[`app/page.tsx:136`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/app/page.tsx#L136)

**`design-no-bold-heading`**

font-bold on <h2> crushes counter shapes at display sizes — use font-semibold (600) or font-medium (500)

> Use `font-semibold` (600) or `font-medium` (500) on headings — 700+ crushes letter counter shapes at display sizes

[`app/page.tsx:150`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/app/page.tsx#L150)

**`design-no-space-on-flex-children`**

space-x-3 on a flex/grid parent — use gap-x-3 instead. Per-sibling margins phantom-gap on conditional render and don't mirror in RTL

> Use `gap-*` on the flex/grid parent. `space-x-*` / `space-y-*` produce phantom gaps when a sibling is conditionally rendered, lose vertical spacing on wrapped lines, and don't mirror in RTL

[`app/page.tsx:179`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/app/page.tsx#L179)

**`nextjs-no-img-element`**

Use next/image instead of <img> — provides automatic optimization, lazy loading, and responsive srcset

> `import Image from 'next/image'` — provides automatic WebP/AVIF, lazy loading, and responsive srcset

[`app/page.tsx:182`](https://github.com/celeroncoder/marketplace-ui-poc/blob/40f3f82608dbade1092b323bdb6497313faf1256/app/page.tsx#L182)

---

_{Last scored May 14, 2026 at 9:39 AM UTC. Maintained by [React Review](https://github.com/millionco/react-review).}

Start with the referenced package.json entry and the listed locations in app/page.tsx, reviewing each React Review diagnostic and its suggested direction. Re-run the React Review audit after addressing the reduced-motion, metadata, motion import, state, Tailwind, text, and image findings; done means the reported error and warnings are resolved.

Written by the indexing model from the issue text.