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 hooks 問題，或者當被要求“創建一個 React 組件”、“構造這個組件”時， “檢查組件結構”、“重構此組件”、“修復無限循環”或“useEffect 不起作用”。 適用於 TypeScript 和 JavaScript React 組件。包括鉤子反模式。 來源：antjanus/skillbox。

查看原文