Agent skill · software engineering · aiskillstore
rn-styling
Styling patterns for React Native with NativeWind and BrandColors. Use when working with styles, themes, colors, responsive layouts, or platform-specific UI in Expo/React Native.
Why this skill is useful
Provides specific styling patterns and practices for React Native using NativeWind and BrandColors that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
React Native Styling Problem Statement React Native styling differs fundamentally from web CSS. NativeWind bridges the gap but has its own rules. This codebase uses a hybrid approach: BrandColors for semantic colors, NativeWind for layout utilities. --- Pattern: BrandColors vs NativeWind Classes Rule: Use BrandColors for semantic colors, NativeWind for layout/spacing. When to use which: Use Case Approach ---------- ---------- Brand colors (primary, secondary) BrandColors.primary Background colors BrandColors.background Text colors BrandColors.textPrimary, textSecondary Layout (flex, padding, margin) NativeWind classes Borders, radius NativeWind classes Shadows Style object (NativeWind shadows limited on iOS) --- Pattern: Theme-Aware Colors Problem: Supporting light/dark mode with BrandColors. --- Pattern: NativeWind Class Ordering Problem: Unlike web CSS, React Native doesn't cascade. Last class wins for conflicting properties. --- Pattern: Platform-Specific Styles --- Pattern: Safe Area Handling --- Pattern: Keyboard Avoiding --- Pattern: Responsive Breakpoints Note: NativeWind v2 breakpoints differ from web Tailwind. --- Pattern: Animated Styles Problem: Avoiding re-renders with Animated values. Style arrays: Combine static + animated styles. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/rn-styling