Agent-skills-standard react-native-styling

Style React Native apps with StyleSheet API, Flexbox, theming, and responsive design. Use when implementing React Native styles, theming, Flexbox layouts, or responsive design. (triggers: **/*.tsx, **/*.ts, StyleSheet, style, theme, responsive, flexbox)

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-styling" ~/.claude/skills/hoangnguyen0403-agent-skills-standard-react-native-styling && rm -rf "$T"

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

source content

React Native Styling

Priority: P1 (OPERATIONAL)

Implementation Guidelines

StyleSheet.create: Always use over inline objects (optimized, validated).
Flexbox: Default layout. No CSS Grid.
Responsive: Use
```
Dimensions
```
,
```
useWindowDimensions
```
, or percentage widths.
Theming: Centralize colors, fonts in
```
theme/
```
folder.
Platform Styles: Use
```
Platform.select
```
for conditional styles.
Dark Mode: Use React Context +
```
useColorScheme()
```
.

Responsive Design

const { width } = useWindowDimensions();
const isSmall = width < 375;

Anti-Patterns

No Inline Styles: Use
```
StyleSheet.create
```
.
No Magic Numbers: Use theme constants.
No Absolute Positioning: Avoid unless necessary.
No Fixed Widths: Use flex or percentages.

References

See references/theming.md for StyleSheet examples, Design Tokens, Theme Systems, Responsive Scaling, and Shadow Helpers.