tamagui
npx machina-cli add skill guillempuche/ai-standards/tamagui --openclawTamagui Skill
Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
Source Code Access
Source code is available locally and on GitHub. Check local first, fall back to GitHub if not available.
| Local path | GitHub |
|---|---|
opensrc/repos/github.com/tamagui/tamagui/ | https://github.com/tamagui/tamagui |
Documentation
Core concepts for understanding and using Tamagui's styling system.
| Topic | Description | URL |
|---|---|---|
| Introduction | Overview and key concepts | docs |
| Installation | Getting started and setup | docs |
| Configuration | createTamagui and config options | docs |
| Themes | Dark/light modes and custom themes | docs |
| Tokens | Design tokens for spacing, colors, fonts | docs |
| styled() | Create styled components with variants | docs |
| Animations | Animation drivers and configuration | docs |
| Compiler | Optimizing compiler setup | docs |
| UI Components | Pre-built component library overview | docs |
Source Code
Direct links to implementation code in the monorepo.
| Area | Description | Path |
|---|---|---|
| Repository | Main monorepo with all packages | opensrc/repos/github.com/tamagui/tamagui |
| UI Components | 50+ themed, accessible components | opensrc/repos/github.com/tamagui/tamagui/code/ui |
| Core Packages | Styling engine, themes, hooks, fonts | opensrc/repos/github.com/tamagui/tamagui/code/core |
| Compiler Plugins | Bundler plugins for style extraction | opensrc/repos/github.com/tamagui/tamagui/code/compiler |
Framework Guides
Setup instructions for integrating Tamagui with specific frameworks and bundlers.
| Framework | Description | Docs |
|---|---|---|
| Expo | React Native with Expo managed workflow | docs |
| Next.js | Server-side rendering and App Router | docs |
| Vite | Fast web development with HMR | docs |
| Metro | React Native bundler configuration | docs |
Local References
Detailed reference files with component and API documentation.
references/components.md- UI component library with docs and source linksreferences/core.md- Core packages, configuration APIs, and hooksreferences/compiler.md- Bundler plugins and optimization setup
Source
git clone https://github.com/guillempuche/ai-standards/blob/main/skills/tamagui/SKILL.mdView on GitHub Overview
Tamagui is a universal UI library for React and React Native that lets you share styling across platforms using design tokens and themes with accessible components. It delivers 100% parity with React Native and includes an optimizing compiler (and an optional UI kit) to speed development and improve performance.
How This Skill Works
Tamagui provides a styling system built around design tokens, theming, and a styled API with variants. Its optimizing compiler analyzes tokens and styled components to extract styles at build time, reducing runtime overhead and delivering fast cross‑platform UI.
When to Use It
- Building a cross-platform app (web, iOS, Android) with a single design system.
- Centralizing design tokens (colors, spacing, typography) for consistency across platforms.
- Needing accessible components with consistent keyboard/screen reader behavior.
- Seeking fast UI performance by leveraging Tamagui's compiler to minimize runtime styling.
- Using React, React Native, Next, Expo, or Vite and wanting seamless cross‑framework integration.
Quick Start
- Step 1: Install Tamagui and integrate it into your project (React, React Native, Next, Expo, or Vite).
- Step 2: Create a Tamagui config with tokens and themes (createTamagui) and enable the compiler.
- Step 3: Start styling with styled() and variants, then run and test across platforms.
Best Practices
- Define a balanced tokens set (colors, space, radius, font sizes) at project start and reuse it everywhere.
- Use styled() with variants for component families instead of creating many bespoke components.
- Keep theme definitions in a single Tamagui config (createTamagui) to simplify switching themes.
- Test components across web and native early to catch parity or accessibility gaps.
- Leverage the compiler by enabling build‑time style extraction to reduce bundle size and runtime work.
Example Use Cases
- Cross‑platform shopping app (web and mobile) sharing the same design tokens and components.
- Admin dashboard with dark/light themes and accessible controls.
- News reader with responsive typography and themed UI kit.
- Chat application with consistent chat bubbles, input, and actions across platforms.
- SaaS landing page and app with tokens‑driven theming for marketing and product UIs.
