# React Conventions

> 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.

- Skill: `bikach/react-conventions` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds@latest add bikach/react-conventions`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bikach/react-conventions/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Bikach (https://skillmd.com/u/bikach)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/bikach/react-conventions

---


# 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](conventions/exports-naming.md) - Named exports, FC typing, naming conventions

### 2. Validate component structure
- [conventions/component-structure.md](conventions/component-structure.md) - File organization, JSX readability

### 3. Review props patterns
- [conventions/props.md](conventions/props.md) - Readonly, PropsWithChildren, defaults, optional vs required

### 4. Check hooks implementation
- [conventions/hooks.md](conventions/hooks.md) - Naming, one per file, return types, rules of hooks

### 5. Evaluate performance
- [conventions/performance.md](conventions/performance.md) - React Compiler, manual optimization, FlatList, stable references

### 6. Review styles
- [conventions/styles.md](conventions/styles.md) - Tailwind/Uniwind, conditional styles, theme values

### 7. Verify accessibility
- [conventions/accessibility.md](conventions/accessibility.md) - Required attributes, roles, states, screen reader

### 8. Check testability
- [conventions/testability.md](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