React Review Audit
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 48/100
- issue の種類
- リファクタリング
- 明瞭さ
- おおむね明確
- 活発さ
- 静か
- 技術スタック
- next.js, react, tailwindcss, typescript
調査の方向性
列挙されたエントリポイントから開始します: package.json、src/components/TodoList/TodoCard/index.tsx、src/components/Header/index.tsx、src/components/EditTodoModal.tsx、src/components/AddTodo.tsx、src/pages/_document.tsx、src/pages/user/login.tsx。各 React Review 診断を確認し、reduced-motion、bundle-size、state、typography、palette、React 19、font-loading に関する警告が、参照されているすべての場所で対処されていることを確認してください。
索引モデルが issue の本文から書いたものです。
説明
Score: 93/100 · 1 error · 15 warnings
Copy as prompt
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] use-lazy-motion — src/components/TodoList/TodoCard/index.tsx:15
Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size
3. [warning] no-derived-useState — src/components/TodoList/TodoCard/index.tsx:24
useState initialized from prop "todo" — if this value should stay in sync with the prop, derive it during render instead
4. [warning] use-lazy-motion — src/components/Header/index.tsx:22
Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size
5. [warning] design-no-three-period-ellipsis — src/pages/user/login.tsx:28
Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or `…`)
6. [warning] no-react19-deprecated-apis — src/components/EditTodoModal.tsx:11
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly
7. [warning] prefer-useReducer — src/components/EditTodoModal.tsx:18
Component "EditTodoModal" has 5 useState calls — consider useReducer for related state
8. [warning] no-derived-useState — src/components/EditTodoModal.tsx:19
useState initialized from prop "todo" — if this value should stay in sync with the prop, derive it during render instead
9. [warning] no-derived-useState — src/components/EditTodoModal.tsx:20
useState initialized from prop "todo" — if this value should stay in sync with the prop, derive it during render instead
10. [warning] no-derived-useState — src/components/EditTodoModal.tsx:21
useState initialized from prop "todo" — if this value should stay in sync with the prop, derive it during render instead
11. [warning] no-derived-useState — src/components/EditTodoModal.tsx:22
useState initialized from prop "todo" — if this value should stay in sync with the prop, derive it during render instead
12. [warning] design-no-default-tailwind-palette — src/components/AddTodo.tsx:50
text-slate-300 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)
13. [warning] design-no-default-tailwind-palette — src/components/AddTodo.tsx:59
text-slate-600 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)
14. [warning] design-no-default-tailwind-palette — src/components/AddTodo.tsx:59
text-slate-500 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)
15. [warning] nextjs-no-font-link — src/pages/_document.tsx:12
Loading Google Fonts via <link> — use next/font instead for self-hosting, zero layout shift, and no render-blocking requests
16. [warning] nextjs-no-font-link — src/pages/_document.tsx:18
Loading Google Fonts via <link> — use next/font instead for self-hosting, zero layout shift, and no render-blocking requests
❌ 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
⚠️ Warnings (15)
no-derived-useState
useState initialized from prop "todo" — if this value should stay in sync with the prop, derive it during render instead
Remove useState and compute the value inline:
const value = transform(propName)
src/components/TodoList/TodoCard/index.tsx:24
src/components/EditTodoModal.tsx:19
src/components/EditTodoModal.tsx:20
src/components/EditTodoModal.tsx:21
src/components/EditTodoModal.tsx:22
design-no-default-tailwind-palette
text-slate-300 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/AddTodo.tsx:50
src/components/AddTodo.tsx:59
src/components/AddTodo.tsx:59
use-lazy-motion
Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size
Use
import { LazyMotion, m } from "framer-motion"withdomAnimationfeatures — saves ~30kb
src/components/TodoList/TodoCard/index.tsx:15
src/components/Header/index.tsx:22
nextjs-no-font-link
Loading Google Fonts via <link> — use next/font instead for self-hosting, zero layout shift, and no render-blocking requests
import { Inter } from "next/font/google"— self-hosted, zero layout shift, no render-blocking requests
src/pages/_document.tsx:12
src/pages/_document.tsx:18
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…")
no-react19-deprecated-apis
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly
Pass
refas a regular prop on function components —forwardRefis no longer needed in React 19+. ReplaceuseContext(X)withuse(X)for branch-aware context reads. Only enabled on projects detected as React 19+.
src/components/EditTodoModal.tsx:11
prefer-useReducer
Component "EditTodoModal" has 5 useState calls — consider useReducer for related state
Group related state:
const [state, dispatch] = useReducer(reducer, { field1, field2, ... })
src/components/EditTodoModal.tsx:18
Last scored May 14, 2026 at 9:39 AM UTC. Maintained by React Review.
- 主要言語
- TypeScript
- スター
- 0
- フォーク
- 0
- PR マージ指標
- 30日以内にマージされた PR はありません
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
-
bug v2
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
modelcontextprotocol/inspector#2458 · コメント 1 件 ·
-
難易度 1/5 1時間未満 初心者へのやさしさ 75/100
railmapgen/rmp-gallery#4068 ·
-
Mend: dependency security vulnerability status: needs triage 🕵️♀️
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
carbon-design-system/ibm-products#9907 ·