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
1---2name: react-conventions3description: React and React Native coding conventions with TypeScript. Use when user says "create a component", "write a hook", "review my React code", "check conventions", or asks about naming, props patterns, accessibility, performance with React Compiler, or Tailwind/Uniwind styling. Do NOT use for backend code, Node.js, or architecture decisions.4---56# React Conventions78Coding conventions for React and React Native with TypeScript. It defines how to write good components, props, hooks and styles with tailwind (uniwind).9By keeping in mind accessibility, performances (with and without react-compiler) and testability.1011## Workflow1213### 1. Check exports & naming14- [conventions/exports-naming.md](conventions/exports-naming.md) - Named exports, FC typing, naming conventions1516### 2. Validate component structure17- [conventions/component-structure.md](conventions/component-structure.md) - File organization, JSX readability1819### 3. Review props patterns20- [conventions/props.md](conventions/props.md) - Readonly, PropsWithChildren, defaults, optional vs required2122### 4. Check hooks implementation23- [conventions/hooks.md](conventions/hooks.md) - Naming, one per file, return types, rules of hooks2425### 5. Evaluate performance26- [conventions/performance.md](conventions/performance.md) - React Compiler, manual optimization, FlatList, stable references2728### 6. Review styles29- [conventions/styles.md](conventions/styles.md) - Tailwind/Uniwind, conditional styles, theme values3031### 7. Verify accessibility32- [conventions/accessibility.md](conventions/accessibility.md) - Required attributes, roles, states, screen reader3334### 8. Check testability35- [conventions/testability.md](conventions/testability.md) - testID from constants, naming convention3637## Output Format3839Organize feedback by priority:4041**P0 - Blocking**: Critical violations (accessibility issues, hooks rules violations)42**P1 - Important**: Naming violations, missing types, structure issues43**P2 - Improvement**: Performance suggestions, style improvements4445For each issue:46- Location: `file:line`47- Problem description48- Impact49- Recommended fix with code example if relevant
Bikach