Claude MarketplacesSubmit
0xbigboss avatar

Tamagui Best Practices

0xbigboss/claude-code

This is a production-oriented reference for Tamagui v1.x that surfaces the non-obvious parts: compiler optimization patterns, variant precedence rules, and the prop ordering gotchas that will bite you. It includes a table pointing to separate pattern files for dialogs, forms, and animations, then walks through Config v4 setup and when styled() beats inline props. The variants-as-const requirement and the styleable() wrapper pattern are documented clearly. If you're past the basics and hitting weird flattening issues or wondering why your dark mode variant isn't working, this covers it. The fetch commands for live docs are a nice touch for catching breaking changes between releases.

skills.sh installs
290
GitHub stars
48
last updated
Jun 3, 2026
View on GitHub

Install

$ npx -y skills add 0xbigboss/claude-code --skill tamagui-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

Tamagui Best Practices

Tamagui v1.x patterns beyond fundamentals: Config v4, compiler optimization, compound components, and gotchas.

Reference Files — Read Before Writing Code

ContextFileWhat it covers
Dialog, Sheet, modal overlays@DIALOG_PATTERNS.mdAdapt component, accessibility
Form, Input, Label, validation@FORM_PATTERNS.mdzod integration
Animations, transitions@ANIMATION_PATTERNS.mddrivers, enterStyle/exitStyle
Popover, Tooltip, Select@OVERLAY_PATTERNS.mdoverlay primitives
Compiler optimization@COMPILER_PATTERNS.mdwhat the compiler can/cannot flatten
Design tokens, theming@DESIGN_SYSTEM.mdpalette, token structure

Config v4

Minimal setup with @tamagui/config/v4. Add styleCompat: 'react-native' for new projects to align flexBasis with React Native behavior:

import { defaultConfig } from '@tamagui/config/v4'
import { createTamagui } from 'tamagui'

export const config = createTamagui({
  ...defaultConfig,
  settings: { ...defaultConfig.settings, styleCompat: 'react-native' },
})
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/0xbigboss/claude-code
First seen
Jun 3, 2026

More from 0xbigboss/claude-code

All 22

Recommended

1juliusbrussee avatarcavemanjuliusbrussee/cavemanUltra-compressed communication mode. Cuts output tokens 65% (measured) by speaking like caveman while keeping full technical accuracy. Supports intensity levels618.3Kskills.sh installs
2mattpocock avatargrill-memattpocock/skillsA relentless interview to sharpen a plan or design.1.5Mskills.sh installs
3shadcn avatarimproveshadcn/improveSurvey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on s40Kskills.sh installs
4obra avatarsystematic-debuggingobra/superpowersUse when encountering any bug, test failure, or unexpected behavior, before proposing fixes326.7Kskills.sh installs
5forrestchang avatarkarpathy-guidelinesforrestchang/andrej-karpathy-skillsBehavioral guidelines to reduce common LLM coding mistakes through explicit assumptions, simplicity, and verifiable success criteria.17.9Kskills.sh installs
6vercel-labs avatarfind-skillsvercel-labs/skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express int4.3Mskills.sh installs