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。

原文を見る