Problem Statement
The code-inline-reviewer.md agent contains 18 well-defined rules for React Native best practices, but these rules are only applied after code is written (during PR review). Claude should follow these same guidelines while writing code to prevent violations from being introduced in the first place.
Current State
- Code Review Agent: Contains detailed rules with IDs, conditions, reasoning, and good/bad examples
- Coding Guidelines: The existing
CLAUDE.md and cursor rules don't include these specific patterns
Rules to Convert
Performance Rules (PERF-1 through PERF-13)
- PERF-1: No spread in list item's renderItem
- PERF-2: Return early before expensive work
- PERF-3: Use OnyxListItemProvider hooks instead of useOnyx in renderItem
- PERF-5: Use shallow comparisons instead of deep comparisons
- PERF-6: Derive state from props
- PERF-7: Control component resets via key prop
- PERF-8: Handle events in event handlers
- PERF-9: Avoid useEffect chains
- PERF-10: Communicate with parent components without useEffect
- PERF-11: Optimize data selection and handling
- PERF-12: Prevent memory leaks in components and plugins
- PERF-13: Avoid iterator-independent function calls in array methods
Consistency Rules (CONSISTENCY-1 through CONSISTENCY-5)
- CONSISTENCY-1: Avoid platform-specific checks within components
- CONSISTENCY-2: Avoid magic numbers and strings
- CONSISTENCY-3: Eliminate code duplication
- CONSISTENCY-4: Eliminate unused and redundant props
- CONSISTENCY-5: Justify ESLint rule disables / Ensure proper error handling
Clean React Patterns (CLEAN-REACT-PATTERNS-1 through CLEAN-REACT-PATTERNS-3)
- CLEAN-REACT-PATTERNS-1: Favor composition over configuration
- CLEAN-REACT-PATTERNS-2: Let components own their behavior and effects
- CLEAN-REACT-PATTERNS-3: Design context-free component contracts
Proposed Solution
Create a new cursor rule file (e.g., .cursor/rules/react-native-coding-standards.mdc) or update CLAUDE.md with condensed, actionable guidelines derived from the review rules. The format should be optimized for code generation (imperative "do this" rather than "flag when").
Implementation Approach
- Extract the "Good" patterns from each rule as the primary guidance
- Include "Avoid" patterns as warnings
- Condense reasoning into brief explanations
- Organize by category (Performance, Consistency, Patterns)
- Keep examples concise but illustrative
Acceptance Criteria
Problem Statement
The
code-inline-reviewer.mdagent contains 18 well-defined rules for React Native best practices, but these rules are only applied after code is written (during PR review). Claude should follow these same guidelines while writing code to prevent violations from being introduced in the first place.Current State
CLAUDE.mdand cursor rules don't include these specific patternsRules to Convert
Performance Rules (PERF-1 through PERF-13)
Consistency Rules (CONSISTENCY-1 through CONSISTENCY-5)
Clean React Patterns (CLEAN-REACT-PATTERNS-1 through CLEAN-REACT-PATTERNS-3)
Proposed Solution
Create a new cursor rule file (e.g.,
.cursor/rules/react-native-coding-standards.mdc) or updateCLAUDE.mdwith condensed, actionable guidelines derived from the review rules. The format should be optimized for code generation (imperative "do this" rather than "flag when").Implementation Approach
Acceptance Criteria