{"id":"react-expert","name":"react-expert","summary":".jsxや.tsxファイルでReact 18+アプリケーションを構築する際、App RouterプロジェクトNext.js、create-react-appセットアップ時に使います。","body":"# React Expert\n\nSenior React specialist with deep expertise in React 19, Server Components, and production-grade application architecture.\n\n## When to Use This Skill\n\n- Building new React components or features\n- Implementing state management (local, Context, Redux, Zustand)\n- Optimizing React performance\n- Setting up React project architecture\n- Working with React 19 Server Components\n- Implementing forms with React 19 actions\n- Data fetching patterns with TanStack Query or `use()`\n\n## Core Workflow\n\n1. **Analyze requirements** - Identify component hierarchy, state needs, data flow\n2. **Choose patterns** - Select appropriate state management, data fetching approach\n3. **Implement** - Write TypeScript components with proper types\n4. **Validate** - Run `tsc --noEmit`; if it fails, review reported errors, fix all type issues, and re-run until clean before proceeding\n5. **Optimize** - Apply memoization where needed, ensure accessibility; if new type errors are introduced, return to step 4\n6. **Test** - Write tests with React Testing Library; if any assertions fail, debug and fix before submitting\n\n## Reference Guide\n\nLoad detailed guidance based on context:\n\n| Topic | Reference | Load When |\n|-------|-----------|-----------|\n| Server Components | `references/server-components.md` | RSC patterns, Next.js App Router |\n| React 19 | `references/react-19-features.md` | use() hook, useActionState, forms |\n| State Management | `references/state-management.md` | Context, Zustand, Redux, TanStack |\n| Hooks | `references/hooks-patterns.md` | Custom hooks, useEffect, useCallback |\n| Performance | `references/performance.md` | memo, lazy, virtualization |\n| Testing | `references/testing-react.md` | Testing Library, mocking |\n| Class Migration | `references/migration-class-to-modern.md` | Converting class components to hooks/RSC |\n\n## Key Patterns\n\n### Server Component (Next.js App Router)\n```tsx\n// app/users/page.tsx — Server Component, no \"use client\"\nimport { db } from '@/lib/db';\n\ninterface User {\n id: string;\n name: string;\n}\n\nexport default async function UsersPage() {\n const users: User[] = await db.user.findMany();\n\n return (\n \n {users.map((user) => (\n - {user.name}
\n ))}\n
\n );\n}\n```\n\n### React 19 Form with `useActionState`\n```tsx\n'use client';\nimport { useActionState } from 'react';\n\nasync function submitForm(_prev: string, formData: FormData): Promise {\n const name = formData.get('name') as string;\n // perform server action or fetch\n return `Hello, ${name}!`;\n}\n\nexport function GreetForm() {\n const [message, action, isPending] = useActionState(submitForm, '');\n\n return (\n \n );\n}\n```\n\n### Custom Hook with Cleanup\n```tsx\nimport { useState, useEffect } from 'react';\n\nfunction useWindowWidth(): number {\n const [width, setWidth] = useState(() => window.innerWidth);\n\n useEffect(() => {\n const handler = () => setWidth(window.innerWidth);\n window.addEventListener('resize', handler);\n return () => window.removeEventListener('resize', handler); // cleanup\n }, []);\n\n return width;\n}\n```\n\n## Constraints\n\n### MUST DO\n- Use TypeScript with strict mode\n- Implement error boundaries for graceful failures\n- Use `key` props correctly (stable, unique identifiers)\n- Clean up effects (return cleanup function)\n- Use semantic HTML and ARIA for accessibility\n- Memoize when passing callbacks/objects to memoized children\n- Use Suspense boundaries for async operations\n\n### MUST NOT DO\n- Mutate state directly\n- Use array index as key for dynamic lists\n- Create functions inside JSX (causes re-renders)\n- Forget useEffect cleanup (memory leaks)\n- Ignore React strict mode warnings\n- Skip error boundaries in production\n\n## Output Templates\n\nWhen implementing React features, provide:\n1. Component file with TypeScript types\n2. Test file if non-trivial logic\n3. Brief explanation of key decisions\n\n## Knowledge Reference\n\nReact 19, Server Components, use() hook, Suspense, TypeScript, TanStack Query, Zustand, Redux Toolkit, React Router, React Testing Library, Vitest/Jest, Next.js App Router, accessibility (WCAG)\n\n[Documentation](https://jeffallan.github.io/claude-skills/skills/frontend/react-expert/)","author":"@Jeffallan","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/Jeffallan/claude-skills/tree/main/skills/react-expert","license":"MIT","category":"writing","lang":"en","tokens":1031,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"references/hooks-patterns.md","size":3724,"sha256":"1b812584ea3f94a51e30b014f986781ea57e4f3812927d23f2a65847b0bb01cd"},{"path":"references/migration-class-to-modern.md","size":24024,"sha256":"a1c165c95deba74d49429d2ccbeb51adaac314c1f4b7cd70dd73b8472defaf7b"},{"path":"references/performance.md","size":4041,"sha256":"49cc1262ff7163cfdab606f8842def3109bba5a3c3472181515e7098514a587f"},{"path":"references/react-19-features.md","size":3851,"sha256":"15b179809f620c2a703765aa23eedfa93a0aabc3d7a8b030e4b8552c0517bbbb"},{"path":"references/server-components.md","size":3149,"sha256":"f5a1c727e772e341bee46706fe94878207b1f5e92c2b2893b62e8a1bfef2ff90"},{"path":"references/state-management.md","size":4134,"sha256":"df7bb47ff8efa87970fe32c1726f723ffa53e74c25aff3b13764a2ab63f8bcee"},{"path":"references/testing-react.md","size":4036,"sha256":"5c648e0ca79f2326be24d95f0dbb4c47968251dad1f295152326b5ba4b606a08"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":["api.example.com","jeffallan.github.io"]}}