Agent skill · software engineering · aiskillstore
tamagui-best-practices
Use when working with Tamagui projects (tamagui.config.ts, @tamagui imports).
Why this skill is useful
Provides specific patterns and optimization rules for Tamagui that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Tamagui Best Practices Tamagui v1.x patterns beyond fundamentals: Config v4, compiler optimization, compound components, and gotchas. Reference Files — Read Before Writing Code Context File What it covers --------- ------ ---------------- Dialog, Sheet, modal overlays @DIALOGPATTERNS.md Adapt component, accessibility Form, Input, Label, validation @FORMPATTERNS.md zod integration Animations, transitions @ANIMATIONPATTERNS.md drivers, enterStyle/exitStyle Popover, Tooltip, Select @OVERLAYPATTERNS.md overlay primitives Compiler optimization @COMPILERPATTERNS.md what the compiler can/cannot flatten Design tokens, theming @DESIGNSYSTEM.md palette, token structure Config v4 Minimal setup with @tamagui/config/v4. Add styleCompat: 'react-native' for new projects to align flexBasis with React Native behavior: For custom themes use createThemes with palette/accent/childrenThemes — see @DESIGNSYSTEM.md. Compiler Optimization Rules Use styled() variants instead of inline conditionals — dynamic values break flattening. Avoid style={{ ... }} with variables; use variant props instead. The context pattern (createStyledContext) disables compiler flattening — use for higher-level components (Button, Card), not primitives. styled() vs Inline styled(): reusable components, variant-driven behavior, compiler-optimizable primitives. Inline props: one-off layout adjustments on already-styled components. Always use as const on variants objects (TypeScript limitation until inferred const generics). Key Gotchas Prop order determines override priority — props after a spread cannot be overridden by callers: Variant order matters — later props win: Use .styleable() when wrapping styled components — preserves variant inheritance: accept prop for non-standard token resolution (SVG fill/stroke, contentContainerStyle): Import consistency — tamagui, @tamagui/core, and @tamagui/button are different packages; pick one approach per project. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/tamagui-best-practices