Gluestack UI v4 Design Patterns

This skill enforces constrained, opinionated styling patterns for gluestack-ui v4 that reduce decision fatigue, improve performance, enable consistent theming, and limit the solution space to canonical patterns.

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