What problem does it solve? Styling React Native apps with gluestack-ui v5 involves many decisions—component props vs className, semantic tokens vs raw colors, NativeWind vs UniWind setup—which leads to inconsistent, unmaintainable UI code. This Skill constrains the solution space to canonical patterns so every component follows the same design system rules. ## Core Features & Use Cases - Opinionated styling rules: Enforces semantic color tokens only (no numbered colors like red-500), component props over className utilities, and compound component patterns such as InputIcon inside InputSlot. - Setup guidance for both engines: Covers CLI-based installation and manual configuration for NativeWind v5 (Expo and RN CLI) and UniWind (Expo only), including global.css token definitions and metro config. - Component creation and variants: Provides templates for simple, compound, form, and loading-state components plus tva-based variant patterns with parent-child relationships and compound variants. - Use Case: When building a new screen in an Expo app, invoke this Skill to generate a profile card or form that uses only semantic tokens, correct compound components, and dark-mode-compatible styling that passes code review. ## Quick Start Ask the assistant to create a new gluestack-ui v5 component, such as a status badge with variants, following the semantic token and compound component rules.
