#1

React Review Audit

Openreact-doctor[bot]opened 6mo ago

Score: 96/100 · 0 errors · 20 warnings

Copy as prompt
Fix the following React Review diagnostics in my codebase.

## Warnings (20)

1. [warning] design-no-default-tailwind-palette — src/components/NotFound.tsx:6
   text-gray-600 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

2. [warning] design-no-default-tailwind-palette — src/components/NotFound.tsx:6
   text-gray-400 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

3. [warning] design-no-bold-heading — src/routes/_authed/posts.$postId.tsx:24
   font-bold on <h4> crushes counter shapes at display sizes — use font-semibold (600) or font-medium (500)

4. [warning] html-has-lang — src/routes/__root.tsx:100
   Missing lang attribute.

5. [warning] tanstack-start-server-fn-validate-input — src/routes/__root.tsx:18
   Server function handler accesses data without inputValidator() — validate inputs crossing the network boundary

6. [warning] design-no-default-tailwind-palette — src/components/DefaultCatchBoundary.tsx:28
   bg-gray-600 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

7. [warning] design-no-default-tailwind-palette — src/components/DefaultCatchBoundary.tsx:28
   bg-gray-700 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

8. [warning] design-no-default-tailwind-palette — src/components/DefaultCatchBoundary.tsx:35
   bg-gray-600 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

9. [warning] design-no-default-tailwind-palette — src/components/DefaultCatchBoundary.tsx:35
   bg-gray-700 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

10. [warning] design-no-default-tailwind-palette — src/components/DefaultCatchBoundary.tsx:42
   bg-gray-600 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

11. [warning] design-no-default-tailwind-palette — src/components/DefaultCatchBoundary.tsx:42
   bg-gray-700 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

12. [warning] no-pure-black-background — src/components/Auth.tsx:13
   Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

13. [warning] design-no-default-tailwind-palette — src/components/Auth.tsx:14
   bg-gray-900 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

14. [warning] design-no-bold-heading — src/components/Auth.tsx:15
   font-bold on <h1> crushes counter shapes at display sizes — use font-semibold (600) or font-medium (500)

15. [warning] no-prevent-default — src/components/Auth.tsx:16
   preventDefault() on <form> onSubmit — form won't work without JavaScript. Consider using a server action for progressive enhancement

16. [warning] design-no-default-tailwind-palette — src/components/Auth.tsx:31
   border-gray-500 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

17. [warning] design-no-default-tailwind-palette — src/components/Auth.tsx:31
   bg-gray-800 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

18. [warning] design-no-default-tailwind-palette — src/components/Auth.tsx:42
   border-gray-500 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

19. [warning] design-no-default-tailwind-palette — src/components/Auth.tsx:42
   bg-gray-800 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

20. [warning] tanstack-start-server-fn-validate-input — src/utils/posts.ts:29
   Server function handler accesses data without inputValidator() — validate inputs crossing the network boundary

⚠️ Warnings (20)

design-no-default-tailwind-palette

text-gray-600 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)

src/components/NotFound.tsx:6
src/components/NotFound.tsx:6
src/components/DefaultCatchBoundary.tsx:28
src/components/DefaultCatchBoundary.tsx:28
src/components/DefaultCatchBoundary.tsx:35
src/components/DefaultCatchBoundary.tsx:35
src/components/DefaultCatchBoundary.tsx:42
src/components/DefaultCatchBoundary.tsx:42
src/components/Auth.tsx:14
src/components/Auth.tsx:31
src/components/Auth.tsx:31
src/components/Auth.tsx:42
src/components/Auth.tsx:42

design-no-bold-heading

font-bold on <h4> 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

src/routes/_authed/posts.$postId.tsx:24
src/components/Auth.tsx:15

tanstack-start-server-fn-validate-input

Server function handler accesses data without inputValidator() — validate inputs crossing the network boundary

Add .inputValidator(schema) before .handler() — data crosses a network boundary and must be validated at runtime

src/routes/__root.tsx:18
src/utils/posts.ts:29

html-has-lang

Missing lang attribute.

Add a lang attribute to the html element whose value represents the primary language of document.

src/routes/__root.tsx:100

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

src/components/Auth.tsx:13

no-prevent-default

preventDefault() on <form> onSubmit — form won't work without JavaScript. Consider using a server action for progressive enhancement

Use &lt;form action={serverAction}&gt; (works without JS) or &lt;button&gt; instead of &lt;a&gt; with preventDefault

src/components/Auth.tsx:16


Last scored May 14, 2026 at 7:35 AM UTC. Maintained by React Review.

Activity

0

No activity yet.