React native styling

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

🧠 The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.

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.

What its author says it does

Copied from the file, not written here

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)

SKILL.md

1.2 KB, 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.