What problem does it solve? Developers building React Native apps with gluestack-ui v5 often misuse components by importing React Native primitives, skipping required compound sub-components, or applying hardcoded color classes that break theming. This Skill provides the exact rules and correct/incorrect code patterns to write consistent, theme-aware gluestack-ui v5 code. ## Core Features & Use Cases - Component Selection Rules: Maps React Native primitives (View, Text, TouchableOpacity) to their gluestack equivalents (Box, Text, Pressable) and mandates props like space, variant, and size over className utilities. - Compound Component Patterns: Documents required sub-component structures for Input, Button, FormControl, Card, Checkbox, and Select, including the mandatory InputSlot wrapper for InputIcon. - Theming & Icons: Covers GluestackUIProvider setup, NativeWind v5 vs UniWind theme switching, icon resolution via pre-built exports, Lucide, or createIcon, and strict semantic token usage (bg-background, text-foreground). - Use Case: When building a login screen with email and password inputs, use this Skill to correctly structure FormControl with InputSlot-wrapped icons, error states, and semantic color tokens that adapt to light and dark themes. ## Quick Start Ask the AI to build a login form with email and password inputs using gluestack-ui v5 components with proper icons and error handling.
