ideal-react-component

SKILL.md

A battle-tested pattern for organizing React component files that emphasizes readability, maintainability, and logical flow. This structure helps teams maintain consistency and makes components easier to understand at a glance.

Core principle: Declare everything in a predictable order—imports to styles to types to logic to render—so developers know where to find things.

Why: "When you deal with more than a handful of imports, it's really easy to get lost in what the file is using."

React 컴포넌트 생성, 컴포넌트 파일 구조화, 컴포넌트 코드 구성, React 후크 문제를 디버깅하거나 "React 구성 요소 생성", "이 구성 요소 구조화"를 요청하는 경우 "구성요소 구조 검토", "이 구성요소 리팩터링", "무한 루프 수정" 또는 "useEffect가 작동하지 않음". TypeScript 및 JavaScript React 구성 요소 모두에 적용됩니다. 후크 안티패턴을 포함합니다. 출처: antjanus/skillbox.

원본 보기