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."

Use when creating React components, structuring component files, organizing component code, debugging React hooks issues, or when asked to "create a React component", "structure this component", "review component structure", "refactor this component", "fix infinite loop", or "useEffect not working". Applies to both TypeScript and JavaScript React components. Includes hooks antipatterns. Source: antjanus/skillbox.

View raw