react-guidelines

What problem does it solve?

This Skill codifies React frontend guidelines to reduce cognitive load during code reviews, prevent common pitfalls, and keep code consistent across teams.

Core Features & Use Cases

• One file per hook/component: Every hook, component, or modal should have its OWN file to improve maintainability.
• Don't use useState or useEffect directly in components: Always move stateful logic into dedicated custom hooks (e.g., useBot, useBacktesting).
• Function components with default export: Components should be defined as functions and exported via default export.
• Explicit TypeScript types: Avoid any and anonymous types; create explicit types when needed.
• Quality checks on changes: Run type checks and linting when frontend changes are made.
• Guidance for new pages: Follow the instructions in references to structure new pages.

Quick Start

Review a React file and apply the guidelines to identify violations and propose fixes, e.g.: Inspect 'src/components/Login.tsx' and ensure it uses a separate hook, proper file-per-component structure, and explicit types.