Agent-skills-standard react-native-components

Build modern React Native components using function components and composition. Use when building or refactoring React Native function components and composable UI. (triggers: **/*.tsx, **/*.jsx, component, props, children, composition, presentational, container)

install

source · Clone the upstream repo

git clone https://github.com/HoangNguyen0403/agent-skills-standard

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/HoangNguyen0403/agent-skills-standard "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/react-native/react-native-components" ~/.claude/skills/hoangnguyen0403-agent-skills-standard-react-native-components && rm -rf "$T"

manifest: skills/react-native/react-native-components/SKILL.md

source content

React Native Components

Priority: P0 (CRITICAL)

Implementation Guidelines

Function Components Only: Use hooks. No class components.
Container/Presentational: Separate logic (hooks, data fetching) from UI (JSX, styling).
Composition: Use
```
children
```
prop. Prefer composition over prop drilling.
Props: TypeScript interfaces. Destructure in params.
File Size: Keep components < 250 lines. Split if larger.
One Component Per File: Named exports for components.
Naming:
```
PascalCase
```
for components.
```
use*
```
for hooks.
Imports: Group - React → External → Internal → Styles.
Platform Components: Use built-in (
```
View
```
,
```
Text
```
,
```
TouchableOpacity
```
). Avoid DOM (
```
div
```
,
```
span
```
).

Anti-Patterns

No Classes: Use hooks instead.
No Nested Components: Define at top level.
No Inline Styles: Use
```
StyleSheet.create
```
.
No Index Keys: Use stable IDs.
No Deep Nesting: Max 3 levels.

References

See references/patterns.md for Container/Presentational split, HOCs, Render Props, Compound Components, and Slot patterns.