React Conventions
Coding conventions for React and React Native with TypeScript. It defines how to write good components, props, hooks and styles with tailwind (uniwind). By keeping in mind accessibility, performances (with and without react-compiler) and testability.
Workflow
1. Check exports & naming
- conventions/exports-naming.md - Named exports, FC typing, naming conventions
2. Validate component structure
- conventions/component-structure.md - File organization, JSX readability
3. Review props patterns
- conventions/props.md - Readonly, PropsWithChildren, defaults, optional vs required
4. Check hooks implementation
- conventions/hooks.md - Naming, one per file, return types, rules of hooks
5. Evaluate performance
- conventions/performance.md - React Compiler, manual optimization, FlatList, stable references
6. Review styles
- conventions/styles.md - Tailwind/Uniwind, conditional styles, theme values
7. Verify accessibility
- conventions/accessibility.md - Required attributes, roles, states, screen reader
8. Check testability
- conventions/testability.md - testID from constants, naming convention
Output Format
Organize feedback by priority:
P0 - Blocking: Critical violations (accessibility issues, hooks rules violations) P1 - Important: Naming violations, missing types, structure issues P2 - Improvement: Performance suggestions, style improvements
For each issue:
- Location:
file:line - Problem description
- Impact
- Recommended fix with code example if relevant