React native styling

Skill ComeOnOliver/skillshub/skills/HoangNguyen0403/agent-skills-standard/react-native-styling

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)From its SKILL.md

Install

npx -y skills add ComeOnOliver/skillshub --skill react-native-styling

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

1.2 KB, 221 tokens by cl100k_base, as published. Nobody here has run it

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.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.