By name: coding-standards description: Provides coding standards for React Native — performance patterns, consistency rules, and clean React architecture. Use when writing, modifying, or reviewing code. alwaysApply: true
Kiroku Coding Standards
Coding standards for the Kiroku app. Each standard is a standalone file in rules/ with reasoning, examples, and applicability conditions.
Categories
| Category | Prefix | Focus |
|---|---|---|
| Performance | PERF-* |
Render optimization, memo patterns, useEffect hygiene, data selection |
| Consistency | CONSISTENCY-* |
Platform checks, magic values, unused props, ESLint discipline |
| Clean React Patterns | CLEAN-REACT-PATTERNS-* |
Composition, component ownership, state structure |
| Styling | STYLING-* |
Theme tokens, semantic color choice, brand color sync |
Quick Reference
Performance
- PERF-1 — No spread in renderItem
- PERF-2 — Return early before expensive work
- PERF-3 — Use OnyxListItemProvider in renderItem
- PERF-5 — Shallow over deep comparisons
- PERF-6 — Derive state from props
- PERF-7 — Reset via key prop
- PERF-8 — Handle events in handlers
- PERF-9 — No useEffect chains
- PERF-10 — No useEffect parent communication
- PERF-11 — Optimize data selection
- PERF-12 — Prevent memory leaks
- PERF-13 — Hoist iterator-independent calls
- PERF-14 — Use useSyncExternalStore
- PERF-15 — Clean up async Effects
- PERF-16 — Guard double initialization
Consistency
- CONSISTENCY-1 — No platform-specific checks in components
- CONSISTENCY-2 — No magic numbers/strings
- CONSISTENCY-3 — No code duplication
- CONSISTENCY-4 — No unused props
- CONSISTENCY-5 — Justify ESLint disables
- CONSISTENCY-6 — Proper error handling
Clean React Patterns
- CLEAN-REACT-PATTERNS-0 — React Compiler compliance
- CLEAN-REACT-PATTERNS-1 — Composition over configuration
- CLEAN-REACT-PATTERNS-2 — Components own their behavior
- CLEAN-REACT-PATTERNS-3 — Context-free component contracts
- CLEAN-REACT-PATTERNS-4 — No side-effect spaghetti
- CLEAN-REACT-PATTERNS-5 — Keep state narrow
Styling
- STYLING-1 — No raw hex codes in components
- STYLING-2 — Use the useTheme hook, never import theme files directly
- STYLING-3 — Pick the most specific semantic token for the role
- STYLING-4 — Brand color edits go through the sync script
Usage
During development: When writing or modifying src/ files, consult the relevant standard files for detailed conditions, examples, and exceptions.
During review: The code-inline-reviewer agent loads all standards from this directory. See .claude/agents/code-inline-reviewer.md.