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) orfont-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
langattribute to thehtmlelement whose value represents the primary language of document.
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.
#0a0a0for Tailwind'sbg-gray-950. Pure black looks harsh on modern displays
no-prevent-default
preventDefault() on <form> onSubmit — form won't work without JavaScript. Consider using a server action for progressive enhancement
Use
<form action={serverAction}>(works without JS) or<button>instead of<a>with preventDefault
Last scored May 14, 2026 at 7:35 AM UTC. Maintained by React Review.
Activity
0No activity yet.