gluestack-ui-v4

SKILL.md

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

Gluestack components over React Native primitives - Gluestack wraps RN with theming, accessibility, and cross-platform consistency

Component props over className utilities - Use built-in props (size, variant, space) instead of className when available

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

className over inline styles - Inline styles bypass optimization and consistency

Spacing scale over pixel values - Arbitrary values create unsustainable exceptions

Copy-paste philosophy - Components are copied into your codebase, not installed as dependencies

Composable sub-components - Use compound component patterns for flexibility

Remove dead code - Unused patterns mislead AI and increase cognitive load

When to Use This Skill