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。

查看原文