일본어로 작성된 React 19.3 작성 가이드라인입니다. 에이전트가 컴포넌트 및 서버 처리를 작성, 수정, 검토할 때 표에 따라 상태를 어디에 둘지 결정합니다(인터페이스 상태는 Effect Atom, 서버 데이터는 TanStack Query 사용). 비동기 워터폴을 제거하는 방법과 병렬 API를 언제 사용할지 등을 다루며, 저자의 masseater/typescript-template 템플릿을 위해 재작성되었습니다.
보안 감사: 감사 완료(위험 요소 없음)
설치: npx skills add https://github.com/masseater/skills --skill how-to-use-react
이유
- '구분 사용' 표에서 무엇을 사용하고 무엇을 사용하지 않을지 항목별로 명시합니다: useState / useContext는 사용하지 않으며(no-restricted-imports로 차단), 낙관적 업데이트에는 useOptimistic을, 급하지 않은 업데이트에는 타이머 기반 디바운싱 대신 useTransition을, 숨겨져 있지만 상태는 유지해야 하는 경우 <Activity>를 사용합니다
- React Compiler가 있는 저장소에서는 useMemo / useCallback / memo를 작성하지 않으며, 없는 경우에만 react-perf 규칙이 지정한 위치에서만 추가합니다
- 서로 의존하지 않는 비동기 작업은 Effect.all과 concurrency: "unbounded"를 사용하여 병렬로 처리하고, 순서가 요구되는 경우 concurrency: 1로 명시합니다. 저자는 vercel-labs의 react-best-practices 등의 자료를 기반으로 재작성했으며, 그중 Next.js, SWR, Redux는 채택하지 않았다고 밝혔습니다
- skills.sh 24시간당 설치 2801(관심도만 반영)
사용법
- npx skills add https://github.com/masseater/skills --skill how-to-use-react
- React 컴포넌트, 로더, 서버 처리를 작성, 수정, 검토할 때 트리거됩니다. SKILL.md에서는 references/ 아래의 8개 문서(async, effects-and-data, component-apis 등)를 함께 읽을 것을 요구합니다
위험 요소
- 감사 결과는 통과입니다. SKILL.md는 스크립트나 네트워크 요청이 없는 순수 텍스트 가이드라인으로 내용과 일치합니다. references/ 아래의 문서는 스캔되지 않았습니다
- 규칙이 저자 템플릿의 기술 스택(Effect, TanStack Start, FSD 디렉터리 구조)에 묶여 있어, 일반적인 Next.js / Redux 프로젝트에서 그대로 사용하면 기존 코드와 충돌할 수 있습니다
- 전체 내용이 일본어입니다. skills.sh 페이지에 따르면 저장소는 2개 스타만 있으며, 10월 12일에 처음 등재되었습니다. 일일 설치량이 저장소 규모와 맞지 않습니다