skills.rest
truongnat
truongnatCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tamagui-best-practices

Enforce Tamagui configuration, optimization, and UI pattern requirements for web and native.

Updated Mar 5, 2026
Search Tags:#accessibility#design tokens#cross-platform#animations#tamagui#ui patterns#compiler optimization
One-click install
npx skills add https://github.com/truongnat/emplus --skill tamagui-best-practices-truongnat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tamagui-best-practices
Source: https://github.com/truongnat/emplus/tree/main/.agents/skills/tamagui-best-practices
Command: npx skills add https://github.com/truongnat/emplus --skill tamagui-best-practices-truongnat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents common Tamagui v1.x mistakes that cause broken behavior, sluggish performance, and inconsistent cross-platform UI by codifying best practices for configuration, compiler optimization, and UI patterns.

Core Features & Use Cases

  • Tamagui v4 configuration guidance: Establishes a clean setup for tamagui.config.ts using @tamagui/config/v4 and recommended settings for cross-platform style compatibility.
  • Compiler optimization rules: Improves bundle size and runtime performance by avoiding patterns that break Tamagui’s style extraction, and by using the right escape hatches when needed.
  • Cross-platform UI pattern enforcement: Standardizes required structure and accessibility requirements for Dialog/Sheet overlays, overlays like Popover/Tooltip/Select, and interactive animations.
  • Design-system consistency: Encourages token-driven typography, theming, spacing, motion, and anti-pattern avoidance to keep UI coherent across web and native.

Quick Start

Ask the AI: "Create a Tamagui Dialog + Form that follows these rules: use Adapt for touch, ensure Dialog.Title and Dialog.Description exist (even if visually hidden), place animations on Dialog.Content only with animateOnly, and optimize for Tamagui compiler extraction."

Frequently Asked Questions about tamagui-best-practices

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

FAQPage Schema
How do I configure Tamagui to avoid cross-platform UI inconsistencies?▼

To avoid cross-platform UI inconsistencies in Tamagui, establish a clean setup using tamagui.config.ts with @tamagui/config/v4 and recommended settings to ensure style compatibility across web and native environments.

What's the best way to optimize Tamagui compiler extraction for better performance?▼

The best way to optimize Tamagui compiler extraction is to avoid styling patterns that break style extraction and use appropriate escape hatches, which reduces bundle size and improves runtime performance.

Why does my Tamagui Dialog or Sheet overlay have accessibility regressions?▼

Tamagui Dialog or Sheet overlays have accessibility regressions when missing required structure like Dialog.Title and Dialog.Description, or when animations are not placed correctly on Dialog.Content using animateOnly.

How do I build accessible forms and overlays like Popover and Tooltip in Tamagui?▼

To build accessible forms and overlays like Popover and Tooltip in Tamagui, use Adapt for touch interactions and adhere to standardized component structures that enforce required accessibility attributes across platforms.

Can I use design tokens for theming and animations across web and native in Tamagui?▼

Yes, you can use design tokens for theming and animations across web and native in Tamagui by driving typography, spacing, and motion through tokens, which keeps UI coherent and avoids anti-patterns.

Related Skills

Explore More Software Engineering Skills→
0xBigBoss0xBigBoss
53

tamagui-best-practices

Consolidate Tamagui config v4, compiler optimization, and cross-platform styling best practices.

Community
Basic
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate
MichaelsEngineeringMichaelsEngineering

gpd-insert-phase

Insert urgent decimal phases between existing GPD roadmap phases without renumbering.

Community
Advanced
gluestackgluestack
1

gluestack-ui-v4:performance

Optimize Gluestack UI v4 component rendering across native and web platforms.

Official
Intermediate