rn-stylinglisted

Use when styling React Native + Expo components: choosing between StyleSheet/NativeWind/inline, wiring NativeWind v4 from DESIGN.md tokens, handling Flexbox in RN (column-by-default, not row), safe-area insets, dark mode, responsive design with useWindowDimensions, optimized images via expo-image, performant lists via FlashList, and choosing NativeWind vs real native components via @expo/ui (SwiftUI/Jetpack Compose). Triggers on: "style this screen", "add dark mode", "fix safe area", "import design tokens", "set up NativeWind", "native settings screen", "@expo/ui", or when an agent is about to write StyleSheet/className in an RN file. Not for: building screens end-to-end (rn-add-screen, Wave 2), navigation (rn-expo-router), animations (rn-animations-gestures, Wave 3), or web styling (Next.js stack).
lukedj78/dev-flow · ★ 4 · Web & Frontend · score 77

Install: claude install-skill lukedj78/dev-flow

# rn-styling — guardrail for styling in React Native + Expo ## The 5 rules (non-negotiable) 1. **NativeWind v4 is the default**. `StyleSheet` only for performance-critical paths (per-frame animations etc.). 2. **No magic numbers**. Every spacing/color/radius/font value comes from `tailwind.config.js` (which mirrors the project's DESIGN.md tokens). 3. **SafeArea mandatory on every root screen**. Use `SafeAreaView` from `react-native-safe-area-context` (NOT the one from `react-native`). 4. **Dark mode via `useColorScheme` + Tailwind `dark:` variant**. Never `Appearance.getColorScheme()` at module top-level. 5. **Optimized primitives**: `expo-image` instead of `Image`; `@shopify/flash-list` for any list > 20 items. ## Quick decision tree - "Should I style this with NativeWind or StyleSheet?" → `references/decision-tree.md` - "How do I set up NativeWind v4 from scratch?" → `references/nativewind-setup.md` - "Why does Flexbox behave differently than on the web?" → `references/concepts.md` - "What are the common patterns and anti-patterns?" → `references/patterns.md` - "Show me a real example" → `references/examples/` - "I need this screen to *feel* native, not just look styled" (grouped settings, native toggle/picker/slider, real bottom sheet) → this isn't a styling question, it's `references/expo-ui.md` (`@expo/ui`) — real SwiftUI/Jetpack Compose components, not RN primitives. ## NativeWind vs `@expo/ui` — two different tools - **NativeWind** (this skill's default) styles R