skills.rest
mattppal
mattppalCOMMUNITY
Explore all skills by this author →
Website𝕏@mattppalGitHub

tamagui-core

Configure Tamagui tokens, themes, and providers for React Native and web UIs.

Updated Jan 17, 2026
Search Tags:#theming#tokens#react-native#expo#ui-patterns#tamagui
One-click install
npx skills add https://github.com/mattppal/matty-stack --skill tamagui-core
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tamagui-core
Source: https://github.com/mattppal/matty-stack/tree/main/.claude/skills/tamagui-core
Command: npx skills add https://github.com/mattppal/matty-stack --skill tamagui-core

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building uniform, cross-platform UIs for React Native and web is error-prone and time-consuming due to fragmented styling approaches. Tamagui Core centralizes core styling, tokens, theming, and reusable patterns to accelerate UI development and ensure consistency across platforms.

Core Features & Use Cases

  • Centralized styling with tokens and themes for consistent visuals.
  • Cross-platform component patterns, media queries, and variants for responsive design.
  • Guidance for setting up TamaguiProvider and integrating with Expo Router and config.

Quick Start

Initialize a new project with Tamagui core and wrap your app with TamaguiProvider to start building cross-platform UI.

Frequently Asked Questions about tamagui-core

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build cross-platform UI with Tamagui for React Native and Expo?▼

To build cross-platform UI with Tamagui, you initialize a project, configure tokens and themes, and wrap your application with TamaguiProvider to ensure consistent styling across mobile and web platforms.

How do I set up TamaguiProvider and configure themes for consistent styling?▼

Setting up TamaguiProvider involves wrapping your app component and passing a configuration object that defines your design tokens, themes, and media queries to centralize and apply consistent visual styling across platforms.

What are design tokens in Tamagui and how do they standardize cross-platform visuals?▼

Design tokens in Tamagui are centralized style variables defining spacing, colors, and sizing. They standardize cross-platform visuals by ensuring React Native and web interfaces reference a single, consistent source of truth for styling.

Does Tamagui work with Expo Router for cross-platform mobile and web apps?▼

Yes, Tamagui integrates with Expo Router to provide cross-platform UI patterns. It applies tokens, themes, and responsive media queries to ensure your mobile and web interfaces remain visually consistent within the Expo ecosystem.

What is the best way to handle responsive design and media queries in React Native?▼

The best way to handle responsive design in React Native using Tamagui is through its built-in media query and variant patterns. These allow you to define conditional styling rules that adapt layouts dynamically across different screen sizes.

Why does my cross-platform UI styling break when sharing components between web and React Native?▼

Cross-platform UI styling breaks due to fragmented styling approaches between web and React Native. Tamagui solves this by centralizing styling logic with tokens and themes, ensuring components render consistently across both platforms.

Related Skills

Explore More Software Engineering Skills→
shahmirerrorshahmirerror

revenuecat

Configure RevenueCat in-app purchases for Expo/React Native apps.

Community
Advanced
Yoriichi-DangYoriichi-Dang

design-system-patterns

Codify design tokens, theming, and component APIs for scalable design systems.

Community
Advanced
oldwombatoldwombat

building-native-ui

Guide developers to implement Expo Router-based native UI in React Native projects.

Community
Intermediate
chaitinchaitin
5

react-native-design

Standardizes styling, navigation, and motion patterns for React Native apps using React Navigation and Reanimated.

Official
Advanced