Zest Design System Integration

Core Principles

Always wrap app root with ZestProvider. ZestProvider must be at the app root (ScreenEntryProvider, NavigationEntryProvider, or WidgetEntryProvider) to ensure all components have access to theme context. Never nest ZestProviders or use inside components.

Use useZestStyles for static styling, useZestTheme for dynamic styling. useZestStyles with createStylesConfig resolves token strings ('alias.color.brand.background.default') to values automatically. useZestTheme provides direct access to theme object for conditional or computed styles with useMemo.

Use semantic alias tokens for colors, global tokens for measurements. Alias tokens (alias.color.) provide semantic meaning and adapt to theme changes (light/dark mode). Global tokens (global.spacing., global.borderRadius.*) provide consistent primitive values across all components.

Extract StylesConfig outside components for performance. Always define StylesConfig outside component functions to prevent recreation on every render. Use static token strings for consistent styling that updates automatically with theme changes.

Why: Proper Zest integration ensures consistent theming, automatic dark mode support, type-safe token access, and optimal performance through proper provider composition and style memoization.

When to Use This Skill

Use these patterns when: