ramarivera/tamagui-skills

Overview

This skill describes Tamagui v2, a universal React UI framework for building high-performance cross-platform apps for web and native (v1.144.0+). It covers the styled() API, design tokens, theme system, core layout components (XStack/YStack/ZStack), animations, and premium Bento/Takeout integrations. Use it to create consistent, responsive UIs with atomic-style extraction and platform-aware components. The guidance emphasizes practical patterns for theming, responsive design, forms, dialogs, and adaptive experiences.

How this skill works

The skill inspects usage patterns and APIs around @tamagui/* imports, styled(), token references like $token, stack components, theme hooks, and media props to suggest idiomatic implementations. It explains how the compiler extracts atomic CSS at build time, how createTamagui defines tokens and media breakpoints, and how components consume theme context or animations. It also highlights where Bento and Takeout add production-ready components, routing, auth, and sync capabilities.

When to use it

• Building a single codebase for React Native and web (react-native-web) with shared UI
• Creating styled components with tokens, variants, and responsive variants using styled()
• Implementing consistent theming with 12-step color scales and dynamic theme switching
• Adding animations, enter/exit styles, and performant extracted styles at build time
• Using Bento for advanced form/table components or Takeout for full-stack starter features

Best practices

• Define design tokens and media breakpoints in createTamagui and reference them with $token
• Prefer stack primitives (XStack/YStack/ZStack) for layout and use context for compound components
• Use compiler/static extraction to minimize runtime style overhead and reduce bundle size
• Use variants and defaultVariants on styled() for predictable component APIs and consistent styling
• Use AnimatePresence and enterStyle/exitStyle for smooth transitions and platform-friendly animations

Example use cases

• Build a responsive dashboard with XStack/YStack, TanStack Table (Bento) and virtualized lists
• Create a design-system card/button library using styled(), tokens, variants, and withStaticProperties
• Implement theme-aware modal/dialog that adapts to a sheet on mobile via Adapt and Sheet
• Create validated forms using @tamagui/bento inputs integrated with React Hook Form and Zod
• Start a full-stack app with Takeout for routing, Better Auth, Drizzle ORM, and Zero Sync