React Review Audit

**Score: 94/100** · 1 error · 15 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 (15)

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:5
Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

4. [warning] no-pure-black-background — app/page.tsx:9
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

5. [warning] no-pure-black-background — app/page.tsx:15
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

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

7. [warning] design-no-space-on-flex-children — components/hero.tsx:13
space-y-8 on a flex/grid parent — use gap-y-8 instead. Per-sibling margins phantom-gap on conditional render and don't mirror in RTL

8. [warning] design-no-redundant-size-axes — components/hero.tsx:20
w-5 h-5 → use the shorthand size-5 (Tailwind v3.4+)

9. [warning] design-no-redundant-size-axes — components/hero.tsx:24
w-96 h-96 → use the shorthand size-96 (Tailwind v3.4+)

10. [warning] design-no-redundant-size-axes — components/hero.tsx:57
w-5 h-5 → use the shorthand size-5 (Tailwind v3.4+)

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

12. [warning] design-no-space-on-flex-children — components/navbar.tsx:25
space-x-2 on a flex/grid parent — use gap-x-2 instead. Per-sibling margins phantom-gap on conditional render and don't mirror in RTL

13. [warning] design-no-default-tailwind-palette — components/navbar.tsx:83
ring-slate-400 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

14. [warning] design-no-default-tailwind-palette — components/navbar.tsx:97
bg-slate-950 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

15. [warning] use-lazy-motion — components/ui/gradient-background.tsx:2
Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

16. [warning] no-pure-black-background — components/ui/gradient-background.tsx:7
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)
```

---

### ❌ 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/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/package.json#L0)

---

### ⚠️ Warnings (15)

**`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:5`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/app/page.tsx#L5)
[`components/hero.tsx:3`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/components/hero.tsx#L3)
[`components/navbar.tsx:3`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/components/navbar.tsx#L3)
[`components/ui/gradient-background.tsx:2`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/components/ui/gradient-background.tsx#L2)

**`no-pure-black-background`**

Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

> Tint the background slightly toward your brand hue — e.g. `#0a0a0f` or Tailwind's `bg-gray-950`. Pure black looks harsh on modern displays

[`app/page.tsx:9`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/app/page.tsx#L9)
[`app/page.tsx:15`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/app/page.tsx#L15)
[`components/ui/gradient-background.tsx:7`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/components/ui/gradient-background.tsx#L7)

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

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

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

[`components/hero.tsx:20`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/components/hero.tsx#L20)
[`components/hero.tsx:24`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/components/hero.tsx#L24)
[`components/hero.tsx:57`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/components/hero.tsx#L57)

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

space-y-8 on a flex/grid parent — use gap-y-8 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

[`components/hero.tsx:13`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/components/hero.tsx#L13)
[`components/navbar.tsx:25`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/components/navbar.tsx#L25)

**`design-no-default-tailwind-palette`**

ring-slate-400 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

> Replace `indigo-*` / `gray-*` / `slate-*` with project tokens, your brand color, or a less-default neutral (`zinc`, `neutral`, `stone`)

[`components/navbar.tsx:83`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/components/navbar.tsx#L83)
[`components/navbar.tsx:97`](https://github.com/celeroncoder/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/components/navbar.tsx#L97)

**`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/nexusai/blob/610b3293e7e7d95d69de481efbc04ee0af3bf12c/app/page.tsx#L1)

---

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