Agent-Skills.md

Agent Skills: 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)

UncategorizedID: hoangnguyen0403/agent-skills-standard/react-native-styling

Repository

hoangnguyen0403/agent-skills-standard
HoangNguyen0403License: Apache-2.0
362103

Install this agent skill to your local

pnpm dlx add-skill https://github.com/HoangNguyen0403/agent-skills-standard/tree/HEAD/skills/react-native/react-native-styling

Skill Files

Browse the full folder contents for react-native-styling.

Download Skill

Loading file tree…

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

Skill Metadata

Name
react-native-styling
Description
"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)"

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.