Gluestack UI v5 Design Patterns

This skill enforces constrained, opinionated styling patterns for gluestack-ui v5 (Tailwind CSS v4 with CSS-first configuration) that reduce decision fatigue, improve performance, enable consistent theming, and limit the solution space to canonical patterns. Supports both NativeWind v5 (Expo + RN CLI) and UniWind (Expo only) styling engines.

Core Principles

1. Gluestack components over React Native primitives - Gluestack wraps RN with theming, accessibility, and cross-platform consistency
2. Component props over className utilities - Use built-in props (size, variant, space) instead of className when available
3. Semantic tokens ONLY - NO EXCEPTIONS - NEVER use generic tokens (typography-*, neutral-*, gray-*) or numbered colors (red-500, blue-600). ONLY use semantic tokens (text-foreground, bg-primary, border-border, etc.) with optional alpha values
4. className over inline styles - Inline styles bypass optimization and consistency
5. Spacing scale over pixel values - Arbitrary values create unsustainable exceptions
6. Copy-paste philosophy - Components are copied into your codebase, not installed as dependencies
7. Composable sub-components - Use compound component patterns for flexibility
8. Remove dead code - Unused patterns mislead AI and increase cognitive load

When to Use This Skill