Tamagui Best Practices

What it does

This skill ensures consistent UI component implementation following established best practices for Tamagui v1.x development. It provides guidance on advanced topics like Config v4 setup, compiler optimization techniques, and patterns for common components such as dialogs, forms, animations, and popovers. The goal is to optimize performance and maintainability by adhering to specific coding conventions.

When to use it

• When building new Tamagui projects or refactoring existing ones.
• To ensure consistent UI component implementation across a team.
• When encountering performance issues related to styling or animations in Tamagui applications.
• For guidance on leveraging Tamagui's compiler optimization features effectively.

Key capabilities

• Config v4 Setup: Provides instructions for minimal configuration and aligning flexBasis with React Native behavior.
• Compiler Optimization: Offers rules and guidelines for optimizing the Tamagui compiler, including avoiding inline conditionals and using styled() variants.
• Component Patterns: Defines patterns for common UI components like dialogs, forms, animations, popovers, and more.
• Design System Integration: Guidance on theme creation and token structure using createThemes.

Example prompts

• "Show me the recommended way to implement a modal overlay in Tamagui."
• "What are the best practices for compiler optimization when using styled components?"
• "How do I configure Tamagui v4 with React Native style compatibility?"

Tips & gotchas

• Variant Order Matters: Later props in variants override earlier ones.
• Prop Priority: Props declared after a spread operator cannot be overridden by callers.
• Use .styleable(): When wrapping styled components, use .styleable() to preserve variant inheritance.